-
[learn-typescript] ํ ์ผ ๊ด๋ฆฌ ์ฑ JS -> TS ๋ณํcodeStates front-end/Typescript 2023. 7. 4. 16:33๋ฐ์ํ
๐ ํ ์ผ ๊ด๋ฆฌ ์ฑ JS -> TS ๋ณํ
JavaScript
let todoItems; // api function fetchTodoItems() { const todos = [ { id: 1, title: '์๋ ', done: false }, { id: 2, title: 'ํ์ ', done: false }, { id: 3, title: '์คํฌ๋ฆฝํธ', done: false }, ]; return todos; } // crud methods function fetchTodos() { const todos = fetchTodoItems(); return todos; } function addTodo(todo) { todoItems.push(todo); } function deleteTodo(index) { todoItems.splice(index, 1); } function completeTodo(index, todo) { todo.done = true; todoItems.splice(index, 1, todo); } // business logic function logFirstTodo() { return todoItems[0]; } function showCompleted() { return todoItems.filter(item => item.done); } // TODO: ์๋ ํจ์์ ๋ด์ฉ์ ์ฑ์๋ณด์ธ์. ์๋ ํจ์๋ `addTodo()` ํจ์๋ฅผ ์ด์ฉํ์ฌ 2๊ฐ์ ์ ํ ์ผ์ ์ถ๊ฐํ๋ ํจ์์ ๋๋ค. function addTwoTodoItems() { // addTodo() ํจ์๋ฅผ ๋ ๋ฒ ํธ์ถํ์ฌ todoItems์ ์ ํ ์ผ์ด 2๊ฐ ์ถ๊ฐ๋์ด์ผ ํฉ๋๋ค. } // NOTE: ์ ํธ ํจ์ function log() { console.log(todoItems); } todoItems = fetchTodoItems(); addTwoTodoItems(); log();
>>>
TypeScript
// ํ์ ๋ณ์นญ // type Todo = { // id: number; // title: string; // done: boolean; // }; // ์ธํฐํ์ด์ค ์ค์ interface Todo { id: number; title: string; done: boolean; } // ์ธํฐํ์ด์ค๋ฅผ ์ด์ฉํ์ฌ todoItems ์ ์ธ let todoItems: Todo[]; // api // todos๋ ๋ฐฐ์ด์์ ๊ฐ์ฒด๊ฐ ๋ค์ด์๋ค. function fetchTodoItems(): Todo[] { const todos = [ { id: 1, title: '์๋ ', done: false }, { id: 2, title: 'ํ์ ', done: false }, { id: 3, title: '์คํฌ๋ฆฝํธ', done: false }, ]; return todos; } // crud methods function fetchTodos(): object[] { const todos = fetchTodoItems(); return todos; } // ๋ฐํ๊ฐ(return)์ด ์์ ๋ void๋ก ์ ์ธ function addTodo(todo: Todo): void { todoItems.push(todo); } // index -> ๋ฐฐ์ด์ ํน์ ์ธ๋ฑ์ค function deleteTodo(index: number): void { todoItems.splice(index, 1); } function completeTodo( index: number, todo: { id: number; title: string; done: boolean } ): void { todo.done = true; todoItems.splice(index, 1, todo); } // business logic function logFirstTodo(): object { return todoItems[0]; } function showCompleted(): object[] { return todoItems.filter(item => item.done); } // TODO: ์๋ ํจ์์ ๋ด์ฉ์ ์ฑ์๋ณด์ธ์. ์๋ ํจ์๋ `addTodo()` ํจ์๋ฅผ ์ด์ฉํ์ฌ 2๊ฐ์ ์ ํ ์ผ์ ์ถ๊ฐํ๋ ํจ์์ ๋๋ค. function addTwoTodoItems(): void { // addTodo() ํจ์๋ฅผ ๋ ๋ฒ ํธ์ถํ์ฌ todoItems์ ์ ํ ์ผ์ด 2๊ฐ ์ถ๊ฐ๋์ด์ผ ํฉ๋๋ค. const item1 = { id: 4, title: 'item 4', done: false, }; addTodo(item1); addTodo({ id: 5, title: 'item 5', done: false, }); } // NOTE: ์ ํธ ํจ์ function log(): void { console.log(todoItems); } todoItems = fetchTodoItems(); addTwoTodoItems(); log();
๋ฐ์ํ'codeStates front-end > Typescript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[learn-typescript] interface ์ฝ๋ฉ ์์ฑ (0) 2023.07.05 [learn-typescript] typescript์ ์ฅ์ (0) 2023.07.03 [learn-typescript] live server ์ด์ฉํด์ user ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ (0) 2023.06.28 [TS] ์ ๋ค๋ฆญ (0) 2023.03.23 [TS] ํ์ ์ ํ์ (0) 2023.03.21