[TypeScript] 타입 별칭 & Interface

roses16·2023년 4월 26일
0

타입 별칭(Type Aliases)

변수 타입의 이름을 생성한다. 새로운 변수타입을 생성하는 것이 아닌 지정할 수 있는 이름을 생성한다.

type Name = string;			// 선언
let student: Name = "Kim";	// 사용

제네릭, 교차 타입과 함께 사용하여 아래와 같은 LinkedList 형태를 만들 수 있다.

type LinkedList<T> = T & { next: LinkedList<T> };

interface Data {
    name: string;
}

let people: LinkedList<Data>;
let s = people.name;
let s = people.next.name;
let s = people.next.next.name;

Interface

변수 타입을 정의하는 데에 사용하는 구문. 프로젝트 내/외부에서 사용하는 코드의 룰을 정의하는데 유용하다.

  • 선언
    interface LabeledValue {
       label: string;
       size: number;
    }
  • 사용
    변수 및 함수 선언 등 데이터 타입 지정이 필요한 경우 동일하게 사용할 수 있다.
    let label: LabeledValue;
    function printLabel(labelObj: LabeledValue){
      // ...
    }

선택적 프로퍼티(Optional Properties)

Interface에서 Key이름에 붙여 사용한다. 해당 프로퍼티의 할당이 선택적임을 말한다.

let obj: { name:string, age?:number } = { name:'A'}; // 성공

읽기 전용 프로퍼티(Readonly properties)

readonly 구문을 이용하여 생성한다. 객체가 처음 생성된 이후 수정할 수 없다.

interface Point {
    readonly x: number;
    readonly y: number;
}

let p: Point = {x: 1, y: 2};
p.x = 2; // Error

ReadOnlyArray<T> 타입을 통해 생성 후 변경이 불가한 배열을 생성할 수 있다. ReadOnlyArray<T>Array<T> 타입과 다른 타입으로 인식하므로 대입이 필요한 경우 타입 단언으로 오버라이드하여 사용한다.

초과 프로퍼티 검사(Excess Property Checks)

선택적 프로퍼티를 이용한 interface는 초과 프로퍼티가 검사된다. 이는 "대상 타입 (target type)"이 갖고 있지 않은 프로퍼티를 갖고 있을 경우 에러를 발생시킨다.

interface LabelValue {
  name?: string;
  size?: number;
}

let myLabel: LabelValue = { name: "Devlog" };
let myLabel: LabelValue = { name: "Devlog", width: 10}; // Error

함수 타입(Function Types)

함수 매개변수와 반환값의 타입을 지정할 수 있다.

  • 선언

    interface SearchFunc {
        (source: string, subString: string): boolean;
    }

    (source: string, subString: string) : 매개변수 이름과 타입
    : boolean : 반환값 타입

  • 사용

    let func: SearchFunc;
    func = function(src, sub) {
     // ...
     return false;
    }

    매개변수는 같은 위치에 대응되는 값을 검사한다. 때문에 위와 같이 타입을 지정하지 않을 수 있다.

인덱서블 타입(Indexable Types)

Key와 Value로 이루어진 프로퍼티에서 Key의 데이터 타입에 따른 Value의 데이터 타입을 지정할 수 있다.

interface StudentValue {
  name: string;
  [index: number]: string;	// Indexable type
}

let student: StudentValue = {
  name: "Kim",
  1: "A"					// Indexable type
};

타입 별칭(Type Aliases)과 Interface 비교

  • 확장성
    같은 이름의 Interface를 여러번 선언하면 자동으로 병합된다. 반면 타입 별칭은 재선언이 불가하다.
  • 결합 가능성
    Interface는 extends 구문을 통해 확장이 가능하다.
  • 구현 가능성
    interface는 클래스나 객체의 구현을 위한 목적으로 사용될 수 있다. 반면 타입 별칭은 보다 일반적인 타입 정의를 위해 사용된다.
  • 유니온 타입과 인터섹션 타입
    interface는 인터섹션 타입 &의 사용이 가능하다. 타입 별칭은 유니온 타입|과 인터섹션 타입& 모두 사용이 가능하다.

내용만 정리해 둔 메모장이라 프로젝트에서 실사용하며 수정될 가능성 있음.


📌 출처

profile
frontend developer 📚

0개의 댓글