Question

我正在从 JavaScript 切换到 TypeScript，一切都很顺利，直到我进入这种情况。我这样设置我的界面：

interface StreamCreateProps {
  [title: string]: any 
};

我的代码是：

const validate = (formValues: any) => {
  const errors = {};

  if(!formValues.title) {
    errors.title = 'You must enter a title';
  };

  if(!formValues.description) {
    errors.description = 'You must enter a description';
  };

  return errors;
};

如何正确输入errors.title 和errors.description？完整的错误是：类型“{}”上不存在属性“title”。

Answer 1

使用 Record 实用程序类型：

const errors: Record<string, string> = {};
errors.foo = 'okay';

当你声明一个变量而不指定类型时，你会导致 TypeScript 编译器为你推断它的类型。编译器将选择一个合理的窄类型。几个例子：

const foo = false // false
foo = true // ERROR
// `foo` is constant, so TS infers `false`, the only possible value. 

let foo = false // boolean
foo = true // OK
foo = 100 // ERROR
// Using `let` or `var` will result in `foo` being reassignable, 
//   so it could technically be anything; 
//   however, TS assumes a narrower type based on its initial value. 

// `foo` is constant, but it's properties are not, 
//   so, like with the previous row, `bar` is assignable to any boolean. 
const foo = { bar: false } // { bar: boolean; } 
foo.bar = true // OK
foo.bar = 100 // ERROR

// a `const` litteral declaration: 
//   foo and its subproperties should retain the narrowest possible type.
const foo = { bar: false } as const // { readonly bar: false; }
foo.bar = false // ERROR

因此适用于您的情况：

const foo = {} // {}
foo.bar = 'baz' // ERROR: Property 'bar' does not exist on type '{}'

foo 太窄，无法接受其他属性。 Record<string, string> 限制较少：它确保您保留诸如 { [key: string]: string } 之类的内容。如果您需要处理非字符串值，您可以进一步扩大它：Record<string, string | number> 或 Record<string, any>。

Examples

类型“{}”上不存在属性“title”。 TS2339

1 个答案: