짧은코딩

재귀 타입 TS에는 자기 자신을 다시 사용하는 재귀 타입이 있다. type Recursive = { name: string; children: Recursive[]; }; const recur1: Recursive = { name: 'test', children: [{ name: 'test2', children: [] }], }; 이렇게 recur1은 Recursive 객체 속성 타입으로 다시 Recursive를 사용한다. 이런 것을 바로 재귀 타입이라고 부른다. -컨디셔널 타입 type ElementType = T extends any[] ? ElementType : T; 이런식으로 컨디셔널 타입에서도 사용 가능하다. 다만, 이렇게 재귀 타입을 잘못 사용하면 자기 자신을 계속 가져오는 상황에 빠질 수 ..

브랜드 속성 브랜드 속성은 객체를 구별할 수 있는 속성을 하나 추가하는 방법이다. 예시 interface Money { __type: 'money'; amount: number; unit: string; } interface Liter { __type: 'liter'; amount: number; unit: string; } 이 코드에서는 "__type" 이 속성을 브랜드 속성이라고 한다. 속성 이름은 다른 속성과 겹치지 않는 이름이면 다 가능하다. 이렇게 브랜드 속성을 사용하는 것을 브랜딩이라고 한다. 타입 좁히기 TS에서 타입을 구분하는 것은 중요하다. 대부분은 TS가 자체적으로 코드를 파악해서 타입을 추론하는 제어 흐름 분석(Control Flow Analysis)을 한다. 하지만 제어 흐름 분석이..

infer란? infer로 타입 추론을 극한으로 활용할 수 있다. 컨디셔널 타입과 같이 사용할 수 있다. 컨디셔널 타입(Conditional Type)이란? type A1 = string; type B1 = A1 extends string ? number : boolean; // number type A2 = number; type B2 = A2 extends string ? number : boolean; // boolean 특정 타입 extends 다른 타입 ? 참일 때 타입 : 거짓일 때 타입 특정 타입이 다른 타입의 부분집합일 때 참이 된다. infer의 예시들 배열의 요소 타입을 얻고 싶은 경우 type El = T extends (infer E) [] ? E : never; type Str =..

어떤 함수는 다른 함수에 대입할 수 있는데, 대입이 불가능한 경우도 있다. 이를 제대로 이해하려면 공변성, 반공변성을 알아야 한다. 공변성: A->B일 때, T -> T 인 경우 반공변성: A->B일 때, T -> T인 경우 이변성: A->B일 때, T -> T도 되고 T -> T도 되는 경우 무공변성: A->B일 때, T -> T도 안 되고 T -> T도 안 되는 경우 TS는 기본적으로 공변성을 갖고 있지만, 함수의 매개변수는 반공변성을 갖는다! 그리고 TS Config에서 strict와 strictFunctionTypes가 모두 체크되어야 함수의 매개변수가 반공변성을 갖는다. 둘 다 체크되지 않으면 이변성을 갖는다. 반환값 a->b인 경우 function a(x: string): number { re..

오버로딩 사용이 필요한 경우 오버로딩은 호출할 수 있는 함수의 타입을 미리 여러 개 타이핑하는 기법이다. function add(x: string | number, y: string | number): string | number { return x + y; } add(1, 2); add('1', '2'); add('1', 2); add(1, '2'); x와 y가 같은 타입일 경우에만 함수를 실행시키고 싶었다면, 이 코드에서는 불가능하다. 서로 다른 타입이어도 코드가 동작할 수 있도록 구현되어 있다. 그렇기에 이런 경우에 오버로딩 기법을 사용할 수 있다. 오버로딩 예시 function add(x: number, y: number): number; function add(x: string, y: strin..

타입스크립트에는 자바스크립트에는 없던 연산자들이 있다. 처음 봤을 땐, 나름 쉬워 보여서 그냥 넘어갈 수도 있지만 타입스크립트를 지속적으로 사용하다 보면 은근히 헷갈릴 때가 있었다. 그렇기에 이 글을 통해 정리하고자 한다. 연산자 유니언(|): 유니언 타입은 OR의 역할을 한다. 즉, 합집합의 역할을 한다. 인터섹션(&): 인터섹션 연산자는 AND의 역할을 한다. 즉, 교집합의 역할을 한다. 공집합(never) type nev = string & number; // never 인터섹션 연산자를 이용하여 위 코드를 작성하면 nev의 타입은 never가 된다. 즉, 타입스크립트에서 가장 좁은 타입이다. 전체집합(unknown) 전체집합은 unknown이며, 타입스크립트에서 가장 넓은 타입이다. 대입 원칙 타..

React FunctionComponent interface P { name: string, title: string, } // ReactElement는 굳이 안해도 된다. const WordRelay: FunctionComponent = (): ReactElement => { } FC가 FunctionComponet의 줄임말이다. 리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다. 따라서 FC children를 사용하고 싶다면 interface P { name: string, title: string, children?: ReactNode | undefined; } const WordRelay: FC ..

Axios 만들기 import axios, { AxiosError, AxiosResponse } from "axios"; interface Post {} interface Created {} interface Data { title: string; body: string; userId: number; } // date에 타입을 줄 때 그냥 any로 하면 타입핑을 포기한다는 것이다. //따라서 제네릭을 이용해서 타입이 any가 아니여도 괜찮다. interface Config { // method는 string으로 해도 되지만 이렇게 좁혀주는 것이 더 좋다. method?: "post" | "get" | "put" | "patch" | "delete" | "head" | "options"; url?: str..

axios 분석 axios는 XMLHttpRequest 기반이라 fetch보다 기능이 다양하다. 게다가 브라우저와 노드 모두 사용이 가능하다. -가상 api 주소가 필요할 때 사용하는 주소 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com -ts에서 함수에 속성 추가하..

npm이 TS인 경우 reduce https://www.npmjs.com/package/redux redux Predictable state container for JavaScript apps. Latest version: 4.2.0, last published: 4 months ago. Start using redux in your project by running `npm i redux`. There are 16342 other projects in the npm registry using redux. www.npmjs.com redux의 공식 사이트이다. 사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다. axios axios도..