typescript 不定参数-这6个TS新功能经常用,用了就离不开了

今天给大家介绍一下TypeScript的一些较新的功能和发展,这些都是我在日常工作中经常用到的功能。

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

在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 提供的速记方式——直接使用构造函数参数定义属性。

这个缩写句型有很多作用:

空合并

?? 其实没什么意义,就是Nul​​lish Coalescing(空值合并)。听起来有点无知typescript 不定参数,我们直接上代码

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

这时候,你一定想说typescript 不定参数,这下完了吧?

let k = i || 5

虽然也是这样用的,但是不觉得不严谨吗? 如果我=0怎么办?

私有类数组

TypeScript 3.8 将支持 ECMAScript 私有数组,不要将它们与 TypeScript private 修饰符混淆。

这是一个包含 TypeScript 中的私有类数组的类:

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

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

尝试在运行时访问私有类数组将导致语法错误。 我们也无法使用浏览器开发人员工具检测私有类数组。

有了私有类数组,我们终于在 JavaScript 中拥有了真正的隐私。

带标签的元组类型

参数定积分_typescript 不定参数_参数定义

命名元组类型只能与TypeScript 4.0及以上版本一起使用,这极大地提高了我们的开发体验和效率。 我们来看一个反例:

type Address = [string, number]
function setAddress(...args: Address) {
  // some code here
  console.log(args)
}

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

为了改进这一点,我们可以传递 Labeled 元组类型,我们可以像这样定义参数:

type Address = [streetName: string, streetNumber: number]
function setAddress(...args: Address) {
  // some code here
  console.log(args)
}

参数定义_参数定积分_typescript 不定参数

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

模板文字类型

从ES6开始,我们可以利用模板字面量(Template Literals)的特性来书写带后冒号的字符串,而不仅仅是单冒号或双冒号:

const message = `text`;

正如 Flavio Copes 指出的那样,模板文字提供了用冒号编写的字符串以前没有的东西:

模板字面量类型与 JavaScript 中的模板字符串句型完全相同,但它在类型定义中使用:

type topBottom = "top" | "bottom"
type leftRight = "left" | "right"
type Position = `${topBottom }-${leftRight }`

当我们定义一个特定的字面量类型时,TypeScript 会通过拼接内容形成一个新的字符串字面量类型。

实用型

TypeScript 为您提供了一组实用程序类型,允许您基于现有类型构建新类型。 有许多实用程序类型涵盖不同的情况,例如选择要复制的类型属性、大写或使所有属性可选。

下面是使用“省略”工具的反例,该工具复制原始类型的所有属性(除了我们选择不包含的属性)。

type User = {
  name: string
  age: number
  location: string
}
type MyUser = Omit

上面这些是我工作中经常用到的一部分,其他的是之前分享过的,就这些吧?

~终于我是碗清洁工了,我要打架了,上期见。