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

概述

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

接下来看看如何通过泛型参数默认将以下react组件从js(和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 name="world" />

渲染上面组件会生成以下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的类型参数

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

但是,现在使用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编译器选项,它支持许多与更严格的类型检查相关的其他编译器选项。

TypeScript 加入的新检查项为了避免不兼容现有项目通常都是默认关闭的。虽然避免不兼容是好事,但这个策略的一个弊端则是使配置最高类型安全越来越复杂,这么做每次 TypeScript 版本发布时都需要显示地加入新选项。有了--strict编译选项,就可以选择最高级别的类型安全(了解随着更新版本的编译器增加了增强的类型检查特性可能会报新的错误)。

新的--strict编译器选项包含了一些建议配置的类型检查选项。具体来说,指定--strict相当于是指定了以下所有选项(未来还可能包括更多选项):

  • --strictNullChecks
  • --noImplicitAny
  • --noImplicitThis
  • --alwaysStrict

未来的 TypeScript 版本可能会在这个集合中添加额外的类型检查选项。这意味着咱们不需要监控每个 TypeScript 版本来获得应该在项目中启用的新严格性选项。如果向上述选项集添加了新选项,则在升级项目的 TypeScript 版本后,它们将自动激活。

--strict编译选项会为以上列出的编译器选项设置默认值。这意味着还可以单独控制这些选项。比如:

--strict --noImplicitThis false

或者在tsconfig.json文件指定:

{
  "strict": true,
  "alwaysStrict": false
}

这将是开启除--noImplicitThis编译选项以外的所有严格检查选项。使用这个方式可以表述除某些明确列出的项以外的所有严格检查项。换句话说,现在可以在默认最高级别的类型安全下排除部分检查。

改进的--init输出

除了默认的--strict设置外,tsc --init还改进了输出。tsc --init默认生成的tsconfig.json文件现在包含了一些带描述的被注释掉的常用编译器选项. 你可以去掉相关选项的注释来获得期望的结果。我们希望新的输出能简化新项目的配置并且随着项目成长保持配置文件的可读性。

通过tsc --init编译器可以为构建一个配置文件:

$ tsc --init

message TS6071: Successfully created a tsconfig.json file.

运行此命令后,会当前工作目录中生成一个tsconfig.json文件,生成的配置如下所示:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                       /* Allow JavaScript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true                            /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

注意--strict是默认启用的。这意味着在启动一个新的TypeScript项目时,自动进入默认模式。

--checkJS选项下.js文件中的错误

即便使用了--allowJs,TypeScript 编译器默认不会报.js文件中的任何错误。TypeScript 2.3 中使用--checkJs选项,.js文件中的类型检查错误也可以被报出.

你可以通过为它们添加// @ts-nocheck注释来跳过对某些文件的检查,反过来你也可以选择通过添加// @ts-check注释只检查一些.js文件而不需要设置--checkJs编译选项。你也可以通过添加// @ts-ignore到特定行的一行前来忽略这一行的错误.

.js文件仍然会被检查确保只有标准的 ECMAScript 特性,类型标注仅在.ts文件中被允许,在.js中会被标记为错误。JSDoc注释可以用来为你的 JS 代码添加某些类型信息,

以上就是TypeScript泛型参数默认类型和新的strict编译选项的详细内容,更多关于TypeScript的资料请关注我们其它相关文章!

时间: 2021-05-03

详解TypeScript中的类型保护

概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim();

前端深入理解Typescript泛型概念

首先介绍一下泛性的概念 泛型程序设计(generic programming)是程序设计语言的一种风格或范式.泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型. 泛型是指在定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性. 先举一个简单的例子 假设我们定义一个函数,它可以接收一个number类型做为参数,并且返回一个number类型. function genericDemo(data: number):

TypeScript在React项目中的使用实践总结

序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

JS装饰者模式和TypeScript装饰器

装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

Vue3+TypeScript封装axios并进行请求调用的实现

不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中使用TypeScript虽然短期内会增加一些开发成本,但是对于其需要长期维护的项目,TypeScript能够减少其维护成本,使用TypeScript增加了代码的可读性和可维护性,且拥有较为活跃的社区,当居为大前端的趋势所在,那就开始淦起来吧~ 使用TypeScript封装基础axios库 代码如下: // http.ts import axios, { AxiosRequestConfig, AxiosRes

typescript编写微信小程序创建项目的方法

创建项目 在微信开发者工具创建项目,在语言中选择 TypeScript 改造项目 编辑 package.json 文件,修改 miniprogram-api-typings 和 typescript 版本 { "name": "miniprogram-ts-quickstart", "version": "1.0.0", "description": "", "scripts&

详解JavaScript私有类字段和TypeScript私有修饰符

JavaScript私有类字段和隐私需求 在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子 这是一个带有私有字段的 JavaScr

TypeScript 安装使用及基本数据类型

第一步 全局安装TypeScript 使用 npm 安装 npm install -g typescript 使用cnpm 安装 cnpm install -g typescript 使用yarn安装 yarn global add typescript 第二步 初始化TypeScript 在vscode里面 终端 >> 运行生成任务 >> tsc:监视tsconfig.json 接下来就可以开始我们的typescript旅程了~ TypeScript 的 基本数据类型 // 布尔

详解Typescript里的This的使用方法

this可以说是Javascript里最难理解的特性之一了,Typescript里的 this 似乎更加复杂了,Typescript里的 this 有三中场景,不同的场景都有不同意思. this 参数: 限制调用函数时的 this 类型 this 类型: 用于支持链式调用,尤其支持 class 继承的链式调用 ThisType: 用于构造复杂的 factory 函数 this 参数 由于 javascript 支持灵活的函数调用方式,不同的调用场景,this 的指向也有所不同 作为对象的方法调用

详解python里使用正则表达式的分组命名方式

详解python里使用正则表达式的分组命名方式 分组匹配的模式,可以通过groups()来全部访问匹配的元组,也可以通过group()函数来按分组方式来访问,但是这里只能通过数字索引来访问,如果某一天产品经理需要修改需求,让你在它们之中添加一个分组,这样一来,就会导致匹配的数组的索引的变化,作为开发人员的你,必须得一行一行代码地修改.因此聪明的开发人员又想到一个好方法,把这些分组进行命名,只需要对名称进行访问分组,不通过索引来访问了,就可以避免这个问题.那么怎么样来命名呢?可以采用(?P<nam

详解python里使用正则表达式的全匹配功能

详解python里使用正则表达式的全匹配功能 python中很多匹配,比如搜索任意位置的search()函数,搜索边界的match()函数,现在还需要学习一个全匹配函数,就是搜索的字符与内容全部匹配,它就是fullmatch()函数. 例子如下: #python 3.6 #蔡军生 #http://blog.csdn.net/caimouse/article/details/51749579 # import re text = 'This is some text -- with punctua

详解Python里使用正则表达式的ASCII模式

ASCII ASCII(American Standard Code for Information Interchange),是一种单字节的编码.计算机世界里一开始只有英文,而单字节可以表示256个不同的字符,可以表示所有的英文字符和许多的控制符号.不过ASCII只用到了其中的一半(\x80以下),这也是MBCS得以实现的基础. 目前,基本上都使用python3来开发了,但是有时为了兼容旧的python2的代码,在正则表达式里主要是字符串的表示方式不同了,在python3里是使用Unicode

详解Typescript 内置的模块导入兼容方式

一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

详解六种减小Docker镜像大小的方法

我从2017年做Vulhub开始,一直在和一个麻烦的问题做斗争:在编写Dockerfile的时候, 如何减小 docker build 生成的镜像大小 ?这篇文章就给大家总结一下我自己使用过的六种减小镜像大小的方法. 1. 使用Alpine Linux Alpine Linux是一个基于BusyBox和Musl Libc的Linux发行版,其最大的优势就是小.一个纯的基础Alpine Docker镜像在压缩后仅有2.67MB. 不少Docker官方镜像都有Alpine版本,比如PHP: 比较之下

详解Swift model 解析的两种方法

详解Swift model 解析的两种方法 1. 常规解析方法 //懒加载声明一个LJNewsModel为数据的数组 lazy var ljArray : [LJNewsModel] = [LJNewsModel]() //MARK:-- 数据获取和解析 extension NewsViewController{ func requestNetData(){ /* 打印json数据 */ LJDownLoadNetImage.request("GET", url: "http

详解PHP处理字符串类似indexof的方法函数

详解PHP处理字符串类似indexof的方法函数 在PHP中处理字符串类似 indexof 的函数或方法有两个,它们是 strpos 函数和 stripos 函数,这两个函数的用法类似. strpos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写敏感. stripos 函数处理字符串时如果包含该字符串,则返回该字符串出现的第一次出现的位置,如果没有出现则返回 false.对字符串大小写不敏感. PHP strpos() 函

详解Spring mvc ant path的使用方法

详解Spring mvc ant path的使用方法 概要: 任何一个WEB都需要解决URL与请求处理器之间的映射,spring MVC也是一样,但Spring MVC就像Spring所作的一切一样(灵活,可以配置各种东西,但是也造成了很多复杂性),肯定不会只有一种方法来映射URL和 Controller之间的关系,并且在实际上,允许你自己创建映射规则和实现,而不仅仅依赖URL映射. 1.Spring path match Spring MVC中的路径匹配要比标准的web.xml要灵活的多.默认

详解Java注解的实现与使用方法

详解Java注解的实现与使用方法 Java注解是java5版本发布的,其作用就是节省配置文件,增强代码可读性.在如今各种框架及开发中非常常见,特此说明一下. 如何创建一个注解 每一个自定义的注解都由四个元注解组成,这四个元注解由java本身提供: @Target(ElementType.**) 这是一个枚举,它置顶是该自定义的注解使用的地方,像类.变量.方法等 @Retention(RetentionPolicy.**)作用是标明注解保存在什么级别,像在编译时.class文件中,vm运行中 @D

详解Android使用@hide的API的方法

详解Android使用@hide的API的方法 今天早上想修改MediaPlaybackService.Java(/packages/apps/Music)的代码. 将AudioManager.STREAM_MUSIC改成AudioManager.STREAM_TTS. 发现AudioSystem.java(/frameworks/base.media/java/Android/media) /* @hide The audio stream for text to speech (TTS) *