typescript类型基础

160 阅读4分钟

ts 类型能够用来为程序中的实体,如:函数、变量以及对象属性等添加静态的约束。ts 编译器会在程序运行之前就对代码进行静态类型检查,这样就能够提前发现程序中是否存在某种行为缺失。

一、类型注解

在 ts 中,可以使用类型注解来明确标识类型。

类型注解的语法由一个冒号 “:” 和某种具体类型 “Type” 组成,如::Type

ts 的类型注解总是放在被修饰的实体之后,如下所示:

// 这里为常量 greeting 添加了类型注解,并将它标成了string类型
const greeting: string = 'Hello, Wrold!';

ts 中的类型注解是可选的,编译器在大部分情况下都能够自动推断出表达式的类型,如下所示:

// 这里虽然没有给 greeting 添加类型注解,但 ts 仍能够从 greeting 的初始值中推断出它是 string 类型的常量
const greeting = 'Hello, Wrold!';

二、类型检查

类型检查是验证程序中类型约束是否正确的过程,它既可以在程序编译时进行(即静态类型检查),也可以在程序运行时进行(即动态类型检查)。

ts 支持静态类型检查,js 支持动态类型检查。

为了满足不同开发者的需求,ts 提供了两种静态类型检查模式:

  • 非 strict 类型检查(默认方式);
  • strict 类型检查。

1、非 strict 类型检查

非 strict 类型检查是 ts 默认的类型检查模式,在这个模式下,类型检查的规则相对较宽松。

如:在非 strict 类型检查模式下不会对 undefined 值和 null 值做过多限制,允许将 undefined 值和 null 值赋值给 string 类型的变量。

当将 js 代码 迁移到 ts 代码时,非 strict 类型检查是一个不错的选择,它能让迁移工作变得快速。

2、strict 类型检查

这个模式下的类型检查比较激进,会尽可能地发现代码中的错误。如:在 strict 类型检查模式下不允许将 undefined 值和 null 值赋值给 string 类型的变量。

启用 strict 类型检查模式能够最大限度地利用 ts 静态类型检查带来的益处。长远来说,使用 strict 类型检查模式对提高代码质量很有利,建议在使用 ts 的新项目中启用 strict 类型检查。在学习 ts 的过程中,也推荐开启所有 strict 类型检查编译选项。

ts 提供了若干个和 strict 类型检查相关的编译选项,如:“--strictNullChecks” 和 “--noImplicitAny” 等。

在本地开发环境中,如果要开启所有的 strict 类型检查编译选项,可以在 tsconfig.json 配置文件中启用 “--strict” 编译选项,它也包含了 “--strictNullChecks” 和 “--noImplicitAny” 这两个编译选项,代码如下:

{
    "compilerOptions": {
        "strict": true,
    }
}

三、原始类型

js 中的每种原始类型都有与之对应的 ts 类型。此外,ts 还对原始类型进行了细化和扩展,如增加了枚举类型和字面量类型等。

截止到现在,ts 中的类型包含以下几种:

  • boolean
  • string
  • number
  • bigint
  • symbol
  • undefined
  • null
  • void
  • 枚举类型
  • 字面量类型

1、boolean

ts 中的 boolean 类型对应 js 中的 Boolean 原始类型,该类型表示两个逻辑值:truefalse

boolean 类型使用 boolean 关键字来表示,如下所示:

const yes: boolean = true;
const no: boolean = false;

2、string

ts 中的 string 类型对应 js 中的 String 原始类型,该类型表示采用 Unicode UTF-16 编码格式存储的字符序列。

string 类型使用 string 关键字表示,如下所示:

const foo: string = 'foo';
const bar: string = `bar, ${foo}`;

3、number

ts 中的 number 类型对应 js 中的 Number 原始类型,该类型表示采用 双精度64位二进制浮点数格式 存储的数字。

number 类型使用 number 关键字表示,如下所示:

// 二进制数
const bin: number = 0b1010;

// 八进制数
const oct: number = 0o744;

// 十进制数
const integer: number = 10;
const float: number = 3.14;

// 十六进制数
const hex: number = 0xffffff;

4、bigint

ts 中的 bigint 类型对应 js 中的 BigInt 原始类型,该类型表示任意精度的整数,但也只能表示整数。bigint 采用特殊的对象数据结构来表示和存储一个整数。

bigint 类型使用 bigint 关键字表示,如下所示:

// 二进制整数
const bin: bigint = 0b1010n;

// 八进制整数
const oct: bigint = 0o744n;

// 十进制整数
const integer: bigint = 10n;

// 十六进制整数
const hex: bigint = 0xffffffn;

5、symbol 和 unique symbol

ts 中的 symbol 类型对应 js 中的 Symbol 原始类型,该类型表示任意 Symbol 值。

symbol 类型使用 symbol 关键字来表示,如下所示:

// 自定义 Symbol
const s: symbol = Symbol();

// Well-Known Symbol
const symbolHasInstance: symbol = Symbol.hasInstance;

6、Nullable

7、void

8、枚举类型

9、字面量类型

四、单元类型

五、顶端类型