Typescript 接口值作为枚举或记录

Question

Suppose I have some object that could have either key as string and value as either enum or object with key and value as enum.

types

export enum ERRORS {
  ERROR1 = 'Error1',
  ERROR2 = 'Error2',
}

export type ErrorType = 'blue' | 'green';

export interface ErrorByCode {
  [key: string]: ERRORS | Record<ErrorType, ERRORS>;
}

code

const ERRORS_BY_CODE: ErrorByCode = {
  default: ERRORS.ERROR1,
  '01': ERRORS.ERROR2,

  '2': {
    blue: ERRORS.ERROR1,
    green: ERRORS.ERROR2,
  },
};

const errorResolver = ({code, type}: {code: string; type: ERRORS}) => {
    const errorMessage =
    (ERRORS_BY_CODE?.[code] || ERRORS_BY_CODE?.[code]?.[type]) ??
    ERRORS_COMPONENTS_BY_CODE.default;

    return errorMessage
};


console.log(errorResolver({code: '01', type: 'blue'}))

But I've got ts error under ERRORS_BY_CODE?.[code]?.[type] Element implicitly has an 'any' type because expression of type 'ErrorType' can't be used to index type 'ERRORS | Record<ErrorType, ERRORS>'. Property 'blue' does not exist on type 'ERRORS_BY_CODE | Record<InsuranceType, ERROR_COMPONENTS>'.

Answer 1

The compiler does not expect anyone to try to index into a string (which ERRORS is) with a key like "blue" , and it does not allow it. It will consider that property to be of type any , and give a compile error:

function nope(str: string) {
    str.blue // error! Property 'blue' does not exist on type 'string'
}

If a value is of a type which is a union of string and something else, the compiler will also be unhappy about such an indexing, since it might be a string for all it knows:

function stillNope(uni: string | { blue: number }) {
    uni.blue // error! Property 'blue' does not exist on type 'string'
}

Optional chaining does not fix this. You are not allowed to access an unknown property on an object even if you use ?. instead of . . This prohibition is intentional; see microsoft/TypeScript#33736 for more information.

---

If you want to access a property on a union type where at least one of the members of the union is not known to have that property, you will need to use some other form of type guarding. One way is to use typeof guarding :

function typeofGuard(
  uni: ERRORS | { blue: ERRORS, green: ERRORS }, 
  type: ErrorType
) {
    const errors = typeof uni === "string" ? uni : uni[type];
}

---

The other possibility is to represent your union as one where each member of the union has known behavior at the ErrorType keys. Instead of ERRORS , which is a string with no known behavior at ErrorType , you can make it ERRORS & {[P in ErrorType]?: undefined } . Meaning: it is ERRORS , and if you index into it with an ErrorType key, you will get an undefined property. This makes your error go away also:

function exclusiveUnion(
    uni: (ERRORS & { [P in ErrorType]?: undefined }) | (Record<ErrorType, ERRORS>),
    type: ErrorType
) {
    const errors = uni[type]; // ERRORS | undefined
}

Playground link to code