타입 조작이란먼저 타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 타입스크립트 기능입니다. 인덱스드 엑세스 타입인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입입니다. 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있기 때문에 세가지 예시를 순서대로 모두 살펴보겠습니다. 객체 프로퍼티의 타입 추출하기다음과 같은 게시글을 표현하는 객체 타입이 있다고 가정합니다. 그리고 게시글도 하나 변수로 만들어 주겠습니다.interface Post { title: string; content: string; author: { id: number; name: string..
TypeScript
Promise 사용하기Promise는 제네릭 클래스로 구현되어 있습니다. 따라서 새로운 Promise를 생성할 때 다음과 같이 타입 변수에 할당할 타입을 직접 설정해 주면 해당 타입이 바로 resolve 결과값의 타입이 됩니다.const promise = new Promise((resolve, reject) => { setTimeout(() => { // 결과값 : 20 resolve(20); }, 3000);});promise.then((response) => { // response는 number 타입 console.log(response);});promise.catch((error) => { if (typeof error === "string") { console.log(e..
제네릭 클래스제네릭의 마지막으로 제네릭 클래스에 대해 살펴보겠습니다.예시와 함께 살펴보기 위해 먼저 제네릭이 아닌 간단한 Number 타입의 리스트를 생성하는 클래스를 하나 만듭니다.class NumberList { constructor(private list: number[]) {} push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); }}const numberList = new NumberList([1, 2, 3]);list 필드를 private(접근 제어자)으로 설정해 클래스 내부에서만 접근할 수 있도록 만들고, 생성자에서 필..
제네릭 인터페이스제네릭은 인터페이스에도 적용할 수 있습니다. 다음과 같이 인터페이스에 타입 변수를 선언해 사용하면 됩니다.interface KeyPair { key: K; value: V;}키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의했습니다.다음과 같이 변수의 타입으로 정의하여 사용할 수 있습니다.let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};변수 keyPair의 타입으로 KeyPair를 정의했습니다. 그 결과 K에는 string, V에는 number 타입이 각각 할당되어 key 프로퍼티는 string 타입이고 value 프로퍼티는 number 타입인..
Map 메서드 타입 정의하기자바스크립트의 배열 메서드 Map은 다음과 같이 원본 배열의 각 요소에 콜백함수를 수행하고 반환된 값들을 모아 새로운 배열로 만들어 반환합니다.const arr = [1, 2, 3];const newArr = arr.map((it) => it * 2);// [2, 4, 6] map 메서드를 직접 함수로 만들고 타입도 정의하겠습니다. 먼저 제네릭 함수가 아닌 일반적인 함수로 만듭니다.function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {}메서드를 적용할 배열을 매개변수 arr로 받고, 콜백 함수를 매개변수 callback으로 받습니다.map 메서드는 모든 타입의 배열에 적용할 수 있기 때문에 ..
타입 변수 응용하기사례 1만약 2개의 타입 변수가 필요한 상황이라면 다음과 같이 T, U 처럼 2개의 타입 변수를 사용해도 됩니다.function swap(a: T, b: U) { return [b, a];}const [a, b] = swap("1", 2); 위 코드에서 T는 String 타입으로 U는 Number 타입으로 추론됩니다. 사례 2다양한 배열 타입을 인수로 받는 제네릭 함수를 만들어야 한다면 다음과 같이 할 수 있습니다.function returnFirstValue(data: T[]) { return data[0];}let num = returnFirstValue([0, 1, 2]);// numberlet str = returnFirstValue([1, "hello", "mynameis"..
제네릭이란제네릭이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 타입스크립트의 놀라운 기능 중 하나 입니다.제네릭이 필요한 상황다음과 같이 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 필요하다고 가정하겠습니다.function func(value: any) { return value;}let num = func(10);// any 타입let str = func("string");// any 타입 다양한 타입의 매개변수를 제공받아야 하기 때문에 매개변수 value의 타입을 일단 any 타입으로 해 두었습니다. 물론 unknown으로 정의해도 괜찮습니다.이 함수는 인수로 전달한 값을 그냥 그대로 반환하는 단순한 함수입니다. 따라서 변수..
인터페이스를 구현하는 클래스타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있습니다.쉽게말해 다음과 같이 인터페이스를 이용해 클래스에 어떤 필드들이 존재하고, 어떤 메서드가 존재하는지 정의할 수 있습니다./** * 인터페이스와 클래스 */interface CharacterInterface { name: string; moveSpeed: number; move(): void;}class Character implements CharacterInterface { constructor( public name: string, public moveSpeed: number, private extra: string ) {} move(): void { console.log(`$..
