元素隐式具有'any'类型，因为类型'xxx'没有索引签名.ts（7017）

Question

I am having an issue with TS. I am getting the following error, for this branch of Code:

The Interface:

export default interface IUser {
  username: string;
  email?: string;
  isActive: boolean;
  group: string[];
}

The interface that the name comes form:

interface Field {
  name: string;
  label: string;
  placeholder: string;
  help?: string | React.ReactNode;
}

ERROR:

Element implicitly has an 'any' type because type 'IUser' has no index signature.ts(7017)
const user: IUser

CODE:

      mode === ActionMode.EDIT_INFO && user && user[name]
        ? {
            label: user[name],
            value: user[name]
          }
        : null;

I am reading in the TS Docs, the following: https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html

Which led me to believe that I should do this:

    const defaultValue =
      mode === ActionMode.EDIT_INFO && user && user[name.toString()]
        ? {
            label: user[name.toString()],
            value: user[name.toString()]
          }
        : null;

But it didn't help. Can you explain what is wrong here? No can I not have something implicit here. Where should I reference the type?

Answer 1

You can use index access in typescript to an object only if typescript can prove that the key you are using to access the object is a valid key for the type. This means either the index argument is of a string literal type that is a key of the object or the object itself has a index signature:

Index signature definition:

 export interface IUser {
    [n: string]: string | boolean | string[] | undefined;
    username: string;
    email?: string;
    isActive: boolean;
    group: string[];
}

interface Field {
    name: string;
    label: string;
    placeholder: string;
    help?: string | React.ReactNode;
}

declare let user: IUser;
declare let field: Field;
let value = user[field.name] // ok because of the index signature

Index argument is a union of keys:

export interface IUser {
    username: string;
    email?: string;
    isActive: boolean;
    group: string[];
}

interface Field {
    name: keyof IUser;
    label: string;
    placeholder: string;
    help?: string | React.ReactNode;
}

declare let user: IUser;
declare let field: Field;
let value = user[field.name] // ok because of name is a property of IUser

I would recommend against the index signature as once you add that you can access the object with any key ( user.notHere is not an error with an index signature).

If you already have a name field of type string and for some reason you can't change it, but you are reasonably sure it is a key of the interface you can use a type assertion:

export interface IUser {
    username: string;
    email?: string;
    isActive: boolean;
    group: string[];
}

interface Field {
    name: string;
    label: string;
    placeholder: string;
    help?: string | React.ReactNode;
}

declare let user: IUser;
declare let field: Field;
let value = user[field.name as keyof IUser] // ok bacuse of the assertion