🤷‍♀️ 개념공부: 3. Typescript가 뭘까? (2) ( interface, type alias, enum, Generic, Utility Types(Pick, Omit, Exclude)...)

Ko Seoyoung·2021년 3월 9일

🤷‍♀️ CS 개념공부

목록 보기

7/10

Type interface

타입스크립트에서 인터페이스는 타입 이름 지정에 역할을 부여하고, 코드 안이나 밖에서 계약을 정의하는 강력한 방법이다.

공식문서의 예제를 통해 인터페이스의 역할을 확인할 수 있다.

SquareConfig에 정의되지 않는 clor 속성을 사용하면 에러를 발생시킨다.
?이 붙은경우 optional properties로 필수적으로 넘겨주지 않아도 되는 속성을 말한다.

readonly 속성?

변수(variables)가 변하지 않는(재할당 불가능) 상수면 const 사용하는 것처럼 readonly는 변하지 않고 오직 읽기만 가능한 속성(properties)이다

Function Types

이렇게 함수 인터페이스 지정가능(인자명은 같지 않아도 됨)

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

let mySearch: SearchFunc;

mySearch = function (source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
};

Class Type도 지정 가능

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}

Extends로 인터페이스 확장 가능

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

interface Square extends Shape, PenStroke {
  sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

Type alias

alias는 가명이라는 뜻, 즉 type alias는 타입에 또 다른 이름을 부여하는 것이다.

interface와 비슷하지만 primitives, unions, tuples, 다른 타입들도 이름을 지을 수 있다(union: number|string 같은거)

aliasing한다는 것을 사실상 새로운 타입을 만드는 것이 아니라 존재하는 해당 타입에 새로운 이름을 짓는것이다.

interface처럼 제너릭하게 만들 수 있다: 다음과 같이 T라는 type 파라미터를 추가할 수 있음

type Container<T> = { value: T };

type Tree<T> = {
  value: T;
  left?: Tree<T>;
  right?: Tree<T>;
};

interface vs type?

참고링크

아니 두개 똑같은거 아니냐 → 미묘한 차이가 있지만 대부분의 상황에서 거의 비슷하므로 그냥 쓰고 싶은거 쓰면된다고 한다(https://microsoft.github.io/TypeScript-New-Handbook/everything/#interface-vs-alias)

위 블로그에 따르면 보통 interface는 공용 api 작성에 자주 사용된다고 한다. (우리 회사에서도 디비 모델과 관련된 공용 Object 타입을 인터페이스로 지정하고 있다. (User, Item, Post 등))

👉 interface는 확장 가능(속성추가 가능), type은 중복되는 타입 선언 불가능

Enums

열거형은 관련 값 모음을 구성하는 방법이다. c, java와 같은 많은 프로그래밍 언어들은 enum을 데이터 타입으로 포함하고 있지만 자바스크립트는 그렇지 않다. 대신, 타입스크립스를 통해 열거형을 선언할 수있다.

enum CardSuit {
    Clubs,
    Diamonds,
    Hearts,
    Spades,
}

// Sample usage
var card = CardSuit.Clubs

// Safety
card = 'not a member of card suit' // Error : `CardSuit`이 열거형이기 때문에 문자열을 할당할 수 없습니다

열거형이 존재하는 이유는 더 직관적인 이름으로 데이터를 구분하기 위해서이다

타입스크립트 열거형은 숫자가 기본이고 0부터 시작한다

enum Color {
    Red, // 0
    Green, // 1
    Blue, // 2
}
var col = Color.Red
col = 0 // Effectively same as Color.Red

Generics

Generic의 주된 동기: 멤버 간에 의미 있는 타입 제약을 두기 위해서

타입 제약을 둘 수 있는 멤버:

Class 인스턴스 멤버
Class 메소드
함수 인자
함수 리턴 값

제너릭 ex)

다음은 그냥 갑자기 생각난 함수로, 입력된 배열의 길이의 2배의 수를 반환하는 함수이다.

아래와 같이 제너릭을 사용하지 않으면 타입이 다른 경우 중복된 로직을 갖는 함수를 여러번 선언해야한다. 하지만 제너릭을 사용함으로써 로직을 재사용할 수 있다. (타입을 인자로 넘기는 개념으로 이해할 수도 있을 듯 싶다.)

function doubledLengthOfNumberArray(arg: number[]): number {
  return arg.length * 2;
}

function doubledLengthOfStringArray(arg: string[]): number {
  return arg.length * 2;
}

// --> 제너릭 사용
function doubledLengthOfArray<T>(arg: T[]): number {
  return arg.length * 2;
}

const result1 = doubledLength<string>(["a","b","c"]); // 6
const result2 = doubledLength<string>([1,3,5,7,9]) // 10