typescript-infer

介绍

TypeScript是一种静态类型检查器，它可以识别代码中的错误并提供更好的代码提示。它是JavaScript的超集，可以使代码更加健壮和易于维护。在TypeScript 2.8版本中，引入了一个新的关键字“infer”。这个关键字可以帮助我们从函数返回的类型中推断出参数的类型。

Infer的用法

Infer关键字通常与条件类型一起使用。条件类型是一种新的类型语法，它允许根据类型关系的真实性来选择不同的类型。它的语法是“T extends U ? X : Y”。如果T可以赋值给U，那么这个类型为X，否则为Y。

Infer关键字可以用在条件类型中，用于从函数返回的类型中推断出参数的类型。例如，我们可以使用Infer关键字来推断函数的第一个参数的类型。这个参数是一个函数，它返回一个类型。

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

在这个例子中，ReturnType类型接受一个泛型参数T，它是一个函数类型。如果T可以赋值给一个接受任何参数并返回一个类型的函数，那么ReturnType类型就会返回这个函数的返回类型。

Infer的实际应用

Infer关键字的一个实际应用是在React中使用HOC（高阶组件）。HOC是一个返回新组件的函数，这个组件可以包装其他组件，从而提供一些通用的行为或状态。通常情况下，HOC会接受一个组件作为参数，并返回一个新的组件。

jsx

function withLoading<P>(Component: React.ComponentType<P>) {
  return function WithLoading(props: P & { isLoading: boolean }) {
    const { isLoading, ...rest } = props;
    if (isLoading) {
      return <div>Loading...</div>
    }
    return <Component {...rest} />
  }
}

在这个例子中，我们定义了一个名为withLoading的函数，它接受一个React组件作为参数，并返回一个新的组件。这个新组件会在组件渲染之前检查isLoading属性。如果isLoading属性为真，它会显示一个“Loading…”文本，否则将渲染原始组件。

在这个例子中，我们使用了Infer关键字来推断原始组件的属性类型。我们可以通过以下方式使用withLoading函数：

jsx

type Props = { name: string, age: number };
const MyComponent = ({ name, age }: Props) => {
  return <div>{name}, {age}</div>;
};

const MyComponentWithLoading = withLoading(MyComponent);

在这个例子中，我们定义了一个名为MyComponent的组件，它接受两个属性：name和age。我们使用MyComponentWithLoading来包装MyComponent，并将其赋值给一个新的变量。在这个过程中，我们使用了Infer关键字来推断MyComponent的属性类型。

总结

Infer关键字是TypeScript 2.8中一个非常有用的特性。它可以帮助我们从函数返回的类型中推断参数的类型，并使我们的代码更加健壮和易于维护。在实际应用中，我们可以使用它来推断组件的属性类型，并在高阶组件中使用它来增强组件的功能。