Typescript 类型推导 联合类型 类型别名 类型断言

简介: 本文介绍了 TS 中的类型推导,联合类型,类型别名和类型断言,属于 TS 的基本类型知识,也都是最常用的语法。

类型推导

Typescript 提供了类型声明,但在声明变量时,仍然可以像写 JS 那样,不用显式地提供类型,比如:

let n = 10

Typescript 提供了类型推导的能力,能自动推断出变量 n 的类型:

image-20220826161523288

所以此时 n 的类型就是 number 了。如果再给它赋值为其他类型的值,就会报错:

image-20220826161705604

如果声明变量时,既没有指定类型,又没有赋值,那么该变量的默认类型是 any

image-20220826162504199

对于 any 类型的变量,它可以接收任意类型的值,都不会报错:

let a;

a = 10;

a= 'hello';

联合类型

联合类型是由两个和以上其他类型组成的类型,比如:

let a: number | string;

变量 a 的值既可以是 number 类型,也可以是 string 类型:

a = 10;
a = ‘hello’;

在使用联合类型时,如果变量的值还没有确定,也就是此时存在多种可能性,此时只能访问联合类型中公共的属性和方法,比如:

image-20220826170748248

一旦联合类型的变量的值确定下来了,此时就只能访问对应类型的属性和方法了:

image-20220826170959957

类型别名

当有一个复杂的类型时,或者一个类型被频繁使用时,可以给该类型起一个别名,来简化使用。

比如声明一个描述人的对象,可以这么写:

let p: {name: string, age: number}= {
  name: "John",
  age: 20
}

但是如果要声明多个人时,就有点繁琐了。此时可以使用类型别名:

type Person = {
  name: string,
  age: number
}

let p: Person= {
  name: "John",
  age: 20
}

类型别名还经常和联合类型一起使用,比如:

type union = 'string' | 'number' | 'boolean'

之后,可以给变量 union 赋值这三种类型中的任意一种值。

let u1:union = 1
let u2:union = '2'
let u3:boolean = true

类型断言

Typescript 提供了足够多的类型,方便我们明确定义一个变量的类型。同时又具备类型推导的功能,可以快捷的从值来推导出变量的类型

但是对于一些构成复杂的值,Typescript 本身并没有足够的能力去推导出它的类型。

好在 TS 又提供了类型断言(Type Assertions) ,此时我们可以手动强制指定它的类型,这就好比是做了强制类型转换。

比如获取一个 dom 元素:

let root = document.getElementById('root')

此时 div 的类型有两种,HTMLDivElement 或者 null:

image-20220827092749771

此时可以使用类型断言语法,通过 as 关键字去指定特定的类型:

let root = document.getElementById('root') as HTMLElement

也可以在使用的时候去断言:

let root = document.getElementById('root');
(root as HTMLElement).innerText = 'Hello'

还可以使用 <> 语法来进行类型断言:

let root = <HTMLElement>document.getElementById('root');

但是这种语法在 React 中会被认为是一个 React 组件,所以不太使用。

小结

本文介绍了 TS 中的类型推导,联合类型,类型别名和类型断言,属于 TS 的基本类型知识,也都是最常用的语法。

目录
相关文章
|
1月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
8天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
19 4
|
12天前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
7天前
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
15 0
|
12天前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
1月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
1月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
37 0
|
1月前
|
JavaScript 安全
TypeScript(十一)泛型工具类型
TypeScript(十一)泛型工具类型
24 0
|
1月前
|
JavaScript 前端开发 编译器
TypeScript(五)类型别名及类型符号
TypeScript(五)类型别名及类型符号
27 0
|
1月前
|
JavaScript 前端开发
TypeScript(二)基本类型和特殊类型
TypeScript(二)基本类型和特殊类型
17 0