Interface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
interface Person {
name: string;
age?: number; // '?' 있을 수도 있고 없을 수도 있음.
[index: string]: string; // indexable type : 프로퍼티 명으로 옵셔널하게 사용가능
[index: number]: number;
hello(): void;
hi(): string;
ho(): string;
}

const person: Person = {
name: 'Junho',
age: 35,
hello: function() {},
hi: (): string => { return 'hi'; },
ho(): string { return 'hello'; }
};

person.anybody = "junho"; // indexable type 사용
person[0] = 1;

function hello(p: Person): void {
console.log('안녕하세요 ${p.name} 입니다.');
}

Class Implements Interface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
interface IPerson {
name: string;
hello(): void;
}

class Persion implements IPerson {
name: string = null;
hello(): void {
console.log('안녕하세요 ${this.name} 입니다.');
}

constructor(name: string) {
this.name = name;
}

public hi() : void {
console.log('안녕 준호임');
}
}

const person: Person = new Person('Junho');
person.hi();

Function Interface

1
2
3
4
5
6
7
8
9
interface HelloPerson {
(name: string, age?: number): void;
}

let helloPerson: HelloPerson = function(name: string) {
console.log(name);
}

helloPerson('Junho');

함수인터페이스는 사용할때 타입체크를 함.

Reference

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%94%EB%A6%AC%EC%95%84-1705-%EA%B8%B0%EC%B4%88-%EC%84%B8%EB%AF%B8%EB%82%98/?subscribe

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea