Young Kbt blog
Young Kbt
2022-09-07
目录

TypeScript - 基本类型

# 类型声明

  • 类型声明是 TS 非常重要的一个特点

  • 通过类型声明可以指定 TS 中变量（参数、形参）的类型

  • 指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

  • 语法：

    • let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
      1
      2
      3
      4
      5
      6
      7

  • 自动类型判断

    • TS 拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型
    • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

# 类型

类型 例子 描述
number 1, -33, 2.5 任意数字
string 'hi', "hi", hi 任意字符串
boolean true、false 布尔值 true 或 false
字面量 其本身 限制变量的值就是该字面量的值
any * 任意类型
unknown * 类型安全的 any
void 空值（undefined） 没有值（或 undefined）
never 没有值 不能是任何值
object {name:'孙悟空'} 任意的 JS 对象
array [1,2,3] 任意 JS 数组
tuple [4,5] 元素，TS 新增类型，固定长度数组
enum enum{A, B} 枚举，TS 中新增类型

# 数字

和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
1
2
3
4
5

# boolean

最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean（其它语言中也一样）。

let isDone: boolean = false;
1

# 字符串

JavaScript 程序的另一项基本操作是处理网页或服务器端的文本数据。像其它语言里一样，我们使用 string 表示文本数据类型。和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串。

let color: string = "blue";
color = 'red';
1
2

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围（ `），并且以 ${ expr } 这种形式嵌入表达式

let name: string = `Yee`
let age: number = 37
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`
1
2
3
4
5

这与下面定义 sentence 的方式效果相同：

let sentence: string = 'Hello, my name is ' + name + '.\n\n' +
    'I\'ll be ' + (age + 1) + ' years old next month.'
1
2

# 字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围。

let a1: 10;

a1 = 10; // 后面使用时不可修改，类似常量
// 可以使用 | 来连接多个类型（联合类型）
let b1: "male" | "female";
b1= "male";
b1= "female";

let c1 : boolean | string;
c1 = true;
c1 = 'hello';
1
2
3
4
5
6
7
8
9
10
11

# any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any 类型来标记这些变量。

any 类型就是跳过 TypeScript 的检查机制，恢复成 JavaScript 的语法机制，也就是用了 any 修饰的变量或者函数，都和 JavaScript 一样。

这样 any 修饰的变量，就能随意赋值，如数字，字符串都可以。

所以不建议使用 any，能不使用就不要使用，否则和直接使用 JavaScript 没啥区别。

let d: any;（显示的any）
// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d;
d = 10;
d = 'hello';
d = 'true';
1
2
3
4
5
6

# unknown

unknown 代表未知的类型，和 any 相似，实际上就是一个类型安全的 any。

let notSure: unknown = 4;
notSure = 'hello';
notSure = true
1
2
3

和 any 区别

any 修饰的变量能随便赋值给别的变量，从而让别的变量变成 any，具有 同化作用，所以有安全隐患，如

let d: any = 4;
let s: string = "s"
s = d // 此时 s 从 string 类型变成 any 类型
1
2
3

而 unknown 修饰的变量无法赋值给其他的变量，检查严格

let d: unknown = 4;
let s: string = "s"
s = d // 报错，因为 unknown 类型无法赋值给 string 类型
1
2
3

如果解决 unknown 赋值问题？

  • 通过 typeof 判断就不会有问题：
let d: unknown = 4;
let s: string = "s"

if (typeof e === "string") {
    s = e;
}
1
2
3
4
5
6

  • 通过 类型断言 可以用来告诉解析器变量的实际类型，这是一种欺诈行为，它告诉解析器该变量一定是某个类型。至于实际是不是，解析器已经无法判断了。

    /*
语法：
    变量 as 类型
    <类型>变量
*/
s = e as string;
s = <string>e;
    1
    2
    3
    4
    5
    6
    7

# void

void 用来表示空值，某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

function testVoid(): void {
  console.log('testVoid')
}
1
2
3

# never

never 类型表示的是那些永不存在的值的类型。例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。

never 类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。即使 any 也不可以赋值给 never。

它和 void 的区别在于：void 只是代表没有返回值，但「没有返回值」本身就是一种返回值，而 never 是完全空的，代表 不存在 的东西。

下面是一些返回 never 类型的函数：(一般是用来抛出错误。)

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message)
}

// 推断的返回值类型为 never
function fail() {
  return error("Something failed")
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
  while (true) {
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# null 和 undefined

TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。和 void 相似，它们的本身的类型用处不是很大：

let u: undefined = undefined
let n: null = null
1
2

默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

然而，当你指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自，这能避免 很多常见的问题。也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined。再次说明，稍后我们会介绍联合类型。

# object

object 表示非原始类型，也就是除 number，string，boolean，symbol，null或undefined 之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的 API。例如：

let obj: object = {};
1

我们一般不会直接使用 object 表示对象，而是给对象添加类型：（后面有接口的知识来实现对象类型，它更加实用）

let b: { name: string };
b = { name: '孙悟空' };

// & 表示同时满足

let j: {name: string} & {age: number};
j = {name: '孙悟空', age: 18}
1
2
3
4
5
6
7

如果 b 指定多个属性，那么赋值的时候，也 必须 给这么多的属性进行赋值（一一对应），如下面是报错的：

let b: { name: string, age: number };
b = { name: '孙悟空' }; // 报错，因为没有写 age 属性
1
2

那么我们可能只想给某些属性值初始赋值，其他的属性在后续操作再赋值，如何做？

加个 ? 即可，因为 ? 代表可选的意思。

let b: { name: string, age?: number };
b = { name: '孙悟空' }; // 报错，因为没有写 age 属性
1
2

上面都是介绍限制属性值的类型，如 name 的值是 string，那么我们如何限制对象的属性类型呢？

[propName: string]: any 表示可以多余任意类型的属性。

// 说明属性是 string 类型，属性值是 any 类型
let c: {name: string, [propName: string]: any}
c = {name:"猪八戒", age: 18, gender: '男'}

let d: {name: string, [propName: number]: any}
d = {name:"猪八戒", age: 18, gender: '男'} // 报错因为 name，age，gender 都是 string 类型
1
2
3
4
5
6

  • 当是对象时，属性是字符串

  • 当是数组时，属性是 number 类型，即数组的下标是数字

# 数组

TypeScript 像 JavaScript 一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: number[] = [1, 2, 3];
1

第二种方式是使用数组泛型，Array<元素类型>：

let list: Array<number> = [1, 2, 3];
1

# 元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string 和 number 类型的元组

let x: [string, number]
x = ['hello', 10] // OK
x = [10, 'hello'] // Error
1
2
3

当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)) // OK
console.log(x[1].substr(1)) // Error, 'number' 不存在 'substr' 方法
1
2

当访问一个越界的元素，会使用联合类型替代：

x[3] = 'world' // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()) // OK, 'string' 和 'number' 都有 toString

x[6] = true // Error, 布尔不是(string | number)类型
1
2
3
4
5

联合类型是高级主题，我们会在以后的章节里讨论它。

注意：自从 TyeScript 3.1 版本之后，访问越界元素会报错，我们不应该再使用该特性。

# 枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。像 C# 等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green
1
2

默认情况下，从 0 开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1 开始编号：

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green
1
2

或者，全部都采用手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green
1
2

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]

console.log(colorName)  // 显示'Green'因为上面代码里它的值是2
1
2
3
4

# 类型断言

有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，「相信我，我知道自己在干什么」。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。TypeScript 会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式：

  • 第一种「尖括号」语法

    let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
    1
    2

  • 第二种 as 语法

    let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
    1
    2

两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在 TypeScript 里使用 JSX 时，只有 as 语法断言是被允许的。

# 类型别名

通过 type 关键词来给多个类型取一个别名，方便其他变量引用变量，就能引用这些类型。

type t = string | boolean

let a: t = "字符串"
let b: t = true

// 等价于
let a: string | boolean = "字符串"
let b: string | boolean = true
1
2
3
4
5
6
7
8
编辑此页 (opens new window)
#TypeScript
更新时间: 2023/09/18, 16:34:13
TypeScript - 安装和使用
TypeScript - 编译和配置

← TypeScript - 编译和配置→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号