[TypeScript] 커스텀 타입, enum, keyof, typeof ~

타입 종류를 더 알아보다.

---

1. 커스텀 타입

type World = 'world'

타입을 'world'라고 사용자가 마음대로 정의할 수 있다. 이런 식으로 정의한 타입을 백틱(`)을 사용해서 대입할 수 있다.

 

type World = 'world' | 'hell'
type Greeting = `hello ${World}`
const c: Greeting = 'hello world' or 'hello hell' // 자동완성 됨

이런 식으로 자바스크립트에서 사용하던 문법이 적용된다. 자바스크립트 기반이니까.

 

2. enum

const enum EDirection {
    Up, // 0
    Down, // 1
    Left, // 2
    Right, // 3
  }

  const ODirection = {
    Up: 0,
    Down: 1,
    Left: 2,
    Right: 3,
  } as const;

 

 객체를 선언할 때 앞에 enum을 사용하면 가장 첫번째 key의 value가 0부터 그 다음 key의 value가 +1씩 증가한다.

가장 첫번째 value를 0이아닌 다른 수로 정의하면 첫번째 value를 기준으로 다음 value가 +1씩 증가하며 정해진다.

아니면 모두 다 다른 값으로 정의할 수도 있다.

as const 없을 때

as const 있을 때

타입을 number가 아니라 그 값이 타입이 되게끔 하고싶을 땐 as const를 쓰면 된다.

3. typeof 객체

typeof는 객체 데이터를 객체 타입을 변환해준다.

const obj = {
   red: 'apple',
   yellow: 'lemon',
   green: 'melon',
};

// 객체를 타입으로 변환
type Fruit = typeof obj;

/*
type Fruit = {
    red: string;
    yellow: string;
    green: string;
}
*/

obj 객체의 value 타입을 가져와서 객체 타입으로 만든다. Fruit를 객체타입으로 만들고 다른 객체에 이제 사용할 수 있게 된것이다.

 

4. keyof 객체타입

객체형태의 타입의 key를 타입으로 만든다.

type Type = {
   name: string;
   age: number;
   married: boolean;
}

type Union = keyof Type;
// type Union = name | age | married

const a:Union = 'name';
const b:Union = 'age';
const c:Union = 'married';

keyof는 객체형태의 타입의 key만 뽑아 유니온 타입으로 만들어준다.

근데 객체형태의 타입이 아니라 그냥 객체의 key를 타입으로 사용하고싶다면 keyof typeof를 사용하면된다.

 

5. keyof typeof 객체

const myObj = { a: 1, b: 'hello', c: true };

type MyObjKeys = keyof typeof myObj;
// MyObjKeys = 'a' | 'b' | 'c'

이렇게 되면 객체의 key를 type으로 사용할 수 있다. 그냥 typeof 뒤에 붙는 것들은 모두 객체라고 보면된다.

 

객체의 key가 아닌 value를 타입으로 사용하고싶다면

const obj = { red: 'apple', yellow: 'banana', green: 'cucumber' } as const;

type Key = typeof obj[keyof typeof obj]; // 객체의 value들만 가져와 상수 타입으로

let ob2: Key = 'apple';
let ob3: Key = 'banana';
let ob4: Key = 'cucumber';

이렇게 객체에 접근해서 value를 가져와서 사용하면 된다.