Jerry

npm에서 특정 라이브러리가 타입스크립트 지원 여부 확인 index.d.ts : 타입 정의들만 들어있다 (구현부x) package.json > "types 또는 typings": "index.d.ts"가 가장 중요한 타입핑 파일 package.json > "main": 자바스크립트 프로젝트에서 가장 중요한 파일 대부분은 TS나 DT가 붙어있어서 가져다 사용할 수 있지만 그렇지 않은 경우에는 직접 기여하여 타입핑(타입선언) 해야 한다. *DT - 추가로 @types/jquery 같은 오픈소스를 같이 사용해야 함 다만, 틀릴 수 있는 점이 있을 수 있음

infer 타입 분석 임의의 함수에 대해서 해당 파라미터와 리턴값을 자유자재로 뜯어올 수 있다. parameters 유틸리티 function zip(x: number, y:string, z: boolean): { x: number, y: string, z: boolean } { return { x, y, z }; } type Params = Parameters; // Params는 튜플 형식 type First = Params[0]; type Second = Params[1]; type Third = Params[2]; parameters 직접 만들기 function zip(x: number, y:string, z: boolean): { x: number, y: string, z: boolean } { ..

Required, Record, NonNullable 타입 분석 interface Profile { readonly name?: string, readonly age?: number, readonly married?: false, } type R = { [key in keyof T]-?: T[key] // -는 옵셔널 빼기 -readonly[key in keyof T]-?: T[key] // readonly와 옵셔널을 빼고 가져와라 } const zerocho: R = { name: 'zerocho', age: 29, married: false, zerocho.name = 'nero'; // 만약 수정 못 하게 하려면 Readonly const zerocho: Readonly = { name: 'zero..

Omit, Exclude, Extract 타입 분석 Omit 직접 만들기 exclude를 먼저 알아야 함, 여러 개의 유틸을 조합해서 사용할 수 있음 interface Profile { name: string, age: number, married: boolean } const zerocho: Profile = { name: 'zerocho', age: 29, married: false, } type A = Exclude extends key of any가 오는 이유는 아무값이나 오면 안 되니깐; any일 경우 string | number | symbol만 올 수 있음 (제약조건 추가) 즉, S extends keyof any -> S는 string | number | symbol type O = Pic..

Pick 타입 분석 Partial은 모든 속성 옵셔널하게 바꿔주기에 유연성이 떨어짐 그렇기에 pick or omit 유틸리티를 사용 interface Profile { name: string, age: number, married: boolean } const newZeroCho: Pick = { // name이나 age를 가져온다 name: 'zerocho', age: 29, } const newZeroCho: Omit = { // married를 뺀다 name: 'zerocho', age: 29, } Pick 직접 만들기 제네릭의 제한조건을 먼저 붙여주는 것을 우선적으로 생각하자! type P = { [key in S]: T[key] } const newZeroCho: P = { name: 'zero..

Partial 타입 분석 아래와 같은 코드가 있다. Profile이란 객체 타입과 해당 타입인 객체 변수가 존재한다. interface Profile { name: string, age: number, married: boolean } const zerocho: Profile = { name: 'zerocho', age: 29, married: false, } 해당 객체 타입을 잘 쓰다 어느날 해당 속성 중 married 속성이 필요 없어도 된다고 했을 경우, 아래처럼 새로 객체를 만들거나 const newZeroCho: Profile = { name: 'zerocho', age: 29, } 새롭게 인터페이스를 정의를 추가해 사용할 수 있지만, 중복되는 코드가 발생 interface NewProfile ..

타입스크립트는 건망증이 심하다(+에러 처리법) 조심해야할 점 as는 any만큼 사용을 피해야 되는 것, as는 unknown일 때 써야한다 interface Axios { get(): void; } 타입가드로 좁혀놓아도 자바스크립트로 전환 시, interface나 type은 사라진다 -> class 사용 interface에서 class로 // interface에서 class로 interface CustomError { name: string; message: string; stack?: string; response?: { data: any; } } class CustomError extends Error { response?: { data: any; } } 타입가드로 좁혀놓음, 그 안에서 as는 안 써..

하나는 걸리겠지(오버로딩) 타입 오버로딩 같은 타입을 여러번 선언하는 것 function add(x: number, y: number): number function add(x: string, y: string): string function add(x: number | string, y: number | string): number | string { return x + y; } add(1, 2); add(1, 2, 3); add('1', '2'); // ex filter(predicate: (value: T, index: number, array: readonly T[]) => value is S, thisArg?: any): S[]; filter(predicate: (value: T, index: ..