바스키아
TypeScript 인터페이스(Interface) 본문
자바에서 사용하던 인터페이스의 의미와 거의 비슷하다고본다
인터페이스는 변수의 타입으로 사용할 수 있다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 한다. 이것은 새로운 타입을 정의하는 것과 유사하다.
// 인터페이스의 정의
interface Todo {
id: number;
content: string;
completed: boolean;
}
// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;
// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };
|
자세히 봐볼까? 그리고 꼭 변수만이아니야
인터페이스에 두 메소드를 정의하고 변수를 TV로 정해서 객체를 담는다... 과연?
프로퍼티 타입이 turnOn, turnOff 가 missing되었다고 타입오류를 주네용??
그래서 인터페이스 안에는 어떤 행위를 한다고만 기술은 해... 자바하던사람들은 바로이해할꺼야..ㅎ
여기에서 더 자바스럽게 간다면 아래처럼 추가할수 있어
ㅋㅋㅋㅋㅋ 하지만 프로젝트를 한번 만들어보니까 보통 타입 속성만 기술하더라고
interface Cell {
row : number;
col : number;
piece : Piece;
}
interface Piece {
move(from : Cell, to : Cell): boolean;
}
function CreateBoard() {
const cells: Cell[] = [];
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 3; col++) {
cells.push({row, col})
}
}
return cells;
}
const board = CreateBoard();
board[0].piece ={
move(from:Cell, to : Cell){
return true
}
}
|
보통 이런식으로 사용할수 있다... 보통 이렇게 다 쓴다고!!
**이것을 tsc 컴파일해보면 타입 기술된거 다지워짐.... what??
--> 무슨말이냐면 인터페이스가 왜 지워졌나...ㅜㅜ ---> 개발하는 이 시점에서만 타입을 체크하기위해 존재!!
--> 실제 자바스크립트 런타임시에는 인터페이스 상관없이 돌아감..._> 인터페이스 아무리 만들어봤자 기능에 문제x
인터페이스는 생각보다 간단해!! 하지만 실전에서는 또모르지 ㅎㅎ 여튼 화이팅이야 ㅎ
'JS > TypeScript' 카테고리의 다른 글
TypeScript Enum (0) | 2019.08.29 |
---|---|
TypeScript 함수형 타입(function Type) (0) | 2019.08.29 |
TypeScript 기본타입 (0) | 2019.08.29 |
TypeScript 변수선언 (feat. var, const, let) (0) | 2019.08.29 |
TypeScript Config (feat. tsconfig.json) (0) | 2019.08.28 |