这篇主要是介绍“详解TypeScript类型操作的相关基础知识有哪些”的内容了，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家解决详解TypeScript类型操作的相关基础知识有哪些的问题，下面我们一起来了解看看吧。

类型操作的补充

类型断言的使用

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（ Type Assertions）。

比如我们在操作DOM的时候, 通过 document.getElementById 获取元素， TypeScript只知道该函数会返回HTMLElement ，但并不知道它具体的类型, 是无法得知具体是img还是div等等：

当我们加上类型断言后, TypeScript就可以得知具体的类型信息

const el = document.getElementById("app") as HTMLImageElement

el.src = "图片地址"

TypeScript只允许类型断言转换为 更具体 或者 不太具体(指的是any和unknown)的类型版本，此规则可防止不可能的强制转换：

如下直接转是会报错的

我们可以先将message转为any或者unknown, 再转为number, 但是不推荐这样做

const message = "Hello World"
const num: number = (message as any) as number

非空类型的断言

当我们编写下面的代码时，在执行ts的编译阶段会报错：

这是因为传入的message有可能是为undefined的，这个时候是不能执行方法的；

// 参数为可选类型的时候
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，如果存在，那么才会继续执行；

虽然可选链操作是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类型；

类似于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 World"
let num: 123 = 123

// 不能是其他的值
// message = "Hello"

那么这样做有什么意义呢？

默认情况下这么做是确实是没有意义的；

但是我们可以让多个字面量类型 结合 联合类型在一起, 就有了意义

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

align = "right"
align = "center"

字面量推理介绍

我们来看下面的代码：

由于我们的对象再进行字面量推理的时候，options其实是一个 {url: string, method: string}，而request的methods是字面量类型Method, 所以我们没办法将 一个 string 类型的值赋值给一个字面量类型, 因此编译阶段就会报错。

方式一: 当我们确定options对象的method没有写错的话, 我们可以使用类型断言(将宽泛的类型转为具体的类型), 如下:

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

方式二: 看起来有点奇怪, 但是是官方文档中提到的, 给对象添加as const

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

总结

“详解TypeScript类型操作的相关基础知识有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS创建执行上下文的过程和方法是什么

  创建一个执行分为两个阶段：创建阶段和执行阶段。创建阶段会发生三件事：绑定this指向，也被称为 This Binding、创建词法环境组件、创建变量环境组件。

• 基于vue如何实现单文件组件，具体过程是什么

  整个项目结构清晰,尤其单文件组件的表现力尤为突出,使得每个组件的逻辑都没有过于复杂,所以这篇文章主要给大家介绍了关于vue实现一个单文件组件的相关资料,需要的朋友可以参考下

• React hooks优缺点是啥，状态不同步怎么办

  这篇文章主要介绍了React hooks的优缺点详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

• ES6扩展运算符是什么，具体用法是怎样

  es6新增加了一个运算符,叫做扩展运算符,这个运算符用在数组前面,会把数组展开变成各个独立的值,这篇文章主要给大家介绍了关于ES6扩展运算符的相关资料,需要的朋友可以参考下

• Bootstrap网格系统如何工作，单元格宽度怎样设置

  栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下