제네릭이란 타입스크립트에서 제네릭이란 함수나 인터페이스, 타입 별칭, 클레스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능을 말합니다. 제네릭(Generic)이란 일반적인 또는 포괄적인 이라는 뜻을 가지고 있습니다. 제네릭과 의미가 비슷한 단어는 제네럴(General)입니다. 제네럴은 영어권에서 종합병원을 이야기 할 때 사용되는 단어로, 두루두루 다 적용할 수 있는 포괄적인 뜻으로 생각할 수 있습니다. 제네릭이 필요한 상황 function example(value:any){ return value }; let numberValue = example(123); // any 타입 let stringValue = example('Korea'); // any 타입 example함수는 인수로 전달한 값을 ..
컴파일러 옵션이란 타입스크립트의 컴파일은 작성한 타입스크립트 코드에 타입 오류가 없는지를 검사하고 오류가 없다면 자바스크립트 코드로 변환합니다. 이러한 컴파일 과정에서 아주 세부적인 사항들(얼마나 엄격하게 타입을 검사할 건지 또는 컴파일 되는 자바스크립트 코드의 버전은 어떻게 할 건지 등)을 컴파일 옵션이라고 합니다. 컴파일러 옵션 자동 생성 타입스크립트의 컴파일러 옵션은 tsconfig.json 파일에서 설정할 수 있으며, Node.js 패키지 단위로 설정됩니다. 컴파일러 옵션을 가장 쉽게 설정하는 방법은 자동 생성 도구를 이용하는 방법입니다. tsc를 이용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있습니다. tsc --init 터미널에서 위 명령어를 입력하면 자동으로 기본 설정이 ..
문제 T에서 U에 할당할 수 있는 타입을 제외하는 내장 제네릭 Exclude를 이를 사용하지 않고 구현하세요. 예시 type Result = MyExclude // 'b' | 'c' 🔥 도전하기 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 풀이 해당 문제를 풀기 위해서는 분산 조건부 타입에 대해서 알아야 한다. T 가 유니온일 때 T extends U 와 같은 구조를 사용하면, TypeScript는 유니온 T 를 순회하면..
문제 배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요. 예시 type tesla = ['tesla', 'model 3', 'model X', 'model Y'] type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] type teslaLength = Length // expected 4 type spaceXLength = Length // expected 5 🔥 도전하기 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaSc..
문제 배열(듀플) T를 받아 첫 원소의 타입을 반환하는 제네릭 First를 구현하세요. 예시 type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type head1 = First // expected to be 'a' type head2 = First // expected to be 3 🔥 도전하기 TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 풀이 해당 문제는 인덱스 접근 연산자를 사..
중복을 피하기위해 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법(자바스크립트의 map()함수를 적용한 것과 같은 효과) // 기존 타입 { name: string; email: string; } // 새로운 타입 { name: number; email: number; } 🖐🏻 문법 type Name = 'Kim' | 'Park' | 'Shin'; 위와 같이 김, 박, 신을 유니온 타입으로 묶어주는 Name이라는 타입이 있습니다. 여기서 각 이름에 몸무게까지 붙인 객체를 만들고 싶다면 아래와 같이 변환할 수 있습니다. type PersonProfiles = { [T in Name] : number}; const personInfo1: PersonProfiles = { Kim: 55, Par..
문제 배열(튜플)을 받아, 각 원소의 값을 key/value로 갖는 오브젝트 타입을 반환하는 타입을 구현하세요. 예시 const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const type result = TupleToObject // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'} 풀이 배열에 있는 모든 값들을 얻어 새 객체의 키와 값으로 만들어야합니다. T[number](인덱스 타입)을 이용해서 기존의 원소를 키와 값으로 하는 새로운 타입을 만들 수 있습니다. type TupleToObject = {[K in T[number]] ..
해당 값의 속성을 읽기 전용으로 설정해주는 타입시스템 기능입니다. 함수가 매개변수로 받는 값을 변경 없이 그대로 사용해야할 때 적합합니다. 외부에서 호출이 가능하지만 값의 변경은 불가능하므로, 값을 변경하기 위해서는 값을 초기화해줘야 합니다. interface Todo{ readonly title: string; body: string; } const todo: Todo = { title: "중요한 일정", body: "병원가기" } todo.title = "오늘 안에 해야할 일"; todo.body = "옷정리"; // Cannot assign to 'title' because it is a read-only property. Readonly Readonly은 집합의 모든 프로퍼티 읽기 전용(reado..
문제 T의 모든 프로퍼티를 읽기 전용(재할당 불가)으로 바꾸는 내장 제네릭 Readonly를 사용하지 않고 구현하세요. 예시 interface Todo { title: string; description: string; } const todo: MyReadonly = { title: "Hey", description: "foobar" } todo.title = "Hello" // Error: cannot reassign a readonly property todo.description = "barFoo" // Error: cannot reassign a readonly property 풀이 type MyReadonly = { readonly [key in keyof T]: T[key] } Readonly..
TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇가지 유틸리티 타입을 제공합니다. 이러한 유틸리티는 전역으로 사용할 수 있습니다. 유틸리티 타입은 제네릭 타입이라고도 불리며, 타입 정의를 더욱 짧고 간단하게 사용할 수 있습니다. Partial Partial Type은 집합의 모든 프로퍼티를 선택적으로 타입을 생성할 수 있습니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다.(부분집합) 예시 interface User { email: string; password: number; } type Person = Partial; const me: MyInfo = {}; // 가능 const you: YouInfo = { email: "abcd@gmail.com" ..
