美文网首页
6个 TS新特性

6个 TS新特性

作者: 抽疯的稻草绳 | 来源:发表于2021-08-21 11:32 被阅读0次

在构造函数中直接定义属性

Typescript 中可以通过构造函数的参数直接定义属性,我们来先看早期的做法:

class Note {
  public title: string;
  public content: string;
  private history: string[];

  constructor(title: string, content: string, history: string[]) {
    this.title = title;
    this.content = content;
    this.history = history;

  }
}

采用 ts 中简写的语法:

class Note {
  constructor(
     public title: string, 
     public content: string, 
     private history: string[]
  ){
    // 这里不用在写 this.title = title
  }
}

它可能看上去不像是有属性的类,但它确实有,利用的是 Typescript 提供的简写形式 — 用构造函数的参数直接定义属性。

这个简写语法做了很多:

  • 声明了一个构造函数参数及其类型
  • 声明了一个同名的公共属性
  • 当我们 new 出该类的一个实例时,把该属性初始化为相应的参数值

空值合并

??其实没啥意思,就是Nullish Coalescing (空值合并)。听起来有点懵,我们直接上代码

const i = undefined
const k = i ?? 5
console.log(k) // 5

// 3.9.2编译
const i = undefined;
const k = i !== null && i !== void 0 ? i : 5;
console.log(k); // 5

这个时候你肯定是想说了这样不就完了吗?

let k = i || 5

虽然这样也用,但是你不觉得很不严谨吗?如果i = 0呢?

私有类字段

TypeScript 3.8 将支持 ECMAScript 私有字段,千万别和 TypeScript private 修饰符 混淆。

这是在 TypeScript 中具有私有类字段的类:

class Animal {
  #name: string;
  constructor(theName: string) {
    this.#name = theName;
  }
}

在private关键字之上使用私有类字段的区别在于前者有更好的运行时保证。用private关键字声明的 TypeScript 字段将在编译后的JavaScript代码中成为常规字段。另一方面,私有类字段在编译后的代码中仍然是私有的。

试图在运行时访问私有类字段将导致语法错误。我们也使用浏览器开发工具也检查不了私有类字段。

有了私有类字段,我们终于在JavaScript中得到了真正的隐私。

命名元组类型(Labeled tuple types)

命名元组类型适需要 TypeScript 4.0及以上版本才能使用,它极大的改善了我们的开发体验及效率,先来看一个例子:

type Address = [string, number]

function setAddress(...args: Address) {
  // some code here
  console.log(args)
}

当我们这样定义函数入参后,在使用函数时,编辑器的智能提示只会提示我们参数类型,丢失了对参数含义的描述。

这 6 个 TS 新特性经常用到,用了之后我再也离不开它

为了改善这一点,我们可以通过 Labeled tuple types,我们可以这样定义参数:

type Address = [streetName: string, streetNumber: number]

function setAddress(...args: Address) {
  // some code here
  console.log(args)
}

这 6 个 TS 新特性经常用到,用了之后我再也离不开它

这样,在调用函数时,我们的参数就获得了相应的语义,这使得代码更加容易维护。

模板字面量类型

自 ES6 开始,我们就可以通过模板字面量(Template Literals)的特性,用反引号来书写字符串,而不只是单引号或双引号:

const message = `text`;

正如 Flavio Copes 所言,模板字面量提供了之前用引号写的字符串所不具备的特性:

  • 定义多行字符串非常方便
  • 可以轻松地进行变量和表达式的插值
  • 可以用模板标签创建 DSL(Domain Specific Language,领域特定语言)

模板字面量类型和 JavaScript 中的模板字符串语法完全一致,只不过是用在类型定义里面:

type topBottom = "top" | "bottom"
type leftRight = "left" | "right"

type Position = `${topBottom }-${leftRight }`

这 6 个 TS 新特性经常用到,用了之后我再也离不开它

当我们定义了一个具体的字面量类型时,TypeScript 会通过拼接内容的方式产生新的字符串字面量类型。

实用类型

TypeScript为你提供了一组实用类型,让你在现有类型的基础上构建新的类型。有许多实用类型涵盖了不同的情况,例如选择类型属性来复制,大写字母,或使所有的属性都是可选的。

下面是一个使用 Omit工具的例子,它复制了原始类型的所有属性,除了我们选择不包括的那些。

这 6 个 TS 新特性经常用到,用了之后我再也离不开它
type User = {
  name: string
  age: number
  location: string
}

type MyUser = Omit<User, 'name'>

相关文章

  • TS 函数新特性

    # 1:rest and spread操作符 --- ...args No 1 : 用来声明任意数量的方法参数 f...

  • 6个 TS新特性

    在构造函数中直接定义属性 Typescript 中可以通过构造函数的参数直接定义属性,我们来先看早期的做法: 采用...

  • TS 字符串新特性

    No 1:声明多行字符串: ` 这里面支持换行 ` No 2:字符串模板 : `I am ${变量名}` ,...

  • TS特性讲解

    安装 创建 tsdemo/.vscode/launch.json文件: 在命令行输入下面的命令,你会得到一个路径,...

  • vue3响应式--proxy

    vue3.0快发布了,也带来了很多新的特性,如新的监测设计,PWA,TS支持等,本节一起了解下新的监测原理。 旧的...

  • TS入门

    一、ts字符串新特性: 1.多行字符串: es5里直接换行会报错,必须加上+号 ,如var content = '...

  • typescript

    typescript ts暂时不被支持,所以需要编译使用;ts补充了js没有的语法特性,例如类型,接口,抽象等;由...

  • ts的interface特性

    interface 定义Person结构 interface Person {} type 定义Person结构...

  • 复习:ES6~ES12的一些新特性归纳(ES6)

    ES6相关的新特性(2015) 类class: 新建一个js/ts文件,可以在这个Class中的构造函数进行初始化...

  • JDK新特性书目录

    JDK1.4新特性 JDK1.5新特性 JDK1.6新特性 JDK1.7新特性 JDK1.8新特性

网友评论

      本文标题:6个 TS新特性

      本文链接:https://www.haomeiwen.com/subject/fuhfiltx.html