실습 내용
- 이넘(Enum) 살펴보기
- 인터페이스 안에서 특정 속성을 타입을 인터페이스로 지정하기
- 특정 객체의 키를 지정하지 않았을 때, 키 값을 받을 수 있는 방법
- 배열의 타입 지정
- fetch인 promise 안에 제네릭을 왜 넘기는지, 어떻게 넘기는지 알아보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
interface PhoneNumberDictionary {
[phone: string]: {
num: number;
};
}
interface Contact {
name: string;
address: string;
phones: PhoneNumberDictionary;
}
enum PhoneType {
Home = "home",
Office = "office",
Studio = "studio",
}
// api
// TODO: 아래 함수의 반환 타입을 지정해보세요.
function fetchContacts(): Promise<Contact[]> {
// TODO: 아래 변수의 타입을 지정해보세요.
const contacts: Contact[] = [
{
name: "Tony",
address: "Malibu",
phones: {
home: {
num: 11122223333,
},
office: {
num: 44455556666,
},
},
},
{
name: "Banner",
address: "New York",
phones: {
home: {
num: 77788889999,
},
},
},
{
name: "마동석",
address: "서울시 강남구",
phones: {
home: {
num: 213423452,
},
studio: {
num: 314882045,
},
},
},
];
return new Promise((resolve) => {
setTimeout(() => resolve(contacts), 2000);
});
}
// main
class AddressBook {
// TODO: 아래 변수의 타입을 지정해보세요.
contacts: Contact[] = [];
constructor() {
this.fetchData();
}
fetchData(): void {
fetchContacts().then((response) => {
this.contacts = response;
});
}
/* TODO: 아래 함수들의 파라미터 타입과 반환 타입을 지정해보세요 */
findContactByName(name: string): Contact[] {
return this.contacts.filter((contact) => contact.name === name);
}
findContactByAddress(address: string): Contact[] {
return this.contacts.filter((contact) => contact.address === address);
}
// 이넘(enum) 활용
findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
return this.contacts.filter(
(contact) => contact.phones[phoneType].num === phoneNumber
);
}
addContact(contact: Contact): void {
this.contacts.push(contact);
}
displayListByName(): string[] {
return this.contacts.map((contact) => contact.name);
}
displayListByAddress(): string[] {
return this.contacts.map((contact) => contact.address);
}
/* ------------------------------------------------ */
}
new AddressBook();
🧸 Feelings …
비동기 처리에서 return 값이 없으면 void
..!!
Reference
[캡틴판교 TS] 타입스크립트 입문 - 기초부터 실전까지
타입스크립트 핸드북
본 포스팅은 캡틴판교 강사님의
타입스크립트 입문 - 기초부터 실전까지
강의를 수강하고 난 후, 본인의 주관적인 견해에 의하여 작성되었습니다.