TypeScript - interface

Intro

자바스크립트의 핵심 원리는 변수가 가지고 있는 shape에 초점을 맞추고 확인하는 과정을 거친다. 인터페이스란 이러한 타입들을 변수에 부여해서 코드내의 약속 및 규칙을 정의하는 역할을 한다. 자주 사용되는 변수의 경우는 다음과 같다.

∙ 객체의 선언(정보 => 속성과 타입)
∙ 함수 파라미터의 타입
∙ 함수 반환값의 타입
∙ 배열, 객체, 클래스

Usage

interface User{
  name: string; // 속성 : 타입순으로 작성
  age: number; 
};

const mike: User = {name: 'Mike', age: 50};
// 변수: 인터페이스 = {속성값 정의}

function getUser(user: User) {
  console.log(user.name);
}

객체와 비슷하게 인터페이스는 중괄호 안에 해당 속성과 속성의 타입이 정의된다.
User라는 인터페이스는 문자열로된 name, 숫자로 된 age를 갖는 것이다. 하나의 속성에 타입이 정해지면 세미콜론으로 구분한다. 나중에 파라미터로 넘길 때 User가 쓰일것이고 name에 숫자가 맵핑된다면 타입스크립트 엔진은 바로 오류를 잡아낸다.

interface Person {
  name: string;
  age: number;
};

interface Developer extends Person{
  language: string;
};

const sam: Developer = {name: 'Sam', age: 30, language: 'English'};

마치 자바스크립트의 클래스 상속처럼 인터페이스도 부모 인터페이스의 속성을 상속받을 수 있다. Developer는 기존 'language' 속성과 더불어 Person으로부터 'name'과 'age' 속성을 물려받아서 이 모두를 각각의 타입에 맞는 값으로 선언해야 한다.

interface player{
	name: string;
  	height: number;
  	team?: string;
};

const kane = {
  name: 'Kane',
  height: 190,
};

function seePlayer(player: player){
  console.log(player.height);
}

seePlayer(kane);

인터페이스의 속성을 정의할 때 team?: string처럼 속성의 이름뒤에 물음표를 붙이면 선택적인 사항이 된다. 사용자에 따라 team에 대한 값을 입력해도 되고 넘겨도 되는것이다.

참고)
인프런 - 타입스크립트 입문(기초부터 실전까지)
https://www.typescriptlang.org/docs/handbook/interfaces.html