짧은코딩

Utility Types https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org utility types는 ts가 미리 만들어 놓고 가져다 쓰면 되는 타입들이다. 객체를 조작할 때 도움이 많이 된다. 직접 만들 수도 있어야 한다. 예시 Partial interface Profile { name: string; age: number; married: boolean; } const ori: Profile = { name: "ori", age: 20, married: fal..

TS와 건망증 interface Axios { get(): void; } interface CustomError extends Error { response?: { data: any; }; } declare const axios: Axios; (async () => { try { await axios.get(); } catch (err: unknown) { console.error((err as CustomError).response?.data); } })(); 원래 ts 에러 코드에는 이렇게 밖에 없다. 하지만 위 코드의 CustomError 처럼 response를 추가하면 더 추가할 수 있다. 위 코드에다가 err.response?.data를 추가하면 위에서 선언해줬지만 ts가 건망증이 생겨서 잊어버..

공변성, 반공변성 서로 대입할 수 있고 대입할 수 없는 것을 말하는 것이 공변성, 반공변성이다. 리턴값 -대입 가능 function a(x: string): number { return +x; } a("1"); type B = (x: string) => number | string; const b: B = a; a 함수가 B에 대입이 가능하다. 왜냐하면 리턴값은 더 넓은 타입에 대입이 가능하기 때문이다. -대입 불가 function a(x: string): number | string { return +x; } a("1"); type B = (x: string) => number; const b: B = a; 이와 반대로 더 넓은 타입에서 좁은 타입으로는 대입할 수 없다. 매개변수 -대입 가능 funct..

타입 만들기 forEach -예시1 const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); }); a.forEach((item) => { console.log(item); return "3"; }); 이 코드가 있을 때 Arr 타입을 추론할 수 있어야 한다. interface Arr { forEach(callback: (item: number) => void): void; } const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); }); a.forEach((item) => { console.log(item); return "3"; }); forEach 안에 콜백 함수가 있고 리..

제네릭 -틀린 예시 function add(x: string | number, y: string | number): string | number { return x + y; } add(1, 2); // 3 add("1", "2"); // '12' add(1, '2') // '12' add('1', 2) // '12' 타입을 이렇게 정하면 아래 2줄 같은 경우 때문에 에러가 난다. -제네릭 틀린 예시 function add(x: T, y: T): T { return x + y; } add(1, 2); // 3 add("1", "2"); // '12' add(true, false); add(1, "2"); // '12' add("1", 2); // '12' T는 다 같은 타입이라는 의미이다. 하지만 add(..

타입 가드 function numOrStr(a:number|string) { a.toFixed(1); } numOrStr('123'); numOrStr(1); 이렇게 하면 ts는 모든 가능성을 열어두기 때문에 오류가 난다. 왜냐하면 toFixed는 number에서만 사용할 수 있기 때문이다. toFixed는 매개변수 숫자만큼 소수점이 생긴다. function numOrStr(a: number | string) { if (typeof a === "number") { a.toFixed(1); } else { a.charAt(3); } } numOrStr("123"); numOrStr(1); 따라서 이렇게 표시하면 number인 것이 확실해서 오류가 발생하지 않는다. 그리고 else 문으로 가면 string인..

함수 리턴값 타입 위치 function add(x: number, y: number): number { return x + y; } 리턴값 타입 위치는 이렇게 매개변수 뒤쪽에 붙여야한다. function add(x: number, y: number): number; function add(x, y) { return x + y; } 혹은 이렇게 타입만 선언하고 다음에 내용을 선언하는 경우도 있다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 이렇게 매개변수의 타입 위치가 찾기 어렵게 있다. 이런 경우 타입을 다 지웠을 때 js 문법에 맞게 되도록 코딩을 하면 어느정도 맞다. type Add = (x: number, y: num..