가수면

인터페이스 vs 타입 앨리어스 본문

JavaScript/TypeScript

인터페이스 vs 타입 앨리어스

니비앙 2023. 3. 22. 23:25

interface

객체를 정의할 때, 확장성이 있을 때 사용

 

type

데이터를 정의할 때, 확장성이 없거나 적다고 판단될 때 사용

확장

interface

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

interface Admin extends User {
  role: string;
}

type

type PeopleType = {
  name: string
  age: number
}

type StudentType = PeopleType & {
  school: string
}

함수 정의

interface

interface Calculation {
  (a: number, b: number): number;
}

const add: Calculation = (a, b) => a + b;


interface login {
  (username: string, password: string): boolean;
}

let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

type

type Calculation = (a: number, b: number) => number;

const add: Calculation = (a, b) => a + b;

interface

읽기 전용 속성

재할당 불가

interface CraftBeer {
  readonly brand: string;
}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!
let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error
interface ReadonlyStringArray {
  readonly [index: number]: string;
}

const arr: ReadonlyStringArray = ['Thor', 'Hulk'];
arr[2] = 'Capt'; // Error!

 

만약 인터페이스 정의하지 않은 속성들을 추가로 사용하고 싶을 때

interface CraftBeer {
  brand?: string;
  [propName: string]: any;
}

 

'JavaScript > TypeScript' 카테고리의 다른 글

타입스크립트에서 children  (0) 2023.04.01
라이브러리 매개변수  (0) 2023.03.27
string | undefined 등 props 관련 오류  (0) 2023.01.08
json 타입 가져오기  (0) 2023.01.08
State  (0) 2023.01.07
Comments