类型“X”中缺少属性，但类型“Y”中需要属性

属性在类型 ‘X’ 中缺失，但在类型 ‘Y’ 中是必需的

当我们没有设置指定类型的对象所需的所有属性时，就会出现 TypeScript 错误“类型中缺少属性，但类型中需要属性”。

要解决该错误，请确保在对象上设置所有必需的属性或将属性标记为可选。

类型中缺少但类型中需要的属性

以下是错误发生方式的一些示例。

索引.ts


type Person = {
  name: string;
  country: string;
};

// ⛔️ Property 'country' is missing in type
// '{ name: string; }' but required in type 'Person'.ts(2741)
const person: Person = {
  name: 'Tom',
};

// ------------------------------------------------------

function getPerson(person: Person) {
  return person;
}

// ⛔️   Property 'country' is missing in type
// '{ name: string; }' but required in type 'Person'.ts(2345)
getPerson({ name: 'Tom' });

// ------------------------------------------------------
const people: Person[] = [];

// ⛔   Property 'country' is missing in type
// '{ name: string; }' but required in type 'Person'.ts(2345)
people.push({ name: 'Alice' });

// ------------------------------------------------------

interface Employee {
  id: number;
  name: string;
}

// ⛔️ Property 'name' is missing in type
// 'Developer' but required in type 'Employee'.ts(2420)
class Developer implements Employee {
  id = 1;
}

在第一个示例中，我们声明了person变量并只设置了它的name
属性，但是Person类型还需要一个country属性。

为必需的属性提供一个值

解决错误的一种方法是为该属性提供一个值country。

索引.ts


type Person = {
  name: string;
  country: string;
};

const person: Person = {
  name: 'Tom',
  country: 'Germany',
};

该person变量现在正确地满足该Person类型，因此错误已解决。

将属性标记为可选

解决此问题的另一种方法是将我们不想在对象上设置的属性标记为类型中的可选属性Person。

索引.ts


type Person = {
  name: string;
  country?: string; // 👈️ mark optional
};

const person: Person = {
  name: 'Tom',
};

我们使用
问号country将类型中的属性
设置Person为可选。

这意味着它可以是类型string或具有值。 undefined

错误消息通常会指出缺少哪个属性，因此一种调试方法是查看变量的类型并查看是否包含指定的属性。

将包含所有必需属性的对象传递给函数

如果您正在调用具有对象参数的函数，请确保设置该对象类型所需的所有属性。

索引.ts


type Person = {
  name: string;
  country: string;
};

function getPerson(person: Person) {
  return person;
}

// ⛔️   Property 'country' is missing in type
// '{ name: string; }' but required in type 'Person'.ts(2345)
getPerson({ name: 'Tom' });

country函数调用中缺少该属性getPerson。

要解决该错误，我们必须将country属性添加到对象或在类型别名上将其标记为可选。

索引.ts


type Person = {
  name: string;
  country: string;
};

function getPerson({ name, country = '' }: Person) {
  return { name, country };
}

getPerson({ name: 'Tom', country: 'Germany' });

定义类型或接口所需的所有属性和方法

如果您有一个
实现接口的类，请确保定义该接口所需的所有属性和方法。

索引.ts


interface Employee {
  id: number;
  name: string;
}

// ⛔️ Property 'name' is missing in type
// 'Developer' but required in type 'Employee'.ts(2420)
class Developer implements Employee {
  id = 1;
}

该类Developer实现Employee
接口，因此它必须定义所需的name属性。

索引.ts


interface Employee {
  id: number;
  name: string;
}

class Developer implements Employee {
  constructor(public id: number, public name: string) {
    this.id = id;
    this.name = name;
  }
}

确保你的类型和接口的名称不与全局变量冲突

如果我们使用与全局定义的接口或来自第三方模块的名称冲突的名称定义类型或接口，有时会发生该错误。

如果您注意到一条奇怪的错误消息，其中包含您不认识的属性和方法名称，请尝试重命名您的接口或类型别名。

React.js: 属性在类型中缺失但在类型中是必需的

当我们没有将所有必需的道具传递给组件时，会发生 React.js 错误“类型中缺少属性但类型中需要”。

要解决该错误，请确保传递组件所需的所有道具或将其道具标记为可选。

类型中缺少但类型中需要的属性

下面是错误如何发生的示例。

应用程序.tsx


import React from 'react';

type BoxProps = {
  children: React.ReactNode;
  name: string; // 👈️ required
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <div>{props.children}</div>
      <div>{props.name}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ⛔️ Error: Property 'name' is missing in type
       '{ children: Element; }' but required in type 'BoxProps'.ts(2741)
      */}
      <Box>
        <div>Hello world</div>
      </Box>
    </div>
  );
};

export default App;

组件Box有一个name类型为stringrequired的prop，但是我们在使用Box组件的时候App，没有给它传递name
prop，所以就出现了这个错误。

请注意上面的错误消息是如何用下划线显示导致错误的组件的。

将所有必需的道具传递给组件

要解决该错误，请确保在使用该组件时传递所有必需的道具。

应用程序.tsx


import React from 'react';

type BoxProps = {
  children: React.ReactNode;
  name: string;
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <div>{props.children}</div>
      <div>{props.name}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ✅ All props passed to component */}
      <Box name="James Doe">
        <div>Hello world</div>
      </Box>
    </div>
  );
};

export default App;

If your component doesn’t take a children prop, use it as
<MyComponent myProp="value" />.

App.tsx


type BoxProps = {
  name: string;
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <div>{props.name}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ✅ All props passed to component */}
      <Box name="James Doe" />
    </div>
  );
};

export default App;

# Mark non-essential props as optional

An alternative solution is to mark any of the props, you don’t intend to pass
all of the time as
optional.

App.tsx


type BoxProps = {
  name: string;
  language?: string; // 👈️ mark optional
  country: string;
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.language}</div>
      <div>{props.country}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ✅ Didn't have to pass language prop */}
      <Box name="James Doe" country="Germany" />
    </div>
  );
};

export default App;

We marked the language property in the BoxProps type as optional.

This means that the property can either have a value of type string or be undefined, so we aren’t required to provide it every time we use the component.

# Use the `any` type to disable type checking

If you don’t know what the types of all of the props your component takes are
and would like to turn off type checking, use any as the type of the props.

App.tsx


const Box = (props: any) => {
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.language}</div>
      <div>{props.country}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ✅ Type checking is off, can pass any props */}
      <Box name="James Doe" country="Germany" hello="world" />
    </div>
  );
};

export default App;

By using the any type we turn off type checking, so we can pass any props to
the Box component without getting any errors.

# Use default values for non-essential props

You can also use default values when defining the props object of a component.

App.tsx


type BoxProps = {
  name?: string; // 👈️ mark optional
  language: string;
  country?: string; // 👈️ mark optional
};

const Box = ({name = 'James Doe', language, country = 'Germany'}: BoxProps) => {
  return (
    <div>
      <div>{name}</div>
      <div>{language}</div>
      <div>{country}</div>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ✅ Didn't have to pass name and country props */}
      <Box language="TypeScript" />
    </div>
  );
};

export default App;

Notice that we marked the name and country properties as optional in the
BoxProps type.

We set default values for the two properties in the Box component, so if we
don’t explicitly provide values for the name and country props, the default
values will be used.

I’ve also written a detailed guide on
how to use create-react-app with TypeScript.

类型“X”中缺少属性，但类型“Y”中需要属性

目录

Property is missing in type ‘X’ but required in type ‘Y’

属性在类型 ‘X’ 中缺失，但在类型 ‘Y’ 中是必需的

为必需的属性提供一个值

将属性标记为可选

将包含所有必需属性的对象传递给函数

定义类型或接口所需的所有属性和方法

确保你的类型和接口的名称不与全局变量冲突

React.js: 属性在类型中缺失但在类型中是必需的

将所有必需的道具传递给组件

# Mark non-essential props as optional

# Use the `any` type to disable type checking

# Use default values for non-essential props

目录

Property is missing in type ‘X’ but required in type ‘Y’

属性在类型 ‘X’ 中缺失，但在类型 ‘Y’ 中是必需的

为必需的属性提供一个值

将属性标记为可选

将包含所有必需属性的对象传递给函数

定义类型或接口所需的所有属性和方法

确保你的类型和接口的名称不与全局变量冲突

React.js: 属性在类型中缺失但在类型中是必需的

将所有必需的道具传递给组件

# Mark non-essential props as optional

# Use the any type to disable type checking

# Use default values for non-essential props

# Use the `any` type to disable type checking