Typescript Generics Quick Intro with react basics

이 기사에서는 Typescript에서 제네릭이 작동하는 방식을 살펴보겠습니다. 말 그대로 처음에는 무섭게 보이지만 제네릭의 전반적인 논리를 덩어리로 이해하고 깨뜨리면 그들은 우리의 가장 좋은 친구가 될 것입니다.

This article needs some basic understanding of typescript to advance further.

타이프스크립트의 배열

우리가 항상 사용하는 가장 기본적인 제네릭 유형은 특정 유형의 배열을 정의하는 것입니다. 예: number[],string[],boolean[];

type numArr = Array<number>;
type strArr = Array<string>;
type boolArr = Array<boolean>;

let numberArray: numArr = [1, 2, 3, 4];
let stringArray: strArr = ["H", "e", "l", "l", "o"];
let boolArray: boolArr = [true, false, true];

console.log(numberArray);
console.log(stringArray);
console.log(boolArray);

특정 유형을 전달하지 않으면 아래 그림과 같이 화면에 오류가 표시됩니다.

제네릭 메서드

전달된 모든 배열 유형의 middleElement를 반환할 수 있는 메서드가 필요하다고 가정합니다. 따라서 middleElement를 찾는 가장 기본적인 접근 방식은 다음과 같습니다.

const middleElement = (arr: Array<any>) => {
  return arr[Math.floor(arr.length / 2)];
};

let numberArray: numArr = [1, 2, 3, 4, 5];

let stringArray: strArr = ["I", "T", "A", "L", "Y"];

let boolArray: boolArr = [true, false, true];

let middle1 = middleElement(numberArray);

let middle2 = middleElement(stringArray);

let middle3 = middleElement(boolArray);

console.log(middle1); //3
console.log(middle2); //A
console.log(middle3); //false

그러나 이 방법으로 마우스를 가져가면 'any'를 표시하는 아래 그림에서 볼 수 있듯이 메서드 반환 유형의 TypeDefinition을 잃게 됩니다.


이제 typescript의 제네릭 기능을 구현하면 메서드의 typeDefinition을 유지할 수 있습니다.

const middleElement = <T>(arr: Array<T>) => {
  return arr[Math.floor(arr.length / 2)];
};

위의 그림에서 특정 유형의 middleElement 메서드 위로 마우스를 가져가면 해당 인수가 전달된 유형 및 반환 유형을 볼 수 있습니다.

//We can explicitly define type of our method as below :
let middle2 = middleElement<string>(stringArray);

하나 이상의 일반 유형을 허용할 수 있는 메서드를 만들기 위해 다음을 수행할 수 있습니다.

//This method will accept any type of arguments and make a combined object of it.
const makeObj = <X, Y>(x: X, y: Y) => {
  return { x, y };
};

let numbArray: numArr = [1, 2, 3, 4];

let Obj = { firstName: "Vinod", lastName: "Chauhan" };

let newObj = makeObj(numbArray, Obj);

console.log(newObj);

위의 그림에서 makeObj 메서드의 반환 유형을 볼 수 있습니다. 이는 VS 코드 편집기에서 제네릭의 힘을 보여줍니다.

필수 필드가 있는 일반 메서드

개체를 매개 변수로 사용하는 'makeICardDetail' 메서드가 필요하다고 가정해 보겠습니다. 이 개체는 요구 사항을 충족하기 위해 이름, 성, 나이를 필수 필드로 요구했습니다. 따라서 이를 수행하는 한 가지 방법은 다음과 같습니다.

const makeICardDetail = (obj: {
  firstName: string;
  lastName: string;
  age: number;
}) => {
  return {
    ...obj, //Copy other contents of Object as it is.
    ICard: obj.firstName + " " + obj.lastName + ", " + obj.age
  };
};

let makeNewDetail = makeICardDetail({
    firstName: "Vinod",
    lastName: "Chauhan",
    age: 27
  });
console.log(makeNewDetail.ICard); //Vinod Chauhan, 27

이제 필수 필드가 아닌 위치도 전달해야 하는 경우에는 어떻게 해야 합니까? makeICardDetail의 위치 필드를 인수로 전달하면 TypeScript 컴파일러에서 오류가 발생합니다.

let makeNewDetail = makeICardDetail({
  firstName: "Vinod",
  lastName: "Chauhan",
  age: 27,
  location: "India"
});
console.log(makeNewDetail.ICard); //Vinod Chauhan, 27

//TSC compiler
index.ts:59:3 - error TS2345: Argument of type '{ firstName: string; lastName: string; age: number; location: string; }' is not assignable to parameter
of type '{ firstName: string; lastName: string; age: number; }'.
  Object literal may only specify known properties, and 'location' does not
exist in type '{ firstName: string; lastName: string; age: number; }'.

59   location: "India"
     ~~~~~~~~~~~~~~~~~

[9:01:00 PM] Found 1 error. Watching for file changes.

여기서 제네릭은 '확장' 기능으로 우리를 구해줍니다.

const makeICardDetail = <T extends { firstName: string; lastName: string; age: number }>( obj: T) => {
  return {
    ...obj,
    ICard: obj.firstName + " " + obj.lastName + ", " + obj.age
  };
};

그리고 아래 그림을 보면 'makeNewDetail' 변수가 복잡하고 긴 애플리케이션에 도움이 되는 모든 가능한 값의 옵션을 제공하는 것을 볼 수 있습니다.

제네릭과의 인터페이스

interface KeyPair<T, U> {
  key: T;
  value: U;
}

let kv1: KeyPair<number, string> = { key: 1, value: "Vinod" }; // OK
let kv2: KeyPair<number, number> = { key: 2, value: 12345 }; // OK

React의 제네릭

TypeScript로 React 작업을 해본 적이 있다면 'props'가 전달되어야 하는 기능적 구성 요소를 구현해야 합니다. 소품은 구성 요소에 typedefinition을 제공합니다.

import React from "react";

interface Props {
  name: string;
}

export const Example: React.FC<Props> = ({ name }) => {
  return <div>Hello {name}</div>;
};

위 스니펫에서 "React.FC"props는 필드와 함께 선언된 유형이 있는 인터페이스 유형인 일반으로 전달됩니다.

또한 useState를 사용하여 제네릭을 정의할 수 있습니다.

export const Example: React.FC<Props> = ({name}) => {
//const [state] = React.useState({fullName:"",age:0});
    const [state] = React.useState<{fullName:string | null;age : number}>({fullName : "",age:0});
  return <div>Hello {name}</div>;
};

이 기사가 TypeScript를 사용한 반응 학습에 약간의 지식을 추가하기를 바랍니다.