Jerry

map 타입 직접 만들기 Tip 타입 업그레이드하면서 코드를 추가 해준다 filter 메소드에 오버로딩을 추가하면서 타입 업그레이드 하는 법 interface Arr { filter(): void; // (1) filter(callback() => void): void; // (2) filter(callback: (v: T) => void): void; // (3) filter(callback: (v: T) => Boolean): T[]; // (4) filter(callback: (v: T) => v is T): T[]; // (5) filter(callback: (v: T) => v is S): S[]; // (6) filter(callback: (v: T) => v is S): S[]; // (7)..

forEach 타입 직접 만들기 Tip 타입을 처음부터 완벽하게 예상하고 만들기는 어려우니, 처음에는 코드에서 에러가 없을 정도로 타입핑하고 타입이 업데이트 될 때마다 타입도 같이 업데이트 해주면 된다 커스텀 함수 "forEach" 만들기 // type checking & defining custom types interface Arr { forEach(callback: (item: T, index: number) => void): void; } const a: Arr = [1, 2, 3]; a.forEach((item, index) => { console.log(item, index); item.toFixed(1); }) a.forEach((item) => { console.log(item); retu..

filter 제네릭 분석 interface Array { filter(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[]; filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[]; } const filtered = [1, 2, 3, 4, 5].filter((value) => value % 2); // (1) const filtered = ['1', 2, '3', 4, '5'].filter((value) => typeof value === 'string'); // (2) 1번 코드는 number[]으로 추론 ..

forEach, map 제네릭 분석 어떻게 타입스크립트가 타입을 파악할 수 있을까? 프로그래밍에는 마법이 없다, 제네릭 덕분이다. forEach interface Array { forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; } // type A = // class A {} [1, 2, 3].forEach((item) => { console.log(item); }); // 1, 2, 3 ['1', '2', '3'].forEach((item) => { console.log(item); }); // 1, 2, 3 [true, false, true].forEach((item) => { console...

옵셔널, 제네릭 기본 ? : 있어도 되고 없어도 된다 라는 뜻 function abc(a: number, b?: number) {} abc(1) abc(1, 2) abc(1, 2, 3) 인터페이스나 타입 alias에서도 사용 가능 : b는 있어도 그만 없어도 그만 let obj: { a: string, b?: string } = { a: 'hello', b: 'world' } obj = { a: 'hello' } add함수는 잘못된 케이스 function add(x: string | number, y: string | number): string | number { return x + y }; add(1, 2); // 3 add('1', '2') // '12' 왜냐하면, 아래 경우를 생각하지 못 했기 때..

{}와 Object {}, Object는 모든 타입(null과 undefined 제외) const x: {} = 'hello'; const y: Object = 'hi'; 실제 객체 : object 실제로 사용할 때, object 지양, interface, type, class 지향 const xx: object = 'hi' const yy: object = { hello: 'world' }; // unknown = {} | null | undefined 합쳐진 것 const z: unknown = 'hi'; if (z) { z; // {} } else { // null | undefined } readonly, 인덱스드 시그니처, 맵드 타입스 // readonly interface A { readonl..

커스텀 타입 가드(is, 형식 조건자) 타입을 구분해주는 커스텀 함수를 직접 만들 수 있다. 리턴값에 is가 들어가 있는 타입은 커스텀 타입 가드 함수이다. if문 안에 써서 정확한 타입을 타입스크립트에게 알려줘야 함 그리고 is가 아니면 타입 추론이 안 되는 경우도 있다. interface Cat { meow: number } interface Dog { bow: number } function catOrDog(a: Cat | Dog): a is Dog { // 타입 판별을 여러분이 직접 만드세요. if ((a as Cat).meow) { return false } return true; } const cat: Cat | Dog = { meow: 3 } if (catOrDog(cat)) { // 커스텀..

unknown과 any(그리고 타입 대입가능표) any를 쓸 바에 unknown을 사용한다 any는 타입핑을 포기(선언), unknown은 정해진 타입만 사용할 수 있게 한다 interface A { talk: () => void; } const a: A = { talk() { return 3; }, } const b = a.talk(); const b: any = a.talk(); const b: unknown = a.talk(); (b as A).talk(); const b = a.talk() as unknown as number; b.toString(); unknown이 나오는 흔한 경우 에러가 어떤게 나올지 모르기 때문에 에러 타입에 대해 선언해준다 (*에러 사용법은 ts는 건망증이 심하다 편 참..