programing

개체 리터럴의 키를 유형 스크립트 유형으로 사용하시겠습니까?

javamemo 2023. 6. 29. 19:41
반응형

개체 리터럴의 키를 유형 스크립트 유형으로 사용하시겠습니까?

응용 프로그램에 대해 미리 정의된 데이터가 포함된 개체가 있으며 다음과 같은 상수 변수에 저장됩니다.

const data:{[key:string]:any} =Object.freeze({
    some: 123,
    long: {"a":"b"},
    list: ["c"],
    of: "",
    arbitrary: null,
    things: 1.2,
});

이 개체의 키는 응용 프로그램의 나머지 부분에 알려져 있습니다.데이터 개체에 액세스하는 이 함수를 고려합니다.

function doWork(k) {
    if(!data.hasOwnProperty(k)) throw Error();
    let value = data[k];
    //...
}

이것은 다음과 같은 문자열로 호출됩니다.

doWork("things");

잘못된 키에 대한 런타임 오류를 Typescript 컴파일 시간 검사로 바꾸고 싶습니다.나는 글을 쓸 수 있기를 원합니다.

function doWork(k: keyof data) {
    let value = data[k];
    //...
}

하지만 겉보기에는keyof연산자는 그런 식으로 작동하지 않습니다.오류가 발생했습니다.TS2304: Cannot find name 'data'.


해결 방법:다음과 같은 방법으로 개체의 키를 추출할 수 있습니다.

console.log("\""+Object.keys(data).join("\"|\"")+"\"");

복사/붙여넣고 유형으로 정의할 수 있습니다.

type data_key = "some"|"long"|"list"|"of"|"arbitrary"|"things"
export function doWork(k:data_key) {
    let value = data[k];
    //...
}

이것은 바보 같은 해킹처럼 느껴지며, 제가 변경해야 할 때마다 매우 불편합니다. 왜냐하면 저는 올바른 위치에 이 문을 삽입하고 프로그램을 실행하고 수동으로 값을 소스 코드에 복사해야 하기 때문입니다(또는 현실적으로 변경 사항을 직접 입력하십시오).


저는 더 나은 해결책을 원합니다.제가 찾고 있는 기능을 제공하는 언어 기능이 있습니까?

TypeScript가 다음 유형을 추론하도록 합니다.data그런 다음 사용하여 입력한 유형에서 키를 추출합니다.type data_key = keyof typeof data;:

const data = Object.freeze({
    some: 123,
    long: {"a":"b"},
    list: ["c"],
    of: "",
    arbitrary: null,
    things: 1.2,
});

type data_key = keyof typeof data;

function doWork(k: data_key) {
    let value = data[k];
    //...
}

운동장에서.

작동 방식:

  1. TypeScript는 고급 유형 추론을 가지고 있으므로 전달된 객체 이니셜라이저의 유형을 추론할 수 있습니다.Object.freeze열쇠를 가지고some,long,list,기타.Object.freeze로 정의됩니다.freeze<T>(o: T): Readonly<T>◦ 그래서 그것은 a를 반환합니다.Readonly동일한 추론 유형의 버전입니다.
  2. keyof유형의 키를 가져옵니다.
  3. typeof이 컨텍스트에서는 TypeScript의typeofJavaScript가 아닙니다.TypeScript에서 런타임 값을 예상하는 곳과 컴파일 시간 유형을 예상하는 곳이 있습니다. keyof의 피연산자는 컴파일 시간 유형이 예상되는 곳이므로,typeof data의 컴파일 시간 유형을 반환합니다.data이것은 추론된 유형의 읽기 전용 버전입니다.freeze(키 포함)some,long,list등). (만약 당신이 그랬다면.x = typeof data그것은typeof런타임 값이 예상되는 컨텍스트에서, 그래서 자바스크립트의typeof,그리고.x런타임 값을 가져옵니다."object".)

◦ 실제로 세 가지 정의가 있습니다.freeze(어레이용 하나, 함수용 하나, 기타 모든 종류의 객체용 하나, 이것이 마지막입니다.

언급URL : https://stackoverflow.com/questions/56312165/using-the-keys-of-an-object-literal-as-a-typescript-type

반응형