http://it.njjyzj.gov.cn

TypeScript泛型参数默认类型和新的strict编译选项_JavaScript_网络编程

概述

TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型。

接下来看看如何通过泛型参数默认将以下react组件从(和jsX)迁移到 TypeScript (和TSX):

class Greeting extends react.Component { render() { return <span>Hello, {this.props.name}!</span>; } }

为组件类创建类型定义

咱们先从为Component类创建类型定义开始。每个基于类的 React 组件都有两个属性:props和state,类型定义结构大致如下:

declare namespace React { class Component { props: any; state: any; } }

注意,这个是大大简化的示例,因为咱们是为了演示泛型类型参数及其默认值的内容。

现在就可以通过继承来调用上面定义的Component:

class Greeting extends React.Component { render() { return <span>Hello, {this.props.name}!</span> } }

咱们可以如下方式创建组件的实例:

<Greeting JSWMt/>

渲染上面组件会生成以下html:

<span>Hello, World!</span>

nice,继续。

使用泛型类型定义 Props 和 State

虽然上面的示例编译和运行得很好,但是咱们的 Component 类型定义不是很精确。因为咱们将props和state类型设置为any,所以 TypeScript 编译器也帮不上什么忙。

咱们得更具体一点,通过两种泛型类型:Props和State,这样就可以准确地描述props和state属性的结构。

declare namespace React { class Component <Props, State> { props: Props; state: State; } }

接着创建一个GreetingProps类型,该类型定义一个字符串类型name的属性,并将其作为Props类型参数的类型参数传递:

type GreetingProps = { name: string }; class Greeting extends React.Component<GreetingProps, any> { render() { return <span>Hello, {this.props.name}!</span>; } }

1)GreetingProps是类型参数Props的类型参数

2) 类似地,any是类型参数State的类型参数

有了这些类型,咱们的组件得到更好的类型检查和自动提示:

TypeScript泛型参数默认类型和新的strict编译选项

但是,现在使用React.Component类时就必需供两种类型。咱们开着的初始代码示例就不在正确地进行类型检查:

// Error: 泛型类型 Component<Props, State> // 需要 2 个类型参数。 class Greeting extends React.Component { render() { return <span编程客栈>Hello, {this.props.name}!</span>; } }

如果咱们不想指定像GreetingProps这样的类型,可以通过为Props和State类型参数提供any类型来修正代码:

class Greeting extends React.Component<any, any> { render() { return <span>Hello, {this.props.name}!</span>; } }

这种方法可以让编译器通过,但咱们还有更优雅的做法:泛型参数默认类型。

泛型参数默认类型

从 TypeScript 2.3 开始,咱们可以为每个泛型类型参数添加一个默认类型。在下面的例子中,如果没有显式地给出类型参数,那么Props和State都都是any类型:

declare namespace React { class Component<Props = any, State = any> { props: Props; state: State; } }

现在,咱们就可以不用指定泛型类型就可以通过编译器的检查:

class Greeting extends React.Component { render() { return <span>Hello, {this.props.name}!</span>; } }

当然,咱们仍然可以显式地为Props类型参数提供类型并覆盖默认的any类型,如下所示:

type GreetingProps = { name: string }; class Greeting extends React.Component<GreetingProps, any> { render() { return <span>Hello, {this.props.name}!</span>; } }

这两个类型参数现在都有一个默认类型,所以它们是可选的,咱们可以仅为Props指定显式的类型参数:

type GreetingProps = { name: string };

class Greeting extends React.Component<GreetingProps> { render() { return <span>Hello, {this.props.name}!</span>; } }

注意,咱们只提供了一个类型参数。但是,被省略可选类型参数前一个必须要指定类型,否则不能省略。

其它事例

在上一篇中关于 TypeScript 2.2 中混合类的文章中,咱们最初声明了以下两个类型别名:

type constructor<T> = new (...args: any[]) => T; type constructable = Constructor<{}>;

Constructable类型纯粹是语法糖。它可以代替Constructor<{}>类型,这样就不必每次都要写泛型类型参数。使用泛型参数默认值,就可以完全去掉附加的可构造类型,并将{}设置为默认类型

type Constructor<T = {}> = new (...args: any[]) => T;

语法稍微复杂一些,但是生成的代码更简洁,Good。

新的--strict主要编译选项

TypeScript 2.3 引入了一个新的--strict编译器选项,它支持许多与更严格的类型检查相关的其他编译器选项。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:Js模块打包exports require import的用法和区别_JavaScript_网络编程
下一篇:如何制作自己的原生JavaScript路由_JavaScript_网络编程