본문 바로가기

JS&TS Essential/Type

type alias와 interface

https://code-mania.tistory.com/29

 

TypeScript의 type 알아보기

기본적으로 js에는 다음과 같은 type들이 있다. String Number Boolean Array Function Object 타입 지정 방법 이번 시간에는 기본타입을 변수에 적용하는 방법에 대해서 알아볼 것이다. TypeScript는 TypeScript..

code-mania.tistory.com

위 글에서 기본 타입을 알아봤다. 하지만 프로그래밍하다보면 기본 타입만으로는 해결하기 어려운 상황에 직면할 것이다.

이 때 어떤 해결책이 있는지 알아보자~~~~

Type Alias와 Interface

사용자 정의 type을 지정하기 위한 방법으로 type alias와 interface를 이용하는 2가지 방법이 있다.

type alias는 type 키워드를 이용하는 방법이고, interface는 interface 키워드를 이용하는 방법이다.

둘 다 문법이 굉장히 유사하다.

 

 

 


공통점

함수타입 지정하기

 

// interface 함수타입정의
interface IIsMale {
    (gen: '남' | '여'): boolean;
}

// type alias 함수정의1
type TIsMale = {
    (gen: '남' | '여'): boolean;
}

// type alias 함수정의2
type TIsMale2 = (gen: '남' | '여') => boolean;

const isMale: IIsMale = (gen) => {
    return gen == '남';
}

type alias와 interface의 함수타입 정의 문법이 굉장히 비슷하다는 것을 알 수 있다.
다만 type alias에서는 TIsMale2와 같이 interface보다 조금 더 쉽게 선언이 가능하다.
또한 함수타입의 함수를 구현할 때는 람다식(화살표함수)을 사용해야 한다.

 

객체 타입 지정하기

 

type HumanTypeAlias = {
    readonly name: string;
    likeNumber: number;
    isAdult?: boolean;
}

interface HumanInterface {
    readonly name: string;
    likeNumber: number;
    isAdult?: boolean;
}

const person: HumanTypeAlias = { // 또는 : HumanInterface
    name: 'code-lover',
    likeNumber: 4,
    isAdult: true //? 옵션으로 인해 isAdult에 값을 할당하지 않아도 에러 발생 X
};

// readonly 옵션으로 인해 에러 발생
person.name = 'codeLover';
isAdult 뒤쪽에 있는 ?는 필수값이 아니라는 뜻으로,
해당 표기가 되어있는 필드는 undefined 상태일 수도 있다.
이렇게 undefiend일 가능성이 있는 변수에 대해서는 null Check를 해주는 것이 좋으며,
이를 type을 방어한다고 해서 Type Guard라고 부른다. 
name은 readonly option이 지정되어있다.
readonly 옵션이 붙은 필드는 수정하는 것이 불가능하고,
읽어오는 것만이 가능하다.

 

typealias와 interface로 함수 type과 객체type을 선언해보았는데,

문법적으로만 조금 차이가 있을 뿐 기능적으로는 차이가 전혀 없다.

 

 

 


차이점

 

// literal type 정의
type gen = '남' | '여';
type yesOrNo = 'Y' | 'N';

// 의미를 구체화하기 위해 타입 정의
type name = string;
type meter = number;

const length: meter = 100;

 

interface에서는 literal type을 선언하거나

string, number와 같은 기본타입들을 이름만 바꿔서 재정의하는 것이 불가능하다.

해당 기능은 type alias에서만 지원한다.

 

 

 


type alias는 data에 대한 타입을 지정하는데 interface보다 최적화되어있다.

또한 오늘 자세히 살펴보지는 못했지만, interface는 객체 type에 대해 최적화되어있다.

따라서 객체가 아닌 일반 data나 단일 함수에 대한 타입은 type alias 위주

메서드까지 포함된 객체나 클래스에 관한 디자인은 interface 위주로 하는 것이 좋다.

'JS&TS Essential > Type' 카테고리의 다른 글

객체 Type 알아보기  (0) 2021.11.15
Type의 확장  (0) 2021.11.11
Type 추론  (0) 2021.11.09
TypeScript의 type 알아보기  (0) 2021.03.03