C #에서와 같이 사전 유형으로 TypeScript 객체

객체를 사전으로 사용하는 JavaScript 코드가 있습니다. 예를 들어 '개인'개체는 전자 메일 주소를 사용하여 일부 개인 정보를 보관합니다.

var people = {<email> : <'some personal data'>};

adding   > "people[<email>] = <data>;" 
getting  > "var data = people[<email>];" 
deleting > "delete people[<email>];"

Typescript에서 이것을 설명 할 수 있습니까? 또는 배열을 사용해야합니까?

최신 버전의 타이프 스크립트에서는 다음을 사용할 수 있습니다.

type Customers = Record<string, Customer>

이전 버전에서는 다음을 사용할 수 있습니다.

var map: { [email: string]: Customer; } = { };
map['foo@gmail.com'] = new Customer(); // OK
map[14] = new Customer(); // Not OK, 14 is not a string
map['bar@hotmail.com'] = 'x'; // Not OK, 'x' is not a customer

매번 전체 유형 주석을 입력하지 않으려는 경우 인터페이스를 만들 수도 있습니다.

interface StringToCustomerMap {
    [email: string]: Customer;
}

var map: StringToCustomerMap = { };
// Equivalent to first line of above

지도 와 같은 객체 를 사용하는 것 외에도 , 얼마 동안 실제 Map객체 가 있었는데, ES6로 컴파일 할 때 또는 ES6 유형 정의 로 폴리 필을 사용할 때 TypeScript에서 사용할 수 있습니다 .

let people = new Map<string, Person>();

Object약간 다른 구문으로와 같은 기능을 지원 합니다.

// Adding an item (a key-value pair):
people.set("John", { firstName: "John", lastName: "Doe" });

// Checking for the presence of a key:
people.has("John"); // true

// Retrieving a value by a key:
people.get("John").lastName; // "Doe"

// Deleting an item by a key:
people.delete("John");

이것만으로 다음 과 같은 맵 과 같은 객체 를 사용하는 것보다 몇 가지 장점이 있습니다.

• 문자열 기반이 아닌 키 (예 : 숫자 또는 객체)를 지원 하지 않음 Object(아니오, Object숫자를 지원하지 않는 경우 문자열로 변환)
• 사용하지 않는 오류를 덜 룸 --noImplicitAnyA가로, Map항상이 키의 유형과 값 유형을 객체가있는 반면, 수 인덱스-서명이 없습니다
• 항목 (키-값 쌍)을 추가 / 제거하는 기능은 속성을 생성하는 것과 달리 작업에 최적화 되어 있습니다.Object

또한 Map객체는 일반적인 작업에보다 강력하고 우아한 API를 제공하며, 대부분 Object도우미 함수를 해킹하지 않고 간단한 기능으로 는 사용할 수 없습니다 (일부는 ES5 대상 이하의 경우 완전한 ES6 반복자 / 반복 가능한 폴리 필이 필요하지만).

// Iterate over Map entries:
people.forEach((person, key) => ...);

// Clear the Map:
people.clear();

// Get Map size:
people.size;

// Extract keys into array (in insertion order):
let keys = Array.from(people.keys());

// Extract values into array (in insertion order):
let values = Array.from(people.values());

다음과 같은 템플릿 인터페이스를 사용할 수 있습니다.

interface Map<T> {
    [K: string]: T;
}

let dict: Map<number> = {};
dict["one"] = 1;

typescript에서 레코드 유형을 사용할 수도 있습니다.

export interface nameInterface { 
    propName : Record<string, otherComplexInterface> 
}

Lodash는 간단한 사전 구현을 가지고 있으며 TypeScript를 잘 지원합니다.

Lodash를 설치하십시오.

npm install lodash @types/lodash --save

가져 오기 및 사용법 :

import { Dictionary } from "lodash";
let properties : Dictionary<string> = {
    "key": "value"        
}
console.log(properties["key"])

Record이것을 위해 사용할 수 있습니다 :

https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkt

예 (AppointmentStatus 열거 형과 일부 메타 데이터 간의 매핑) :

  const iconMapping: Record<AppointmentStatus, Icon> = {
    [AppointmentStatus.Failed]: { Name: 'calendar times', Color: 'red' },
    [AppointmentStatus.Canceled]: { Name: 'calendar times outline', Color: 'red' },
    [AppointmentStatus.Confirmed]: { Name: 'calendar check outline', Color: 'green' },
    [AppointmentStatus.Requested]: { Name: 'calendar alternate outline', Color: 'orange' },
    [AppointmentStatus.None]: { Name: 'calendar outline', Color: 'blue' }
  }

이제 인터페이스를 가치로 사용하십시오.

interface Icon { Name: string Color: string }

용법:

const icon: SemanticIcon = iconMapping[appointment.Status]

타이프 스크립트에 강력한 형식의 쿼리 가능한 컬렉션 을 제공하는 라이브러리가 있습니다 .

컬렉션은 다음과 같습니다

• 명부
• 사전

라이브러리를 ts-generic-collections 라고 합니다. ( GitHub의 소스 코드 )

사전을 만들고 아래와 같이 쿼리 할 수 ​​있습니다.

  it('firstOrDefault', () => {
    let dictionary = new Dictionary<Car, IList<Feature>>();

    let car = new Car(1, "Mercedez", "S 400", Country.Germany);
    let car2 = new Car(2, "Mercedez", "S 500", Country.Germany);

    let features = new List<Feature>();

    let feature = new Feature(1, "2 - Door Sedan");
    features.add(feature);

    dictionary.add(car, features);

    features = new List<Feature>();
    feature = new Feature(2, "4 - Door Sedan");
    features.add(feature);

    dictionary.add(car2, features);

    //query
    let first = dictionary.firstOrDefault(x => x.key.name == "Mercedez");

    expect(first.key.id = 1);
  });