#3 TypeScript 타입의 생성

타입 별칭(Type Alias), interface

type name = string;

const myName: name = "alice";

interface IName = string;

const myNameI: IName = "cinderella";

type과 interface를 통해서 타입에 별칭을 정의할 수 있다.

keyof, typeof

typeof 는 객체의 데이터를 타입으로 변환 해주는 연산자이다.

keyof는 객체 타입을 키 값들만 뽑아내는 연산자이다.

const Direction = {
    Up: 3,
    Down: 4,
    Left: 5,
    Right: 6
} as const

const Direction2= {
    Up: 3,
    Down: 4,
    Left: 5,
    Right: 6
}


type dir = typeof Direction
/*
type dir = {
    readonly Up: 3;
    readonly Down: 4;
    readonly Left: 5;
    readonly Right: 6;
}
*/

type dir2 = keyof dir // keyof typeof Direction
/*
type dir2 = "Up" | "Down" | "Left" | "Right";
*/

type dir3 = typeof Direction2
/*
type dir3 = {
    Up: number,
    Down: number,
    Left:  number,
    Right: number
}
*/

type dir4 = keyof dir3 // keyof typeof Direction2
/*
type dir4 = "Up" | "Down" | "Left" | "Right";
*/

readonly는 ts에서 추가된 것으로 속성에 대한 수식어(modifier)이다.

 

반대로 객체 타임들의 벨류들만 뽑아 내고 싶다면

type dirValue = typeof Direction[dir2] // tyeof Direction[keyof typeof Direction]
/*
type dirValue = 1 | 2 | 3 | 4;
*/

type dirValue2 = typeof Direction[dir4] // typeof Direction[keyof typeof Direction2]
/*
type dirValue2 = number;
*/

위와 같이 사용하면 된다.

 

Union, Intersection

union은 타입과 타입 사이에 "|"을 통해서 나타내며 첫 번째 타입 또는 두 번째 타입이면 된다.

result2와 result3의 기능을 모두 add가 담당하고 싶어 union을 사용했짐잔 result같은 경우를 고려하지 못하기 때문에 add는 타입이 잘못 선언되 함수이다.

이렇듯 add는 함수의 타입 선언 부터가 잘못 되었다고 할 수 있다.

 speak 함수는 union을 올바르게 사용한 예시이다.

function add(x: string | number, y: string | number): string | number { return x + y }

const result = add('1',2);
const result2 = add(1, 2);
const result3 = add('1','2');

function speak(text: string | number): void {
    console.log(text)
}

intersection은 타입과 타입 사이에 "&"를 통해서 나타내며 첫 번째 타임과 두 번째 타입을 모두 만족 해야 한다.

type Union = {first: 'heaven'} | {second: 'hell'};
type Inter = {first: 'heaven'} & {second: 'hell'};

const a1: Union = { first: 'heaven'}; // okay
const a2: Union = { second: 'hell'}; // okay
const a3: Union = { first: 'heaven', second: 'hell'}; //okay

const bb: Inter = { first: 'heaven', second: 'hell' }; // okay

 

타입 상속, 확장(Extends)

interface는 extends를 이용하여 타입 상속을 할 수 있다.

또한 같은 interface를 다시 정의 함으로써 필드를 추가 할 수 있다.

interface IAnimal {
    name: string;
}

interface IHumann extends IAnimal {
    think: true;
}

/*
interface IHuman {
    name: string;
    think: true;
}
*/

interface IAnimal {
    sex: boolean;
}

/*
inteface IAniaml {
    name: string;
    sex: boolean;
}
*/

 

반면에 type은 intersection을 사용하여 타입 확장을 할 수 있으며, type은 한번 생성한 뒤에는 변경이 불가능 하다.

type Animal = {
    name: string;
}

type Human = Animal & { think: true }

/*
typr Human = {
    name: string;
    think: true;
}
*/

 

declare

 

 

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-keyof-typeof-%EC%82%AC%EC%9A%A9%EB%B2%95


https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html