Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
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
Tags
more
Archives
Today
Total
관리 메뉴

바스키아

TypeScript 인터페이스(Interface) 본문

JS/TypeScript

TypeScript 인터페이스(Interface)

바스키아1 2019. 8. 29. 15:13

자바에서 사용하던 인터페이스의 의미와 거의 비슷하다고본다 

인터페이스는 변수의 타입으로 사용할 수 있다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 한다. 이것은 새로운 타입을 정의하는 것과 유사하다.

 

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}
 
// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;
 
// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1content'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