programing

레코드 타입은 무엇입니까?

i4 2023. 3. 17. 19:37
반응형

레코드 타입은 무엇입니까?

무엇인가.Record<K, T>평균은요?

Typescript 2.1은Record예를 들어 다음과 같이 입력합니다.

// For every properties K of type T, transform it to U
function mapObject<K extends string, T, U>(obj: Record<K, T>, f: (x: T) => U): Record<K, U>

'타입 스크립트 2.1' 참조

또한 [Advanced Types]페이지에는Record[ Mapped Types ]라는 제목 아래Readonly,Partial,그리고.Pick그 정의로 보이는 것은 다음과 같습니다.

type Record<K extends string, T> = {
    [P in K]: T;
}

Readonly, Partial 및 Pick은 동형이지만 Record는 동형이 아닙니다.레코드가 동형이 아니라는 단서 중 하나는 속성을 복사하는 데 입력 유형이 필요하지 않다는 것입니다.

type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>

그리고 이것이 마지막입니다.상기 인용문 외에 에 대한 언급은 없습니다.Recordtypescriptlang.org 에서 참조해 주세요.

문의사항

  1. 누가 간단한 정의를 내릴 수 있을까요?Record그런가요?

  2. Record<K,T>단순히 "이 오브젝트의 모든 속성은 유형을 가집니다.T"? 모든 부동산은 아닐 겁니다.K어떤 목적을 가지고 있다...

  3. 그럼?K일반적으로 오브젝트에 추가 키가 없는 경우 금지K또는 이러한 속성을 허용하고 해당 속성이 로 변환되지 않았음을 나타냅니다.T?

  4. 예를 들어 다음과 같습니다.

    type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>
    

    이거랑 똑같아요?

    type ThreeStringProps = {prop1: string, prop2: string, prop3: string}
    
  1. 누가 간단한 정의를 내릴 수 있을까요?Record그런가요?

A Record<K, T>속성 키가 다음과 같은 개체 유형입니다.K그리고 그 속성가치는T.그것은,keyof Record<K, T>와 동등하다K,그리고.Record<K, T>[K](비교적)과 동등하다.T.

  1. Record<K,T>단순히 "이 오브젝트의 모든 속성은 유형을 가집니다.T"? 모든 물체는 아닐 겁니다.K어떤 목적을 가지고 있다...

보시는 바와 같이K목적이 있다...속성 키를 특정 값으로 제한합니다.가능한 모든 문자열 값 키를 허용하려면 다음과 같은 작업을 수행할 수 있습니다.Record<string, T>하지만, 그것을 하는 관용적인 방법은 다음과 같은 색인 서명을 사용하는 것입니다.{ [k: string]: T }.

  1. 그럼?K일반적으로 오브젝트에 추가 키가 없는 경우 금지K또는 이러한 속성을 허용하고 해당 속성이 로 변환되지 않았음을 나타냅니다.T?

추가 키를 "포기"하는 것은 아닙니다.결국 값은 일반적으로 유형에서 명시적으로 언급되지 않은 속성을 가질 수 있습니다.하지만 그러한 특성이 존재한다는 것을 인식하지 못합니다.

declare const x: Record<"a", string>;
x.b; // error, Property 'b' does not exist on type 'Record<"a", string>'

그리고 때때로 거부되는 과도한 특성으로 취급할 수 있습니다.

declare function acceptR(x: Record<"a", string>): void;
acceptR({a: "hey", b: "you"}); // error, Object literal may only specify known properties

때로는 받아들여지기도 합니다.

const y = {a: "hey", b: "you"};
acceptR(y); // okay
  1. 예를 들어 다음과 같습니다.

     type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>
    

    이거랑 똑같아요?

     type ThreeStringProps = {prop1: string, prop2: string, prop3: string}
    

네!

A Record유니언에서 새로운 유형을 작성할 수 있습니다.유니언의 값은 새로운 유형의 속성으로 사용됩니다.

예를 들어 다음과 같은 유니온이 있다고 가정해 봅시다.

type CatNames = "miffy" | "boris" | "mordred";

에 대한 있는 , 수 . 을 사용법CatNames열쇠로서의 결합

type CatList = Record<CatNames, {age: number}>

CatList '하다, 하다, 하다, 하다.'

const cats: CatList = {
  miffy: { age:99 },
  boris: { age:16 },
  mordred: { age:600 }
}

매우 강력한 유형의 안전성을 얻을 수 있습니다.

  • 고양이를 잊으면 오류가 납니다.
  • 허용되지 않는 고양이를 추가하면 오류가 발생합니다.
  • 에 ★★★★★★★★★★★★★★★★★★★★★★★★.CatNames에러가 표시됩니다.은 특히 합니다. 왜냐하면CatNames다른 파일에서 가져올 수 있으며 여러 곳에서 사용될 수 있습니다.

Real-World React 예시.

는 최근에 하여 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★Status요소.컴포넌트가 수신합니다.status아이콘을 렌더링합니다.

난 이런 조합이 있었어

type Statuses = "failed" | "complete";

다음과 같은 오브젝트를 작성하기 위해 사용하였습니다.

const icons: Record<
  Statuses,
  { iconType: IconTypes; iconColor: IconColors }
> = {
  failed: {
    iconType: "warning",
    iconColor: "red"
  },
  complete: {
    iconType: "check",
    iconColor: "green"
  };

그런 다음 오브젝트의 요소를 소품으로 파괴하여 다음과 같이 렌더링할 수 있습니다.

const Status = ({status}) => <Icon {...icons[status]} />

경우,Statuses유니언은 나중에 확장 또는 변경되어 상태 컴포넌트가 컴파일되지 않고 오류가 표시되므로 즉시 수정할 수 있습니다.이를 통해 앱에 오류 상태를 추가할 수 있습니다.

실제 앱은 여러 곳에서 참조되는 수십 개의 오류 상태를 가지고 있기 때문에 이 유형의 안전성은 매우 유용했습니다.

레코드 타입의 메뉴얼이 조금 더 길어졌습니다.https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type

그 말을 인용:

레코드 <키, 타입> 출시: 2.1

속성 키가 키이고 속성 값이 유형인 개체 유형을 구성합니다.이 유틸리티를 사용하여 유형의 속성을 다른 유형에 매핑할 수 있습니다.

interface CatInfo {
  age: number;
  breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};
 
cats.boris;
 
const cats: Record<CatName, CatInfo>

Record 를 사용하는 간단한 예:

다음과 같은 객체가 있으며 객체의 유형을 정의한다고 가정합니다.

const networkConfig = {
 4: {
    name: "rinkeby",
    ethUsdPriceFeed: "0x8A753747A1Fa494EC906cE90E9f37563A8AF630e",
  }
}

따라서 Record를 사용하면 다음과 같은 유형이 됩니다.

type networkConfigType = Record<number, {
    name: string;
    ethUsdPriceFeed: string;
}>;

언급URL : https://stackoverflow.com/questions/51936369/what-is-the-record-type

반응형