728x90
//tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"target": "es5",
"lib": ["es2015", "dom", "dom.iterable"],
"noImplicitAny": true, //false에서 true로 수정.
"strict": true, //추가
"strictFunctionTypes": true, //추가
},
"include": ["./src/**/*"]
}
기본셋팅
interface PhoneNumberDictionary {
[phone: string]: {
num: number;
};
}
interface Contact {
name: string;
address: string;
phones: PhoneNumberDictionary;
}
// api
// TODO: 아래 함수의 반환 타입을 지정해보세요.
function fetchContacts() {
// TODO: 아래 변수의 타입을 지정해보세요.
const contacts = [
{
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 = [];
constructor() {
this.fetchData();
}
fetchData() {
fetchContacts().then(response => {
this.contacts = response;
});
}
/* TODO: 아래 함수들의 파라미터 타입과 반환 타입을 지정해보세요 */
findContactByName(name) {
return this.contacts.filter(contact => contact.name === name);
}
findContactByAddress(address) {
return this.contacts.filter(contact => contact.address === address);
}
findContactByPhone(phoneNumber, phoneType: string) {
return this.contacts.filter(
contact => contact.phones[phoneType].num === phoneNumber
);
}
addContact(contact) {
this.contacts.push(contact);
}
displayListByName() {
return this.contacts.map(contact => contact.name);
}
displayListByAddress() {
return this.contacts.map(contact => contact.address);
}
/* ------------------------------------------------ */
}
new AddressBook();
< promise를 이용한 API 함수 타입 정의 >
function fetchItems(): Promise<string[]> {
let items: string[] = ['a', 'b', 'c'];
return new Promise(function (resolve) {
resolve(items);
})
}
// 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)을 이용한 타입 정의 >
enum PhoneType {
Home = 'home',
Office = 'office',
Studio = 'studio',
}
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);
// ['Tony', '마동석']
}
displayListByAddress(): string[] {
return this.contacts.map(contact => contact.address);
}
// 완료 코드
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);
}
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);
// ['Tony', '마동석']
}
displayListByAddress(): string[] {
return this.contacts.map(contact => contact.address);
}
/* ------------------------------------------------ */
}
new AddressBook();
728x90
'개인공부 > 캡틴판교 TS' 카테고리의 다른 글
10. 제네릭 (0) | 2023.05.07 |
---|---|
9. 클래스 (0) | 2023.05.07 |
7. 유니언타입, 인터섹션타입 (0) | 2023.05.07 |
6. 타입별칭, 타입과 인터페이스차이 (1) | 2023.05.07 |
5. 인터페이스 (0) | 2023.05.07 |