1. Distributive Conditional Types #Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. Checked Typetype A = string extends T ? "yes" : "no"type B = { x: T } extends { x: number } ? "yes" : "no"type C = T extends U ? "yes" : "no"제네릭 타입에서 ..
1. 함수 오버로딩(Overloading) Typescript에서는 다른 parameter, 다른 타입 등을 가진 동일한 이름의 함수를 정의할 수 있음. export function add(a:string, b:string):string; export function add(a:number, b:number): number; export function add(a: any, b:any): any { return a + b; } add() 함수는 string 또는 number인 두 인자 a, b를 받고 다른 타입을 반환함. 함수 구현 부분에서 각 인자 a, b는 any 타입을 지정해주는데 일반적인 any가 아니라 string | number 타입의 값만 받을 수 있음. 한편, 이렇게 만든 함수를 다른 파일..
Typescript에서 유니언 타입을 사용할 경우 특정 타입에 따라 사용할 수 있는 메서드, 속성이 다르기 때문에 오류가 발생할 확률이 높음. 그렇기 때문에 해당 값의 타입을 사전에 검사해줘야 하는데, 타입 검사를 통해 오류가 발생할 수 있는 코드 실행을 막아준다는 의미로 이것을 타입 가드(Type Guards)라고 함. 1. in, typeof, instanceof보통 if, switch 문에서 in, typeof, instanceof 등의 연산자를 사용하는 방식으로 타입을 검사할 수 있는데, null의 type은 object이기 때문에 Javascript 내장 기능만으로는 한계가 있음.① in: 해당 객체에 특정 속성이 존재하는지 확인 #"prop1" in obj // 객체 obj에 prop1 속..
arr.reduce((accu, next, i) => { if (i accu.includes(taskId)); }, []); 배열 arr에 대해 reduce() 메서드를 적용했을 때 'string' 형식의 인수는 'never' 형식의 매개변수에 할당될 수 없습니다.라는 오류가 뜸. 빈 배열은 기본적으로 never[] 타입으로 선언되기 때문에 이런 오류가 뜨는 것. 보통 strictNullChecks 옵션은 noImplicitAny 옵션과 함께 쓰이는데 빈 배열의 기본 타입을 any[]로 정의하면 noImplicitAny 옵션과 충..
Javascript에 존재하는 기본 타입들은 타입을 정의하는 게 기반이 되지만 모든 복잡한 상황에 대해서는 제대로 대응하지 못함. Typescript는 그러한 상황에 맞는 다양한 타입들을 추가적으로 제공하고 있음. 1. 유니언 타입(Union Type) 둘 이상의 타입에 대해 그 중 하나를 타입으로 가질 수 있는 새로운 타입을 정의하는 방법으로, OR 기호 "|"를 이용해 타입을 조합해줄 수 있음. 조합에 사용된 각각의 타입을 유니언 타입의 멤버라고 부름. 예를 들어, 문자열 또는 숫자를 argument로 받을 수 있는 함수는 다음과 같이 타입을 정의해줄 수 있음. function printId(id: number | string) { console.log("Your ID is: " + id); } 한편..
1. 제네릭 인터페이스 어떠한 객체의 속성으로 어떠한 것이든 가능할 때, 그렇다고 해서 any 타입을 쓰는 것은 바람직하지 않음. interface Box { contents: any; } 해당 속성으로 들어온 타입을 기록하는 unknown 타입을 쓴다고 해도 각각의 타입마다 타입 체크를 해줘야 하기 때문에 문제는 달라지지 않음. 이때, 제네릭 인터페이스를 쓰면 다양한 타입의 인터페이스를 하나로 표현해줄 수 있음.(타입 템플릿의 역할) // 제네릭 인터페이스를 쓰지 않았을 경우 interface NumberBox { contents: number; } interface StringBox { contents: string; } interface BooleanBox { contents: boolean; } ..
1. target is possibly null이벤트 핸들러의 EventTarget인 event는 EventTarget | null 형식을 가진다. 따라서, 아무런 타입 가드 없이 event.target.value, event.target.result 등에 접근하려 할 경우 "target is possibly null"이라는 경고가 뜨게 된다.(e) => { if (!e.target) return; // 타입 가드를 설정해줌 console.log(e.target.value);}2. Property _______ does not exist on type EventTargetconst handleClick = (e: EventTarget) => { if (!e.target) ret..
1. Record # Record 속성이 K 타입, 속성값이 T 타입인 타입을 생성하는 유틸리티 타입으로, 일반적인 객체는 속성이 문자열이고, 속성값은 어떠한 값도 가능하므로 위와 같이 임의의 객체 타입을 설정해줄 수 있음. 2. Pick # 특정 타입에서 지정한 Key(문자열 또는 문자열 유니언 타입)에 해당하는 타입만 선택해 새로운 타입을 만드는 타입 함수. extends와 대치되는 개념이라고 생각하면 됨. 이때, 타입 K가 "A" | "B"인 유니언 타입일 때, 타입 T는 "A", "B" 모든 속성을 가지고 있어야 함에 주의! export interface TaskDB { id: string; title: string; dueDate: string; isCompleted: boolean; tags:..
1. State, Props에 타입 지정하기 A. 일반적인 타입 지정 State, Props 모두 타입 지정이 가능한 변수이고, 컴포넌트(함수)에 전달될 수 있으므로 타입 지정을 해줘야 함. React에서 Props는 보통 구조분해할당 문법을 이용하기 때문에 일반 객체처럼 타입을 지정하지 않도록 주의! // 잘못된 표기 function App ({ title: string, id: string }) { // ... } // 올바른 표기 1 function App ({ title, id }: { title: string, id: string }) { // ... } // 올바른 표기 2 interface Task { title: string, id: string } function App ({ title,..
1. React + Typescript 시작하기 A. 세팅하기 1. 기존 프로젝트 폴더에 Typescript 설치하기 npm install -g typescript 2. 기존 React 프레임워크에 Typescript 의존성 추가 npm i typescript @types/node @types/react @types/react-dom @types/jest --dev 3. Typescript 컴파일러 초기화 tsc --init 이 명령어를 실행하면 프로젝트 메인 폴더에 tsconfig.json 파일이 생성되는데, Typescript 컴파일러 옵션을 설정해줄 수 있음. 4. Javascript 파일 Typescript 파일로 바꿔주기 기존에 작성했던 App.js와 같은 Javascript 파일을 Typesc..
TypeScript 2024. 4. 22. 20:32
1. Distributive Conditional Types #Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. Checked Typetype A = string extends T ? "yes" : "no"type B = { x: T } extends { x: number } ? "yes" : "no"type C = T extends U ? "yes" : "no"제네릭 타입에서 ..
TypeScript 2022. 9. 24. 19:31
1. 함수 오버로딩(Overloading) Typescript에서는 다른 parameter, 다른 타입 등을 가진 동일한 이름의 함수를 정의할 수 있음. export function add(a:string, b:string):string; export function add(a:number, b:number): number; export function add(a: any, b:any): any { return a + b; } add() 함수는 string 또는 number인 두 인자 a, b를 받고 다른 타입을 반환함. 함수 구현 부분에서 각 인자 a, b는 any 타입을 지정해주는데 일반적인 any가 아니라 string | number 타입의 값만 받을 수 있음. 한편, 이렇게 만든 함수를 다른 파일..
TypeScript 2022. 8. 31. 14:31
Typescript에서 유니언 타입을 사용할 경우 특정 타입에 따라 사용할 수 있는 메서드, 속성이 다르기 때문에 오류가 발생할 확률이 높음. 그렇기 때문에 해당 값의 타입을 사전에 검사해줘야 하는데, 타입 검사를 통해 오류가 발생할 수 있는 코드 실행을 막아준다는 의미로 이것을 타입 가드(Type Guards)라고 함. 1. in, typeof, instanceof보통 if, switch 문에서 in, typeof, instanceof 등의 연산자를 사용하는 방식으로 타입을 검사할 수 있는데, null의 type은 object이기 때문에 Javascript 내장 기능만으로는 한계가 있음.① in: 해당 객체에 특정 속성이 존재하는지 확인 #"prop1" in obj // 객체 obj에 prop1 속..
TypeScript 2022. 7. 8. 19:52
arr.reduce((accu, next, i) => { if (i accu.includes(taskId)); }, []); 배열 arr에 대해 reduce() 메서드를 적용했을 때 'string' 형식의 인수는 'never' 형식의 매개변수에 할당될 수 없습니다.라는 오류가 뜸. 빈 배열은 기본적으로 never[] 타입으로 선언되기 때문에 이런 오류가 뜨는 것. 보통 strictNullChecks 옵션은 noImplicitAny 옵션과 함께 쓰이는데 빈 배열의 기본 타입을 any[]로 정의하면 noImplicitAny 옵션과 충..
TypeScript 2022. 7. 8. 17:34
Javascript에 존재하는 기본 타입들은 타입을 정의하는 게 기반이 되지만 모든 복잡한 상황에 대해서는 제대로 대응하지 못함. Typescript는 그러한 상황에 맞는 다양한 타입들을 추가적으로 제공하고 있음. 1. 유니언 타입(Union Type) 둘 이상의 타입에 대해 그 중 하나를 타입으로 가질 수 있는 새로운 타입을 정의하는 방법으로, OR 기호 "|"를 이용해 타입을 조합해줄 수 있음. 조합에 사용된 각각의 타입을 유니언 타입의 멤버라고 부름. 예를 들어, 문자열 또는 숫자를 argument로 받을 수 있는 함수는 다음과 같이 타입을 정의해줄 수 있음. function printId(id: number | string) { console.log("Your ID is: " + id); } 한편..
TypeScript 2022. 7. 6. 21:52
1. 제네릭 인터페이스 어떠한 객체의 속성으로 어떠한 것이든 가능할 때, 그렇다고 해서 any 타입을 쓰는 것은 바람직하지 않음. interface Box { contents: any; } 해당 속성으로 들어온 타입을 기록하는 unknown 타입을 쓴다고 해도 각각의 타입마다 타입 체크를 해줘야 하기 때문에 문제는 달라지지 않음. 이때, 제네릭 인터페이스를 쓰면 다양한 타입의 인터페이스를 하나로 표현해줄 수 있음.(타입 템플릿의 역할) // 제네릭 인터페이스를 쓰지 않았을 경우 interface NumberBox { contents: number; } interface StringBox { contents: string; } interface BooleanBox { contents: boolean; } ..
TypeScript 2022. 7. 3. 19:06
1. target is possibly null이벤트 핸들러의 EventTarget인 event는 EventTarget | null 형식을 가진다. 따라서, 아무런 타입 가드 없이 event.target.value, event.target.result 등에 접근하려 할 경우 "target is possibly null"이라는 경고가 뜨게 된다.(e) => { if (!e.target) return; // 타입 가드를 설정해줌 console.log(e.target.value);}2. Property _______ does not exist on type EventTargetconst handleClick = (e: EventTarget) => { if (!e.target) ret..
TypeScript 2022. 6. 29. 21:12
1. Record # Record 속성이 K 타입, 속성값이 T 타입인 타입을 생성하는 유틸리티 타입으로, 일반적인 객체는 속성이 문자열이고, 속성값은 어떠한 값도 가능하므로 위와 같이 임의의 객체 타입을 설정해줄 수 있음. 2. Pick # 특정 타입에서 지정한 Key(문자열 또는 문자열 유니언 타입)에 해당하는 타입만 선택해 새로운 타입을 만드는 타입 함수. extends와 대치되는 개념이라고 생각하면 됨. 이때, 타입 K가 "A" | "B"인 유니언 타입일 때, 타입 T는 "A", "B" 모든 속성을 가지고 있어야 함에 주의! export interface TaskDB { id: string; title: string; dueDate: string; isCompleted: boolean; tags:..
TypeScript 2022. 6. 29. 15:41
1. State, Props에 타입 지정하기 A. 일반적인 타입 지정 State, Props 모두 타입 지정이 가능한 변수이고, 컴포넌트(함수)에 전달될 수 있으므로 타입 지정을 해줘야 함. React에서 Props는 보통 구조분해할당 문법을 이용하기 때문에 일반 객체처럼 타입을 지정하지 않도록 주의! // 잘못된 표기 function App ({ title: string, id: string }) { // ... } // 올바른 표기 1 function App ({ title, id }: { title: string, id: string }) { // ... } // 올바른 표기 2 interface Task { title: string, id: string } function App ({ title,..
TypeScript 2022. 6. 26. 17:13
1. React + Typescript 시작하기 A. 세팅하기 1. 기존 프로젝트 폴더에 Typescript 설치하기 npm install -g typescript 2. 기존 React 프레임워크에 Typescript 의존성 추가 npm i typescript @types/node @types/react @types/react-dom @types/jest --dev 3. Typescript 컴파일러 초기화 tsc --init 이 명령어를 실행하면 프로젝트 메인 폴더에 tsconfig.json 파일이 생성되는데, Typescript 컴파일러 옵션을 설정해줄 수 있음. 4. Javascript 파일 Typescript 파일로 바꿔주기 기존에 작성했던 App.js와 같은 Javascript 파일을 Typesc..