React.FC를 이해하기 위한 Typescript Generic with Interface

2. 컴포넌트가 아닌 일반 함수에서도 리액트 컴포넌트 타입처럼 만들어서 사용해보기

이 챕터는 제네릭을 이해하고, 인터페이스 및 타입에 적용시켜 조금 더 타입스크립트를 잘 사용할 수 있도록 하는것을 목표로 작성했습니다.

매개변수에 하나하나 타입을 지정하는 일반적인 단계에서 조금 더 확장성 및 간편한 사용법까지 알아봅니다.

Infering the types - Contextual typing

• 한쪽에만 타입이 있어도 컴파일러가 알아서 타입을 추론함

// anonymousFunction은 전체 함수 타입을 가짐 const anonymousFunction = (x: number, y: number): number => x + y; // 매개변수 x와 y는 number 타입을 가짐 const anonymousFunction: (x: number, y: number) => number = (x, y) => x + y;

일반적인 함수의 타입 지정 및 호출 방식

const normalFunction = (arg: string): string => arg; normalFunction('HELLO');

제네릭 함수의 타입 지정 및 호출 방식

• 객체 리터럴 타입의 함수 호출 시그니처로 작성할 수도 있습니다.{ (arg: T): T }

const genericFunction: (arg: T) => T = (arg) => arg; genericFunction('HELLO');

함수에 제네릭 인터페이스 적용

interface GenericFunction { (arg: T): T; } const genericFunction: GenericFunction = (arg) => arg; genericFunction('HELLO');

제네릭 매개변수를 전체 인터페이스에 적용

• 제네릭 매개변수를 인터페이스의 매개변수로 옮기고 싶은 경우, 이를 통해 제네릭 타입을 확인할 수 있습니다.

• 함수를 사용할 때, 시그니처가 사용할 것을 효과적으로 제한할 특정한 타입 인수가 필요합니다.

타입 매개변수를 호출 시그니처에 바로 넣을 때와 인터페이스 자체에 넣을 때를 이해하는 것은 타입의 제네릭

부분을 설명하는 데 도움이 됩니다.

interface GenericFunction { (arg: T): T; } const genericFunction: GenericFunction = (arg) => arg; genericFunction('HELLO');

제네릭과 여러가지 타입 조건들 적용해보기

유틸타입을 들어가기 이전에 알아야하는 개념 - Index Signature / Mappped Type

인덱스 인덱싱에 사용할 인덱서(Indexer)의 이름과 타입 그리고 인덱싱 결과의 반환 값을 지정합니다.

인덱서의 타입은string과number만 지정할 수 있습니다.

간단한 예시

interface Item { [itemIndex: number]: string // Index signature } const item: Item = ['a', 'b', 'c']; // Indexable type console.log(item[0]); // 'a' is string. console.log(item[1]); // 'b' is string. // Error // TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'. console.log(item['0']);

인터페이스Item= 인덱스 시그니처

item을item[0]이나item[1]과 같이 숫자로 인덱싱할 때 반환되는 값은'a'나b'같은 문자여야 합니다.

item을item['0']과 같이 문자로 인덱싱하는 경우 에러가 발생합니다.

keyof

인덱싱 타입을 유니온으로 적용하는 단계

interface Countries { KR: '대한민국', US: '미국', CP: '중국' } const country: keyof Countries; // 'KR' | 'US' | 'CP' // Success country = 'KR'; // Error // TS2322: Type '"RU"' is not assignable to type '"KR" | "US" | "CP"'. country = 'RU';

Mapping Type

키를 통해 타입을 반복적으로 생성하는 제네릭 타입

type OptionsFlags = { [Property in keyof Type]: boolean; }; type FeatureFlags = { darkMode: () => void; newUserProfile: () => void; }; type FeatureOptions = OptionsFlags; // darkMode : boolean // newUserProfile : boolean

keyof 와 maaping type 조금 더 깊게 이해해보기

extends keyof

제네릭 매개변수에 제약조건을 걸기 위해 사용하는 경우입니다.

type Person = { age: number, name: string, }; const getProperty = <T, K extends keyof T>(obj: T, key: K): T[K] => obj[key]; const person: Person = { age: 22, name: "Tobias", }; // name is a property of person // --> no error const name = getProperty(person, "name"); // gender is not a property of person // --> error const gender = getProperty(person, "gender");

이 샘플코드에서 K는 오직 T 속성만 될 수 있습니다. 다른 타입을 상속하거나 확장하는것은 불가능합니다.

in keyof

인덱스 시그니쳐를 사용하여 정의하는 경우에 사용합니다.

in과 keyof를 같이 사용할 경우가 mapped type입니다.

이 예시와 똑같은 구조로 유틸 타입 Partial가 있습니다.

type Person = { age: number, name: string, }; type Optional<T> = { [K in keyof T]?: T[K] }; const person: Optional<Person> = { name: "Tobias" // notice how I do not have to specify an age, // since age's type is now mapped from 'number' to 'number?' // and therefore becomes optional };

기본적으로 유용하게 쓸 수 있는 유틸타입

Partial

//Make all properties in T optional type Partial = { [P in keyof T]?: T[P]; };

제네릭의 모든 속성들을 옵셔널로 바꿔줍니다.

간단한 사용예시

export interface Task { id: string; title: string; state: string; completed: boolean; } // ERROR // TS2741: Property 'completed' is missing in type // '{ id: string; title: string; state: string; }' but required in type 'Task'. const defaultTasks: Task[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ]; // SUCCESS const defaultTasks: Partial<Task>[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ];

이와같이 모든 속성을 옵셔널로 바꿔 사용할 수 있기 때문에 옵셔널 인터페이스를 다시 만들 필요가없습니다.

export interface Task { id: string; title: string; state: string; completed: boolean; } // 옵셔널 인터페이스 export interface OptionalTask { id?: string; title?: string; state?: string; completed?: boolean; } // 타입을 여러번 만들어야돼서 불편함 const defaultTasks: OptionalTask[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ];

그러나 여러곳에서 Partial를 사용할 경우 적용된 타입을 만들어서 사용하는 것이 좋을것 같습니다.

export interface Task { id: string; title: string; state: string; completed: boolean; } // 유틸을 적용시킨 타입을 새로 지정 export type TaskPartial = Partial<Task>; // 사용위치 1 const defaultTasks: TaskPartial[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ]; // 사용위치 2 export const fetchTasks = createAsyncThunk('todos/fetchTodos', async () => { const response = await fetch( 'https://jsonplaceholder.typicode.com/todos?userId=1' ); const data = await response.json(); return data.map((task: TaskPartial) => ({ id: `${task.id}`, title: task.title, state: task.completed ? 'TASK_ARCHIVED' : 'TASK_INBOX', })); });

partial를 매번 적용해서 쓸 것인지 적용한 타입을 선언해서 쓸 것인지는 컨벤션 차이이며,

리액트의 컴포넌트 타입들 중 몇몇은 유틸을 적용한 타입을 선언 및 alias로 간단하게 사용하기도 합니다.

type FC<P = {}> = FunctionComponent

; type VFC<P = {}> = VoidFunctionComponent

; type ForwardedRef = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

Pick

TYPE에서KEY로 속성을 선택한 새로운 타입을 반환합니다.

interface User { name: string, age: number, email: string, isValid: boolean } type TKey = 'name' | 'email'; const user: Pick<User, TKey> = { name: 'Neo', email: 'thesecon@gmail.com', // ERROR // TS2322: Type '{ name: string; email: string; age: number; }' is not assignable to type 'Pick<User, TKey>'. age: 22 };

간단한 사용예시

export interface Task { id: string; title: string; state: string; completed: boolean; } export type TaskPartial = Partial<Pick<Task, 'id' | 'title' | 'state'>>; const defaultTasks: TaskPartial[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ];

Omit

TYPE에서KEY로 속성을 생략하고 나머지를 선택한 새로운 타입을 반환합니다.

pick과 반대개념입니다.

interface User { name: string, age: number, email: string, isValid: boolean } type TKey = 'name' | 'email'; const user: Omit<User, TKey> = { age: 22, isValid: true, // ERROR // TS2322: Type '{ age: number; isValid: true; name: string; }' is not assignable to type 'Pick<User, "age" | "isValid">'. name: 'Neo' };

간단한 사용예시

export interface Task { id: string; title: string; state: string; completed: boolean; } export type TaskPartial = Partial<Omit<Task, 'completed'>>; const defaultTasks: TaskPartial[] = [ { id: '1', title: 'Something', state: 'TASK_INBOX', }, ... ];

실무에서 적용할 수 있는 사례

지금까지 기초적인 예제 및 간단한 구현코드로 개념을 이해하고 사용법을 숙지했습니다.

이후로 실무자들이 타입을 선언 및 지정하는 컨벤션에 대해 여러가지 논의가 이루어지는 단계로 넘어갈 수 있습니다.

API 호출 후 데이터 타입 지정 및 응집성에 대한 논의

기존의 프로젝트 ( 중박 ) 에서의 API 타입의 타입 지정은 하나의 파일에서 관리되고 있었습니다.

ex ) ApiTypes.ts

무려 1830 라인이나 되기 때문에 협업시에 원하는 타입을 찾기가 쉽지 않습니다.

팀원들간의 논의에서 도출된 대안

디렉터리 구조에서 이미 관심사로 API들을 분리해두었기 때문에 타입들도 이에 맞추어 분리시켜도 좋다는 의견이 많았습니다.

호출하는 API들을 이미 관심사에 따라 분리하여 디렉토리 구조를 설계함

하나로 관리되던 API 타입들도 분리된 파일에 작성하도록 하여 실무자들이 사용하는 타입을 조금 더 쉽게 참조할 수 있도록 합니다.

기본적으로 제공되는 API를 베이스 타입으로 모두 정리합니다.

위에서 알아보았던 유틸 타입이나 제약조건들을 알맞게 사용하여 원하는 위치에서 사용하고자 하는 타입들을 커스텀하여 사용하도록 합니다.

매번 타입을 사용할 때마다 새로운 타입을 만들어서 사용하지 않을것

가장 기본이 되는 타입을 찾을 수 없음

이미 존재하는 타입을 유틸 타입이나 제약조건을 걸어서 사용할 것

언제나 타입을 참조하여 원본 타입을 찾을 수 있음

Reference

참고자료의 경우 리액트 17을 주로 다루기 때문에 필요에 따라 리액트 18과 비교할 필요가 있습니다.

• https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion

• https://dev.to/xenoxdev/usage-of-reactfc-from-my-experience-22n7

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/

• https://www.harrymt.com/blog/2020/05/20/react-typescript-react-fc.html

• https://basarat.gitbook.io/typescript/getting-started

• https://blog.logrocket.com/how-to-use-keyof-operator-typescript/

• https://stackoverflow.com/questions/57337598/in-typescript-what-do-extends-keyof-and-in-keyof-mean

• https://mariusschulz.com/blog/keyof-and-lookup-types-in-typescript

• https://www.youtube.com/watch?v=MSq_DCRxOxw

• https://www.youtube.com/watch?v=3fG1hPGQtaY

• https://www.youtube.com/watch?v=QGxPyjvf1cQ

• https://www.youtube.com/watch?v=XxV395LzRTk&t=99s

• https://github.com/radlohead/typescript-book/blob/master/docs/jsx/react.md

• https://github.com/facebook/create-react-app/pull/8177