TIL61.Interface&Type Aliases

6060 단어 TILtsTIL

'인터페이스'의 사용법과 '타입별칭'에 대해 알아보자.

Interface란?

인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약을 말한다.

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

interface + 원하는 이름, 객체 안에 항목들을 넣어주고, 타입을 지정해준다.

Interface 활용

변수, 함수 등에 인터페이스를 활용할 수 있다.

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

//변수에 인터페이스 활용하기
let yeonjeong: User = {
  age: 12,
  name: "연정",
};

//함수에 인터페이스 활용하기
function getUser(user: User) {
  console.log(user);
}

getUser(yeonjeong);

user파라미터는 User인터페이스 형식을 따르는 데이터만 받을 수 있다.

인터페이스 확장

//인터페이스 확장
interface Person {
  name: string;
  age: number;
}
//변경 전 코드
interface Developer {
  name: string;
  age: number;
  language: string;
}
//변경 후 코드
interface Developer extends Person {
  language: string;
}

let Thor: Developer = {
    name:'토르',
    age:100,
    language:'TS'
}

Developer 값 중에 중복되는 값이 다른 인터페이스에 있다면, 해당 속성과 타입을 extends라는 키워드를 통해 확장해서 사용할 수 있다.
Developer 인터페이스를 사용하는 객체 Thor의 속성 중에 Person, Developer 속성이 한가지라도 없다면 오류가 난다.


타입별칭

특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

// 1.string 타입을 사용할 때
const name: string = 'mong';

// 2.타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'mong';

//interface-타입별칭
type Developer = {
	name: string;
  	skill: string;
}

타입별칭 VS 인터페이스

  • 타입 별칭과 인터페이스 프리뷰 결과가 다르다.
  • 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하다. 따라서, type보다는 interface로 선언해서 사용하는 것이 좋다.
  • 타입별칭은 기본타입, 유니온 타입, 튜플을 사용해야할 때 쓰인다.
    인터페이스는 불가능하다.

* interface, type별칭이 많이지면 따로 빼서 모듈화시켜 사용한다.(export, import)

좋은 웹페이지 즐겨찾기