TypeScript 2

Dongwoo Joo·2023년 5월 31일
0

codestates bootcamp

목록 보기
41/48

학습 내용

Enum

enum = enumerate = 열거하다. 늘어놓다.
열거형(Enum)은 특정 값의 집합을 정의할 때 사용한다.

숫자 열거형(Numeric enums)

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

코드에서 Up = 1 로 초기화된 숫자 열거형을 선언한다.
Up 밑의 값들은 자동으로 증가된 값을 갖는다.
Direction.Up 은 1, Down 은 2, Left 는 3, Right 은 4를 값으로 갖는다.
만약 Up을 특정 숫자로 초기화하지 않으면, Up은 0이 된다.

문자 열거형(String enums)

문자열 열거형에서 각 멤버들은 문자열 리터럴 또는 다른 문자열 열거형의 멤버로 상수 초기화 해야 한다.

역 매핑(Reverse mappings)

역 매핑은 숫자형 열거형에만 존재하는 특징이다.
열거형의
키(key)로 값(value)을 얻을 수 있고,
값(value)으로 키(key)를 얻을 수도 있습니다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

역 매핑은 숫자형 열거형에만 존재하며, 문자형 열거형에서는 존재하지 않는 특징이다.

interface

사용

일반적으로 타입 체크를 위해 사용된다.
interface는 객체(Object)의 구조를 정의하기 위해 주로 사용되는 예약어이다.

특징

interface를 사용하여 변수 선언 시, 반드시 정의된 프로퍼티를 전부 작성해야 한다.
interface를 사용하여 변수 선언 시, 정의된 속성만 지정할 수 있다.
interface 내에 정의되어 있지 않은 프로퍼티를 더 작성해서 변수 선언할 수 없다.

extends

자바스크립트 Class를 확장할 때, extends 키워드를 사용해서,
기존 클래스를 상속받아 새로운 클래스를 정의할 수 있다.

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = age;
    }
  }
  
class Mammal extends Animal {
  constructor(name, species, born) {
    super(name, age);
    this.born = born;
  }

interface Animal {
    name: string;
    species: string;
    }
    
interface Dog extends Animal {
    averageAge: number;
    }
    
const newDog: Dog = {
    averageAge: 12,
    born: 15000, //tmi.개의 조상인 회색늑대가 1만 5천년 전에 나타났다고 함.
    name: "dog",
    species: "mammal"
    }

인터페이스 extends 사용 => 기존 인터페이스를 상속받아 확장이 가능하다.
기존 인터페이스의 프로퍼티를 다른 인터페이스에 복사 가능.

  • 효과
    재사용성: 인터페이스의 재사용성을 높일 수 있다.
    확장성: (여러)인터페이스를 상속받아 확장할 수도 있다.

Type Aliases

타입을 만들고, 이름을 붙여주는 것이다.
그 이름을 변수의 타입으로 재사용할 수 있다.
type 키워드로 작성한다.

Type Aliases, interface

인터페이스나 타입 별칭으로 만들어진 타입을 참조할 때,
인터페이스와 마찬가지로 내부에 정의된 프로퍼티를 전부 참조해야 한다.
타입 내부에 정의된 프로퍼티 외에 다른 프로퍼티를 더 작성하면 컴파일 에러가 발생한다.

type Person = {
  id: number;
  name: string;
  email: string;
}

interface Person {
  id: number;
  content: string;
  email: string;
}

처음 볼때, 뭐하러 type, interface를 따로 만들어 놓았지라는 생각이 들었다.
두 기능의 차이가 있었다.

  • 확장성
    타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것에서 그치기 때문에 확장이 되지 않는다.
    interface는 확장이 가능하다.
    interface는 기존의 interface 및 타입 별칭으로 만들어진 타입 둘 다 상속할 수 있기 때문에, 유연한 코드 작성을 위해서는 interface를 만들어서 필요할 때마다 확장할 수 있습니다.

어떤 프로덕트를 만드느냐. 만들고자 하는 코드가 유연해야 하는지, 아니면 고정되어야 하는지를 코드를 설계할 때 판단해서 이 기능 중 하나를 적용할 수 있겠다(나의 생각).

*기능의 차이라고 보기에는 애매하지만, VSCode에서 사용할 때 차이가 있다.
VSCode로 작성 시,
타입 별칭으로 작성한 객체에 마우스 커서를 올리면 내부 프로퍼티들이 어떻게 정의되어 있는지 보인다.
하지만 interface로 작성한 객체에 마우스 커서를 올리면 내부 프로퍼티들이 어떻게 정의되어 있는지 보이지 않는다.

Type Inference(타입 추론)

TypeScript가 코드를 해석해 나가는 동작을 의미.

타입 추론은 변수나 함수의 타입을 선언하지 않아도,
TypeScript가 자동으로 유추하는 기능이다.

profile
pursue nature

0개의 댓글