TypeScript学习笔记2-联合类型、类型断言

联合类型

联合类型:顾名思义,简单的说就是多种类型联合起来

栗子1:运用在函数中

栗子2:运用在dom上(取不到值时可能为null类型)

栗子3:定时器是个常用例子

在TypeScript中,联合类型允许一个变量可以存储多种不同类型的值。通过使用竖线 来连接多个类型,创建联合类型的语法形式为`type1 | type2 | type3`。

类型断言

类型断言:简单来说就是人为将某一种不确定的类型断言为确定的类型,这只是在编译器层面的欺骗行为。

经典案例!

let img = document.getElementById("#img")

在底层原理中,document.getElementById返回的就是一个 HTMLElement | null 的值

这个时候,如果我们直接进行下面这个操作是会报错的

img.src = xxxx;
//或者
img.height = xxx;

因为null不能这样子去调用src或者height什么的。

但我们又难以避免对获得的元素的属性进行操作,这个时候就需要进行类型断言

let img = document.getElementById("#img") as HTMLImageElement
img.src = xxx;//没问题!

let img = <HTMLImageElement>document.getElementById("#img")
img.src = xxx;//没问题!

两种写法

  • as语法:value as Type (用的更多)
  • 尖括号语法:<Type>value

在TypeScript中,类型断言允许开发人员手动指定一个值的类型,即告诉编译器某个变量的确切类型。这在某些情况下是非常有用的,尤其是当开发人员比编译器更了解变量的类型时。

无论是尖括号语法还是as语法,它们实际上是告诉编译器"相信我,我知道这个变量的类型是什么"。

注意!:类型断言只在编译阶段起作用,不会对真实的运行时类型产生影响。因此,在进行类型断言时,应确保断言的类型是正确的,以避免潜在的类型错误。

相关推荐

  1. TypeScript 笔记——类型和接口

    2024-04-11 13:44:04       36 阅读
  2. TypeScipt 联合类型 | 号的使用

    2024-04-11 13:44:04       26 阅读
  3. 精进TypeScript--优先选择类型声明而不是类型断言

    2024-04-11 13:44:04       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-11 13:44:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-11 13:44:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-11 13:44:04       82 阅读
  4. Python语言-面向对象

    2024-04-11 13:44:04       91 阅读

热门阅读

  1. Linux 系统如何设置免密登录

    2024-04-11 13:44:04       37 阅读
  2. 山东济南教育投稿邮箱与投稿信箱

    2024-04-11 13:44:04       34 阅读
  3. PaddleOCR 图片日期识别

    2024-04-11 13:44:04       32 阅读
  4. Linux 文件比较工具

    2024-04-11 13:44:04       35 阅读
  5. 如何构建数据指标体系

    2024-04-11 13:44:04       34 阅读
  6. 设计模式-依赖倒置原则

    2024-04-11 13:44:04       33 阅读
  7. 设计模式(017)行为型之责任链模式

    2024-04-11 13:44:04       35 阅读
  8. jvm堆知识

    2024-04-11 13:44:04       35 阅读
  9. vue 配置 postcss-px2rem

    2024-04-11 13:44:04       36 阅读
  10. 数据分析 -- pandas

    2024-04-11 13:44:04       37 阅读
  11. 题目 3033: 放苹果

    2024-04-11 13:44:04       33 阅读
  12. 智能成绩表---重点 覆写comparator排序的compare函数

    2024-04-11 13:44:04       40 阅读