typescript新特性-TypeScript句子解释类型操作的补充

目录摘要

使用互补类型首选项进行类型操作

有时TypeScript很难获取具体的类型信息，所以我们需要使用类型断言（TypeAssertions）。

比如我们操作DOM的时候，是通过document.getElementById来获取元素的。 TypeScript 只知道该函数将返回 htmlElement，但不知道其具体类型。 很难知道具体编程酒店是img还是div等：

当我们添加类型断言后，TypeScript 就可以知道具体的类型信息

const el = document.getElementById("app") as HTMLImageElement
el.src = "图片地址"

TypeScript 只允许类型断言转换为更具体或不太具体（指任何和未知）的类型版本。 该规则可以防止不可能的强制：

如果直接如下转的话会报错

我们可以先将message转换为any或unknowntypescript新特性，然后再转换为number，不推荐这样做

const message = "Hello World"
const num: number = (message as a编程客栈ny) as number

非空类型的断言

当我们编译如下代码时typescript新特性，执行ts的编译阶段会报错：

这是因为传入的消息可能是未定义的，此时无法执行；

// 参数为可选类型的时候
function printMessage(message?: string) {
  console.log(message.toUpperCase())
}
printMessage("aaa")

我们确定里面代码传入的参数有值，编译还是失败。 这时我们可以使用非空类型来判断：

非空断言使用!，表示可以判断某个标识符有值，跳过了编译阶段对ts的测量，虽然逃过了编译阶段的检测，但代码仍然不精确;

function printMessage(message?: string) {
  // 加上 ! 代表着保证这个message一定是有值的
  console.log(message!.toUpperCase())
}
printMessage("aaa")

可选链简介

可选链实际上并不是 TypeScript 特有的功能，它是 ES11 (ES2020) 中的一个简化功能：

可选链接使用可选链接运算符 ?.;

它的作用是当对象的属性不存在时，不会执行泄漏表达式的旁边，直接返回undefined。 如果存在，则python可以继续执行；

事实上，可选链操作是ECMAScript提出的一个特性，它与TypeScript一起使用来更新版本；

例如我们定义如下对象

type Person = {
  name: string
  friend?: {
    name: string
    age?: number
  }
}
const info: Person = {
  name: "chenyq"
}

当我们在其他地方获取对象的属性时，意味着name属性一定是可用的，但是friend属性可能不可用

console.log(info.name)
// 表示friend有值的情况下再取name或者age, 没有值就是undefined, 代码不会报错
console.log(info.friend?.name)
console.log(info.friend?.age)

两个特殊操作员

有时我们会看到！！ 和 ？？ 运营商，这些是做什么的？

这 ！！ 和 ？？ 运算符也是 JavaScript 的功能，但不是 TypeScript 句子模式。

!! 操作员：

将其他类型转换为布尔类型；

类似于Boolean（变量）的形式；

例如，如果我们想将message转换为boolean类型，然后将形式参数传递给flag，我们有两种方法

const message = "Hello World"
// 方式一: 通过Boolean(变量)的方式
let flag1 = Boolean(message)
console.log(flag1) // true
// 方式二: 通过 !! 操作符
let flag2 = !!message 
console.log(flag2)

是ES11降压的新特性；

空合并运算符 (??) 是逻辑运算符。 当运算符右边为null或undefined时，返回两边的操作数，否则返回两边的操作数；

let message: string|null = null
// 当message没有值时, 将??操作符右边的默认值赋值给content
// 当message有值时, 将message的值赋值给content
const content = message ?? "我是默认值"
console.log(content) // 我是默认值

文字类型简介

不仅是我们后面要讲的类型，还有字面量类型（literal types）：

文字类型必须与其值一致

// "Hello World"是可以作为类型的, 这个就叫字面量类型
let message: "Hello World" = "Hello Worpythonld"
let num: 123 = 123
// 不能是其他的值
// message = "Hello"

这样做有什么意义呢？

默认情况下这样做确实没有意义；

我们可以将多个文字类型与联合类型组合起来，这是有道理的

// 例如我们用一个变量来保存对齐方式
let align: "left" | "right" | "center" = "left"
align = "right"
align = "center"

文字推理简介

我们看下面的代码：

因为当我们的对象进行字面推断时，虽然options是一个{url:string,method:string}，而且请求的方法都是字面类型的Method，所以我们没有办法把一个string类型的值参数给A字面类型，所以在编译阶段就会报错。

形式1：当我们确定options对象的方法正确时，我们可以使用类型断言（将通用类型转换为特定类型），如下：

// 使用类型断言
request(options.url, options.methods as Method)

方法二：看起来有点奇怪，官方文档里有提到，在对象中添加asconst

const options = {
  url: "http://aaa.org",
  methods: "POST"
} as const 

总结

关于TypeScript句型解释的补充类型操作的这篇文章到此结束。 更多关于TypeScript类型操作的补充内容，请搜索我们之前的文章或者继续浏览下面的相关文章。 希望大家今后多多支持我们！

本文标题：TypeScript句子解释的类型操作补充