728x90
//tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"noImplicitAny": false
},
"include": ["./src/**/*"]
}
저기서 noImplicitAny를 true로 바꾸면 ts파일에 타입이 정해지지 않을것들에 빨간줄이 생길거다!!!
noImplicitAny 의미는 any라고 붙여라. 이런의미이다.
실습하기전 상태
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();
1.return 없으니까 void
function addTodo(todo): void {
todoItems.push(todo);
}
2. 맨밑의 코드에서 todoItems가 fetchTodoItems랬는데, todos가 배열안에 객체로 이루어져있다.
let todoItems: object[];
3. todoItems랑 fetchTodoItems 같으니까
function fetchTodoItems(): object[] {
const todos = [
{ id: 1, title: '안녕', done: false },
{ id: 2, title: '타입', done: false },
{ id: 3, title: '스크립트', done: false },
];
return todos;
}
4. todos랑 연결된다고생각하면 된다.
function fetchTodos(): object[] {
const todos = fetchTodoItems();
return todos;
}
5.
function addTodo(todo: object): void {
todoItems.push(todo);
}
6.
function deleteTodo(index: number): void {
todoItems.splice(index, 1);
}
7.
function completeTodo(index: number, todo:object): void {
todo.done = true;
todoItems.splice(index, 1, todo);
}
8.
function logFirstTodo(): object {
return todoItems[0];
}
9.
function showCompleted(): object[] {
return todoItems.filter(item => item.done);
// return todoItems.filter(function(item){
// if(item.done){
// return item;
// }
// })
}
10.
function log(): void {
console.log(todoItems);
}
11.
// TODO: 아래 함수의 내용을 채워보세요. 아래 함수는 `addTodo()` 함수를 이용하여 2개의 새 할 일을 추가하는 함수입니다.
function addTwoTodoItems(): void {
// addTodo() 함수를 두 번 호출하여 todoItems에 새 할 일이 2개 추가되어야 합니다.
const item1 ={
id:4,
title: '아이템 4',
done: false
}
addTodo(item1);
addTodo({
id: 5,
title: '아이템 5',
done: false,
})
}
오류잡을때 ts오류코드 이용하면 좋다!
12. todoItems를 구체화한다.
let todoItems: object[];
//이렇게 바꿔주자.
let todoItems: { id: number; title: string; done: boolean }[];
13. todo의 오류를 잡아주자.
todo를 구체화해야한다.
function addTodo(todo: object): void {
todoItems.push(todo);
}
//이렇게 바꿔주자.
function addTodo(todo: { id: number; title: string; done: boolean }): void {
todoItems.push(todo);
}
14. 오류를 잡아주자
function completeTodo(index: number, todo:object): void {
todo.done = true;
todoItems.splice(index, 1, todo);
}
//이렇게 바꾸자
function completeTodo(index: number, todo:{ id: number; title: string; done: boolean }): void {
todo.done = true;
todoItems.splice(index, 1, todo);
}
15. todoItems의 오류를 잡아주려고 fetchTodoItems의 함수를 찾아가자.
function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
const todos = [
{ id: 1, title: '안녕', done: false },
{ id: 2, title: '타입', done: false },
{ id: 3, title: '스크립트', done: false },
];
return todos;
}
16. 중복코드제거
let todoItems: { id: number; title: string; done: boolean }[];
type Todo = {
id: number;
title: string;
done: boolean;
};
let todoItems: Todo[];
728x90
'개인공부 > 캡틴판교 TS' 카테고리의 다른 글
6. 타입별칭, 타입과 인터페이스차이 (1) | 2023.05.07 |
---|---|
5. 인터페이스 (0) | 2023.05.07 |
3-2. 함수타입-파라미터,반환값, 옵셔널파라미터 (0) | 2023.05.06 |
3-1. 기본타입-문자열, 숫자,배열,튜플,객체,진위값 (0) | 2023.05.06 |
2-2 내용정리 (타입스크립트 설정파일) (0) | 2023.05.06 |