[TypeScript] 타입스크립트의 여러가지 타입

문자열 리터럴과 숫자 리터럴 타입

문자열 리터럴과 숫자 리터럴을 타입으로 정의할 수 있다.

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; //error : Type '15' is not assignable to type '10 | 20 | 30'.

let v2: 'A' | 'B';
v2 = 'C';//error : Type '"C"' is not assignable to type '"A" | "B"'.

열거형 타입

enum 키워드를 사용해 정의. 열거형 타입의 각 원소는 값 또는 타입으로 사용 가능

enum Fruit {
    Apple,
    Banana
}

const v1: Fruit = Fruit.Apple; // 값으로 사용
const v2: Fruit.Apple | Fruit.Banana = Fruit.Banana; //타입으로 사용

열거형 타입은 객체로 존재하며, 각 원소는 이름과 값이 양방향으로 매핑된다.

enum Fruit {
    Apple,
    Banana=5
}

//일반적인 객체처럼 다루기
console.log(Fruit.Banana); //5 
console.log(Fruit['Banana']); //5

// 값을 이용해 이름 가져오기
console.log(Fruit[5]); // Banana

단, 열거형 타입의 값으로 문자열을 할당하는 경우 단반향으로 매핑된다.
서로 다른 원소의 이름 또는 값이 같으면 충돌하기 때문!

상수 열거형 타입

열거형 타입(enum) 은 컴파일 후에도 남아 있기 때문에 번들 파일의 크기가 불필요하게 커질 수 있다. 열거형 타입의 객체에 접근하지 않는다면 컴파일 후에 객체로 남겨놓을 필요는 없다. 상수 열거형 타입을 사용해 컴파일 결과에 열거형 타입의 객체를 남겨 놓지 않을 수 있다.

//const keyword로 상수 열거형 타입 사용
const enum Fruit {
    Apple,
    Banana=5
}

const fruit: Fruit = Fruit.Apple;

//열거형 타입의 컴파일 결과
var Fruit;
(function (Fruit) {
    Fruit[Fruit["Apple"] = 0] = "Apple";
    Fruit[Fruit["Banana"] = 5] = "Banana";
})(Fruit || (Fruit = {}));
const fruit = Fruit.Apple;

//상수 열거형 타입의 컴파일 결과
const fruit = 0 /* Apple */;

함수 타입

함수 정의 시 콜론을 사용해 매개변수 타입과 반환 타입 정의가 필요하다.

function getInfoText(name:string, age?: number): string {
    return `name: ${name}, age: ${age}`;
}

선택 매개변수 : 매개변수 오른쪽에 물음표 기호를 삽입해 반드시 입력하지 않아도 되는 매개변수

• 인수의 존재 여부 검사가 필요할 수도 있음

function getInfoText(name:string, age?: number): string {
    return `name: ${name}, age: ${age.toFixed(0)}`; //age error : Object is possibly 'undefined'.
}

• 선택 매개변수 오른쪽에 필수 매개변수가 오면 컴파일 에러

• 함수 호출 시 인수를 입력하지 않았을 때를 위해 선택 매개변수의 기본값을 정의할 수 있다.

function getInfoText(name:string, age: number=15): string {
    return `name: ${name}, age: ${age}`;
}

console.log(getInfoText('Mike')); //"name: Mike, age: 15" 

• 나머지 매개변수

function getInfoText(name:string, ...rest: string[]): string {
    return `name: ${name}, rest: ${rest}`;
}

console.log(getInfoText('Mike',"1","2"));

함수 오버로드

자바스크립트는 동적 타입 언어로 함수명이 동일한 함수들이 여러개의 매개변수 타입과 반환 타입을 가질 수 있다.

//함수 선언
function add(x:number, y:number): number;
function add(x:string, y:string): string;

//함수 정의
function add(x:number | string, y: number | string): number | string {
    //...
}

//함수 호출
add(1,1);
add(1,'2'); //error

<참고>
실전 리액트 프로그래밍 개정판 by 이재승