[typescript] 타이프 스크립트에서 레코드 유형은 무엇입니까?

Program / 글쓴이

무엇을 하는가 Record<K, T>Typescript의 의미는 ?

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>

Typescript 2.1 참조

그리고 고급 유형의 페이지는 언급 Record과 함께 제목 매핑 된 형식에서 Readonly, Partial그리고 Pick그 정의로 보이는 년 :

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

읽기 전용, 부분 및 선택은 동형이지만 레코드는 그렇지 않습니다. 레코드가 동형이 아닌 한 가지 단서는 속성을 복사하기 위해 입력 유형을 사용하지 않는다는 것입니다.

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

그리고 그게 다야. 위의 인용문 외에도 typescriptlang.orgRecord 에 대한 다른 언급은 없습니다 .

질문

  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>동일하며 (기본적으로)와 동일합니다 .KRecord<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}

예!

희망이 도움이됩니다. 행운을 빕니다!

답변

레코드를 사용하면 Union에서 새 유형을 만들 수 있습니다. Union의 값은 새 유형의 속성으로 사용됩니다.

예를 들어 다음과 같은 Union이 있다고 가정 해보십시오.

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

이제 모든 고양이에 대한 정보가 포함 된 개체를 만들고 싶습니다. CatName Union의 값을 키로 사용하여 새 유형을 만들 수 있습니다.

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

이 CatList를 만족 시키려면 다음과 같은 객체를 만들어야합니다.

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

매우 강력한 유형 안전을 얻습니다.

  • 고양이를 잊어 버리면 오류가 발생합니다.
  • 허용되지 않는 고양이를 추가하면 오류가 발생합니다.
  • 나중에 CatNames를 변경하면 오류가 발생합니다. CatNames는 다른 파일에서 가져 와서 여러 곳에서 사용되기 때문에 특히 유용합니다.

실제 반응 예.

최근에 이것을 사용하여 상태 구성 요소를 만들었습니다. 구성 요소는 상태 소품을 수신 한 후 아이콘을 렌더링합니다. 설명을 위해 여기에서 코드를 상당히 단순화했습니다.

나는 이와 같은 노조를 가졌다.

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]} />

상태 연합이 나중에 확장되거나 변경되면 상태 구성 요소가 컴파일되지 않으며 즉시 수정할 수있는 오류가 발생합니다. 이를 통해 앱에 추가 오류 상태를 추가 할 수 있습니다.

실제 앱에는 여러 곳에서 참조되는 수십 가지 오류 상태가 있었으므로이 유형 안전은 매우 유용했습니다.

답변