TypeScript - can a generic constraint provide “allowed” types?

后端 未结 2 1324
一生所求
一生所求 2021-01-11 16:47

Given the following code...

type Indexable = { [index: TKey]: TValue }

This produces the following error:

2条回答
  •  北海茫月
    2021-01-11 17:05

    As @TitianCernicova-Dragomir indicates, you can't use TKey as the type in an index signature, even if it is equivalent to string or number.

    If you know that TKey is exactly string or number, you can just use it directly and not specify TKey in your type:

    type StringIndexable = { [index: string]: TValue }
    type NumberIndexable = { [index: number]: TValue }
    

    Aside: TypeScript treats number is usually treated as a kind of subtype of string for key types. That's because in JavaScript, indices are converted to string anyway when you use them, leading to this kind of behavior:

    const a = { 0: "hello" };
    console.log(a[0]); // outputs "hello"
    console.log(a['0']) // *still* outputs "hello"
    

    EDIT: Note that TS2.9 added support for number and even symbol keys in mapped types. We will use keyof any to mean "whatever your version of TypeScript thinks are valid key types". Back to the rest of the answer:


    If you want to allow TKey to be more specific than keyof any, meaning only certain keys are allowed, you can use mapped types:

    type Indexable = { [K in TKey]: TValue }
    

    You'd use it by passing in a string literal or union of string literals for TKey:

    type NumNames = 'zero' | 'one' | 'two';
    const nums: Indexable = { zero: 0, one: 1, two: 2 };
    
    type NumNumerals = '0' | '1' | '2';
    const numerals: Indexable = {0: 0, 1: 1, 2: 2};
    

    And if you don't want to limit the key to particular literals or unions of literals, you can still use string as TKey:

    const anyNums: Indexable = { uno: 1, zwei: 2, trois: 3 };
    

    In fact, this definition for Indexable is so useful, it already exists in the TypeScript standard library as Record:

    type NumNames = 'zero' | 'one' | 'two';
    const nums: Record = { zero: 0, one: 1, two: 2 };
    

    I therefore recommend you use Record for these purposes, since it is standard and other TypeScript developers who read your code are more likely to be familiar with it.


    Hope that helps; good luck!

提交回复
热议问题