타입스크립트 설정1. 타입스크립트 설치1-1) 기존 리액트 프로젝트에 타입스크립트 설치기존 리액트 프로젝트에 타입스크립트를 추가하려면 아래 명령어를 사용하여 필요한 패키지를 설치합니다.npm i @types/node @types/react @types/react-dom @types/jest1-2. 타입스크립트 프로젝트 생성리액트와 타입스크립트를 사용하는 새로운 프로젝트를 생성하려면 create-react-app을 사용할 수 있습니다.이 명령은 기본적으로 리액트와 타입스크립트가 설정된 프로젝트를 생성합니다.npx create-react-app 프로젝트명 --template typescript2. TypeScript 설정 파일 생성기존 리액트 프로젝트에 타입스크립트를 추가한 경우 프로젝트 루트에 tsconf..
TypeScript
ExcludeExclude 타입은 다음과 같이 T로부터 U를 제거하는 타입입니다.type A = Exclude;// boolean 직접 구현 하면 다음과 같습니다.type Exlcude = T extends U ? never : T; ExtractExtract 타입은 다음과 같이 T로 부터 U를 추출하는 타입입니다type B = Extract;// boolean 직접 구현하면 다음과 같습니다.type Extract = T extends U ? T : never; ReturnTypeReturnType은 타입변수 T에 할당된 함수 타입의 반환값 타입을 추출하는 타입입니다. type ReturnType any> = T extends ( ...agrs: any) => infer R ? R : never;f..
유틸리티 타입이란유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들입니다. 우리가 지금까지 배웠던 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것을 의미합니다. 예를 들어 다음과 같이 Readonly와 같은 유틸리티 타입을 이용해 특정 객체 타입의 모든 프로퍼티를 읽기 전용 프로퍼티로 변환할 수 있습니다.interface Person { name : string; age : number;}const person : Readonly ={ name : "홍길동", age : 29}person.name = ''// ❌ name은 Readonly 프로퍼티입니다. 또는 다음과 같이 Partial 유틸리티 타입을 이용해 특정..
inferinfer는 조건부 타입 내에서 특정 타입을 추론하는 문법입니다.infer는 다음과 같이 특정 함수 타입에서 반환값의 타입만 추출하는 특수한 조건부 타입인 ReturnType을 만들 때 이용할 수 있습니다.type ReturnType = T extends () => infer R ? R : never;type FuncA = () => string;type FuncB = () => number;type A = ReturnType;// stringtype B = ReturnType;// number 조건식 T extends () => infer R에서 infer R은 이 조건식을 참이 되도록 만들 수 있는 최적의 R 타입을 추론하라는 의미입니다.따라서 A 타입을 계산할 때의 위 코드의 흐름은 다음과..
분산적인 조건부 타입type StringNumberSwitch = T extends number ? string : number;let a: StringNumberSwitch;let b: StringNumberSwitch; 변수 a의 타입은 조건식이 참이되어 string으로 정의되고 변수 b의 타입은 조건식이 거짓이 되어 number 타입으로 정의됩니다. 이번에는 타입 변수에 Union 타입을 할당해 보겠습니다.type StringNumberSwitch = T extends number ? string : number;(...)let c: StringNumberSwitch;// string | number조건부 타입 문법에 따라 변수 c의 타입은 number | string은 number의 서브타입이 아..
조건부 타입조건부 타입은 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법입니다.type A = number extends string ? number : string;조건부 타입은 위 코드 처럼 number extends string ? 과 같은 조건식이 있고 이 조건이 참이라면 ? 우측의 타입인 Number 타입이 결과가 되고 아니라면 : 우측의 타입인 String 타입이 결과가 됩니다.위 조건부 타입의 조건식 number extends string은 number 타입이 string 타입의 서브타입이 아니기 때문에 거짓이 되고 그 결과 타입 A는 string 타입이 됩니다.type ObjA = { a: number;};type ObjB = { a: numbe..
맵드 타입맵드 타입은 기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 마법같은 타입 조작 기능입니다.예제와 함께 살펴보겠습니다. 이번에는 유저 정보를 관리하는 간단한 프로그램의 일부분을 만든다고 가정합니다. 먼저 유저 객체 타입을 정의합니다.interface User { id: number; name: string; age: number;} 다음으로는 유저 정보가 서버에 저장되어 있다고 가정하고, 한명의 유저 정보를 불러오는 기능을 함수로 만듭니다.interface User { id: number; name: string; age: number;}function fetchUser(): User { return { id: 1, name: "이정환", age: 27, }..
Keyof 연산자keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자입니다.interface Person { name: string; age: number;}function getPropertyKey(person: Person, key: "name" | "age") { return person[key];}const person: Person = { name: "이정환", age: 27,};Person 객체 타입을 정의하고 해당 타입을 갖는 변수를 하나 선언합니다.그리고 getPropertyKey 함수를 만듭니다. 이 함수는 두개의 매개변수가 있으며 두번째 매개변수 key에 해당하는 프로퍼티의 값을 첫번째 매개변수 perso..
