React+TypeScript教程之8 - 属性限制

由微软推出的TypeScript自从一推出就广受关注，现在无论开发前端React/Vue，还是后端API，很多项目中都广泛接受了TypeScript。下面介绍如何在TypeScript中限制传递的属性值。

TypeScript

使用场景

有些时候，需要在同一个组件中处理不同的类型。这些类型可能会有一些相同的属性，同时也有各自的属性。比如：对于Airplane和Ship而言，它们的共同属性包括：

• name
• speed

同时Airplane还有自己的独特属性：maxHeight；Ship也有自己的独特属性：displacement。也就是说，一旦传递过来的属性中有了maxHeight，就不能有displacement；反之亦然。

定义类型：

TypeScript

type VehicleType = {
  name: string
  speed: number
}

type Airplane = VehicleType & {
  maxHeight: number

  displacement?: never
}

type Ship = VehicleType & {
  displacement: number

  maxHeight?: never
}

type Vehicle = Airplane | Ship

在组件中使用类型

TypeScript

export default function Demo(props: Vehicle) {
  return <div>
    <p>name: {props.name}</p>
    <p>speed: {props.speed}</p>
    {
      props.maxHeight? (
        <p>maxHeight: {props.maxHeight}</p>
      ): ('')
    }
    {
      props.displacement? (
        <p>displacement: {props.displacement}</p>
      ): ('')
    }
  </div>;
}  

调用这个组件

TypeScript

function App() {
  return (
    <div className="App">
      <Demo
        name="Boeing 767"
        speed={4000}
        maxHeight={10000}
      />
      <hr/>
      <Demo
        name="Titanic"
        speed={2000}
        displacement={8000}
      />
    </div>
  );
}

如果想要通过如下方式调用，TS就会报错：

TypeScript

<Demo
  name="Boeing 767"
  speed={4000}
  maxHeight={10000}
  displacement={8000}
/>

其报错信息为：

TypeScript

Type '{ name: string; speed: number; maxHeight: number; displacement: number; }' is not assignable to type 'IntrinsicAttributes & Vehicle'.
  Type '{ name: string; speed: number; maxHeight: number; displacement: number; }' is not assignable to type '{ displacement: number; maxHeight?: undefined; }'.
    Types of property 'maxHeight' are incompatible.
      Type 'number' is not assignable to type 'undefined'.ts(2322)

也就是说，在这个时候TS期待的displacement类型为’undefined’，但我们却传递了一个number类型的值。