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的资料请关注我们其它相关文章!

(0)

相关推荐

  • 前端深入理解Typescript泛型概念

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

  • 详解Typescript里的This的使用方法

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

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

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

  • 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 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim();

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

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

  • JS装饰者模式和TypeScript装饰器

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

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

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

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

    概述 TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型. 接下来看看如何通过泛型参数默认将以下react组件从js(和jsX)迁移到 TypeScript (和TSX): class Greeting extends react.Component { render() { return <span>Hello, {this.props.name}!</span>; } } 为组件类创建类型定义 咱们先从为Component类

  • 关于对TypeScript泛型参数的默认值理解

    目录 泛型简介 举个 举个 泛型参数的默认值——函数重载 泛型参数的默认值——正文 参考 泛型简介 软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C# 和 Java 这样的语言中,可以使用 泛型 来创建可重用的组件,一个组件可以支持多种类型的数据. 这样用户就可以以自己的数据类型来使用组件. 举个 举个最简单的例子来理解泛型 function getVal(

  • typeScript 泛型使用和泛型接口结合

    目录 1.泛型是啥? 2.泛型类型 3.泛型接口 4.泛型类 5.泛型约束 6.泛型参数默认类型 7.泛型条件类型 typeScript 中新增的泛型概念.泛型使用.泛型与接口结合: 在实际应用中可能会遇到求最小值的问题,比如求数组中的最小值. 在 ts 中的就需要写两种方式,一种针对 number,另外一种针对字符串. 这样写不利于代码重用,项目较大时,性能较差,同时工作效率也低,所以在 ts 中引入了泛型概念. function getMin1(arr:number[]):number {

  • Java8新特性之泛型的目标类型推断_动力节点Java学院整理

    简单理解泛型 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.通俗点将就是"类型的变量".这种类型变量可以用在类.接口和方法的创建中. 理解Java泛型最简单的方法是把它看成一种便捷语法,能节省你某些Java类型转换(casting)上的操作: List<Apple> box = new ArrayList<Apple>(); box.add(new Apple());Apple apple =box.ge

  • java 用泛型参数类型构造数组详解及实例

    java 用泛型参数类型构造数组详解及实例 前言: 前一阵子打代码的时候突然想到一个问题.平时我们的数组都是作为一个参数传入方法中的,如果我们要想在方法中创建一个数组怎么样呢?在类型明确的情况下,这是没什么难度的.如果我们传入的参数是泛型类型的参数呢? public static <T> T[] creArray (T obj){ T[] arr = new T[10]; } 像上面这种用T来直接new数组的方法是错误的,会编译时出现一个:Cannot create a generic arr

  • Python 限定函数参数的类型及默认值方式

    python作为一门动态语言,在使用变量之前是不需要进行定义,而是通过动态绑定的方法将变量绑定为某种类型.这样做为我们使用变量时提供了方便,但有时也给我们使用变量时造成了一定的困扰,例如在使用变量时不知道变量的类型,使用函数时不知道该传什么类型·的参数.有时候我们定义函数时也想限定参数类型,本片博文主要就是为了解决定义函数时,如何限定参数的类型. 其实在python中限定函数的类型是很简单的,例如: def foo(text:'str',max:'int > 0' = 100,min:'int

  • TypeScript泛型约束条件示例详解

    目录 什么是泛型 泛型的应用场景 泛型约束(限制条件) 泛型函数调用指定类型 总结 什么是泛型 两个值之间存在的对应关系,就可以用泛型来解决 泛型的应用场景 当一个函数的返回值的类型需要与此函数的参数类型想关联的时候,就需要使用泛型 例如 //约定此函数调用时必须传入一个数组,并返回数组第一项 function arrFn <T> (arr: T[]) :T|undefined { return arr[0] } const n = arrFn([1,2]) //number类型 const

  • 深入了解TypeScript中的映射类型

    目录 1. 基本概念 (1)索引访问类型 (2)索引签名 (3)联合类型 (4)keyof 类型运算符 (5)元组类型 (6)条件类型 2. 映射类型 (1)初体验 (2)概念 (3)实例 3. 实用程序中的映射 (1)Partial (2)Exclude 4. 构建映射类型 DRY 原则(Don't repeat yourself)是软件开发中最重要的原则之一,即不要重复自己.应该避免在代码中的两个或多个地方存在重复的业务逻辑. 在 TypeScript 中,映射类型可以帮助我们避免编写重复的

  • TypeScript 内置高级类型编程示例

    目录 TypeScript 类型编程 TypeScript 内置高级类型 Pick<Type, Keys> Exclude<UnionType, ExcludedMembers> ReturnType<Type> 更多类型体操学习 TypeScript 类型编程 TypeScript 的类型系统,最基本的是简单对应 JavaScript 的 基本类型,比如 string.number.boolean 等,然后是新增的 tuple.enum.复合类型.交叉类型.索引类型等

随机推荐