타입스크립트에서 인터페이스는 다른 언어처럼 머리만 존재하는, 즉 형식만 존재하는 구조체 이다.
인터페이스를 상속받아서 자료형을 만들수도 있고, 클래스로 상속 받을 수도 있다.
아래코드는 인터페이스를 구현한 뒤 해당 인터페이스를 자료형으로 구현한 모습이다.
interface Person {
head:string,
hand:string,
body:string,
method: ()=>void
}
const man : Person = {
head:'a', //다른 자료형태가 들어오게 되면 당현히 컴파일 오류가 난다.
hand:'b',
body:'c',
method: () : void =>{console.log('method working');}
}
console.log(man.head);
console.log(man.hand);
console.log(man.body);
man.method();
유니온 타입의 변수를 포함하여 사용 할 수 있다. 조금 특별한 것은 유니온 타입으로 함수가 포함되어 있는경우에는 해당 구현부가 조금 다르다.
interface Optional {
first : string|number,
second : number|boolean,
third : boolean| ((num:number)=> number) //유니온 형태로 함수를 넣은경우 형식
}
const Run : Optional = {
first : 'string',
second : true,
third : (arg : number) : number => arg * 2
}
console.log(Run.first);
console.log(Run.second);
console.log(typeof Run.third); // 함수가 리턴됨을 알 수 있다.
const method:any = Run.third; //함수를 any형태의 자료형으로 받아야 한다.
console.log(method(10)); //함수 실행
인터페이스를 상속받아 기능을 구현하는 형식의 라이브러리를 자주 사용 할 수 있었다(앵귤러 기준)
반응형
'TypeScript' 카테고리의 다른 글
Typescript 제네릭 그리고 any (0) | 2019.04.26 |
---|---|
Typescript 클래스 (5) | 2019.04.26 |
Typescript 유니언(Union) (0) | 2019.04.26 |
Typescript 배열 (0) | 2019.04.26 |
Typescript 함수 (0) | 2019.04.26 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글