[TS] 제네릭 함수 타입 정의 및 응용 연습
TIL
1. 조건을 만족하는 함수 func의 타입 정의func 함수- 매개변수를 그대로 반환- 매개변수 value에는 모든 타입의 값이 들어올 수 있음- 반환값의 타입은 매개변수로 전달된 값의 타입과 같음function func(value: any) { return value;}function func(value: T):T { return value;} 2. 조건을 만족하는 함수 getLastValue의 타입 정의getLastValue 함수- 매개변수로 배열을 받아 배열의 마지막 값을 반환- 매개변수 dat에는 빈 배열을 제외한 모든 배열이 들어올 수 있음- 반환값의 타입은 매개변수 data 배열의 마지막 요소의 타입이어야 함function getLastValue(data: any) { return dat..
[TS] 프로미스와 제네릭
TIL
프로미스의 타입 추론Promise 객체를 생성하고 3초 후 20을 반환하는 코드를 작성해보자.const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(20); }, 3000);});promise.then((response) => { console.log(response);}); Promise는 resolve로 전달하는 결과값의 타입을 자동으로 추론하지 못하고 unknown 타입으로 추론한다. resolve 타입 지정타입 변수에 타입을 지정하면 resolve 결과값의 타입이 정확히 추론된다. reject와 에러처리Promise의 catch 메서드에서 에러 매개변수는 항상 any 타입으로 추론된다. 그리고 타입 변수..
[TS] 제네릭 클래스
TIL
숫자 배열을 관리하는 NumberList 클래스를 만들어보자.class NumberList { constructor(private list: number[]) {} push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); }}list 필드는 private으로 설정하여 클래스 내부에서만 접근 가능하도록 했다.생성자에서 필드 선언과 초기화를 동시에 수행하며, push, pop, print 메서드로 배열을 조작한다. 만약 문자열 배열을 관리하는 StringList 클래스도 필요하다면 어떻게 해야 할까?제네릭 없이는 새로운 클래스를 만들어야..
[TS] 제네릭 인터페이스와 타입 별칭
TIL
제네릭 인터페이스제네릭은 인터페이스에도 적용할 수 있다. 인터페이스에 타입 변수를 선언하여 사용하면 된다.interface KeyPair { key: K; value: V;} 그리고, 변수의 타입으로 정의하여 사용할 수 있다.let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};이때 주의해야 할 점은, 제네릭 인터페이스는 제네릭 함수와 달리 변수의 타입으로 정의할 때 반드시 와 함께 타입 변수에 할당할 타입을 명시해야 한다는 것이다.제네릭 함수는 매개변수에 제공되는 값의 타입을 기준으로 타입 변수를 추론할 수 있지만, 인터페이스는 마땅히 추론할 수 있는 값이 없기 때문이..
[TS] map, forEach 메서드 타입 정의하기
TIL
map 메서드 타입 정의자바스크립트의 배열 메서드 map은 원본 배열의 각 요소에 콜백 함수를 수행하고, 반환된 값들을 모아 새로운 배열로 만들어 반환한다.const arr = [1, 2, 3];const newArr = arr.map((it) => it * 2); // [2, 4, 6]일반 함수로 구현먼저 제네릭 없이 일반 함수로 만들어보자.function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {}메서드를 적용할 배열을 매개변수 arr로 받고, 콜백 함수를 매개변수 callback으로 받는다.map 메서드는 모든 타입의 배열에 적용할 수 있기 때문에 arr의 타입은 unknown[]으로 정의한다.callback의 타입..
[TS] 제네릭 타입 변수 응용
TIL
제네릭 함수 활용 사례사례 1: 여러 개의 타입 변수두 값의 위치를 바꾸는 swap 함수를 만들어 보자.function swap(a: any, b: any) { return [b, a];}const [a, b] = swap(1, 2);any타입을 사용하면 타입 안정성이 보장되지 않는다. 2개의 타입 변수가 필요한 상황이라면 다음과 같이 T, U 처럼 여러 개의 타입 변수를 사용할 수 있다.function swap(a: T, b: U) { return [b, a];}const [a, b] = swap("1", 2);위 코드에서 T는 string 타입으로, U는 number 타입으로 추론된다.반환값은 [U, T] 즉, [number, string] 튜플 타입이 된다. 사례 2: 배열 요소 타입 추론배열의..
[TS] 제네릭
TIL
제네릭(Generic) 이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 타입스크립트의 기능이다.제네릭이 필요한 상황any 타입의 문제다음과 같이 매개변수 타입을 any로 정의하면 함수 호출 결과가 모두 any 타입으로 추론된다.function func(value: any) { return value;}let num = func(10);let str = func("string");num.toUpperCase(); // ❌ 런타임 오류 발생num에는 Number타입의 값 10이 저장되어 있다. 그러나 any 타입으로 추론되었기 때문에 toUpperCase같은 String타입 전용 메서드를 사용해도 타입스크립트가 오류를 감지하지 못한다.이 코드는 실제로 실행하면 런..