TypeScript Advanced Type

타입스크립트 고급 타입

1. 리터럴 타입

let age:number = 1;
age = 5; // OK

// -----

let age:3 = 3;
age = 5; // Error!

1. as const

const numbers = [1,2,3] // number[]
const numbers = [1,2,3] as const // [1,2,3]

if (numbers2.includes(4)) console.log("number 4 in numbers2");
//'4' 형식의 인수는 '1 | 2 | 3' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)

const obj = {x:1, y:2} // {x:number, y:number}
const obj = {x:1, y:2} as const // {x:1, y:2}

1. Union

let age: string | number = 1;
age = "1";

1. Generic

• 타입을 인자처럼 사용하기
• 문제 상황
데이터를 받아와 로깅을 해주고 return 해주는 함수가 있다고 해보자.
다양한 타입의 변수가 인자로 들어올 때 과연 any로 타이핑 해주는게 옳은 것일까?

function loggingAndReturn(data: any): any {
  console.log(data);
  return data;
}

loggingAndReturn([1]);
loggingAndReturn(1);
loggingAndReturn("1");

• 해결 방안
이렇게 함수호출할 때 인자의 타이핑을 넘기는 제네릭 방식을 사용하면 된다.

function loggingAndReturn<T>(data: T): T {
  console.log(data);
  return data;
}

loggingAndReturn<number[]>([1]);
loggingAndReturn<number>(1);
loggingAndReturn<string>("1");

1. keyof

type People = {name: string, age:number, gender:"male" | "female", hobby:string};

type KeyOfPeople = keyof People; // name | age | gender | hobby

1. typeof

const yeonuk = {
	name:"yeonuk",
	age:1,
	gender:"male",
	hobby:"climbing"
};

type People = typeof yeonuk;
/* 
	{
	  name: string;
	  age: number;
	  gender: string;
	  hobby: string;
	}
*/


// 결합
type KeyOfPeople = keyof typeof yeonuk;

1. narrowing

function toUpper(arg:string | number){
	arg.toUpperCase() // Error!
	/*
		Property 'toUpperCase' does not exist on type 'string | number'.
	  Property 'toUpperCase' does not exist on type 'number'.
	*/
}

// narrowing

function toUpper(arg:string | number){
	if(typeof arg === "string"){
		arg.toUpperCase() // OK!
	}
}

타입스크립트는 왜 쓰는 것일까?