javascript - 元素隐式具有 'any' 类型，因为类型 'xxx' 没有索引签名。ts(7017)

Question

我在 TS 方面遇到问题。对于此代码分支，我收到以下错误:

界面:

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

名称来源于的界面:

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

错误:

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

代码:

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

我正在 TS 文档中阅读以下内容: https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html

这让我相信我应该这样做:

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

但这并没有帮助。你能解释一下这里出了什么问题吗？不，我不能在这里隐含一些东西。我应该在哪里引用该类型？

Answer 1

仅当 Typescript 可以证明您用于访问对象的键是该类型的有效键时，您才可以在 TypeScript 中使用索引访问对象。这意味着索引参数要么是作为对象键的字符串文字类型，要么对象本身具有索引签名:

索引签名定义:

 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

索引参数是键的联合:

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

我建议不要使用索引签名，因为一旦添加，您就可以使用任何键访问该对象(user.notHere不是索引签名的错误) .

如果您已经有一个 string 类型的 name 字段，并且由于某种原因您无法更改它，但您有理由确定它是接口(interface)的键您可以使用类型断言:

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