TypeScript详解（安装使用、基础类型总结、类型断言用法、接口、类、函数、泛型、相同类型之间赋值、unknown、枚举等）

YF-SOD

已于 2025-04-16 09:38:29 修改

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： Typescript详解数组泛型、元祖、unknown ts类型断言、Never、接口 ts类、函数、变量申明 ts抽象类、枚举、变量相互赋值

于 2022-03-06 22:08:28 首次发布

本文链接：https://blog.youkuaiyun.com/AIWWY/article/details/123230874

本文详细介绍了TypeScript中的高级类型，包括安装使用、基础类型、数组、元组、枚举、任意值、空值、未知值、类型断言、接口、类、函数类型、泛型等，以及它们在实际项目中的应用和注意事项。通过学习，读者可以深入理解TypeScript的强类型系统和静态类型检查机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript概念

是 JavaScript 的一个超集，它可以编译成纯JavaScript，也可以在任何浏览器操作系统运行。简单来说就是JS的一个升级版本，给JS加了限制规范（接口等），也扩展了JS（类等）的能力

对比JavaScript语言（弱类型：任何对象所从属的类型再执行的时候才会确定类型、动态语言：一个变量可以赋不同数据类型的值），TS为强类型（任何对象所从属的类型都必须能在编译时刻确定）、静态语言：一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这种数据类型,不允许隐式的类型转换）

安装使用

安装编译器，安装后通过tsx 文件名，可以将ts文件转译为js文件

 npm install -g typescript

安转运行环境，安装后可以直接通过ts-node 文件名直接运行ts文件。

npm install -g ts-node

项目使用

项目引入

yarn add typescript

引入后可以通过下面命令将ts文件转译为js文件

tsc 文件名（ts文件）

创建tsconfig配置文件

通过下面命令会自动创建一个tsconfig.json的ts配置文件

tsc --init

配置ts报错为中文

tsc --locale zh-CN

注意引入模块后，有些模块的申明文件需要单独引入

yarn add @types/模块名 -D

基础类型

注意和JS不同，JS区分基础类型和复杂数据类型，TS不区分，即基础类型就是数据类型，它包括JS中的6中数据类型（undefined、null、boolean、number、string、object），不包含symbol。除此之外还包含函数、数组、元祖、枚举、任意值(any)、空值(void)、Never。我们通过在变量后面加冒号跟数据类型来定义变量的类型。编译器在编译阶段时会根据定义的类型进行检查，类型不符合将报错。

布尔值、数字、字符串、对象、函数

let isDone: boolean = false; //布尔值
let money: number = 100; //数字
let str: string = 'hello world' //字符串
let obj: object = {name:'yf'} //对象
let fun: Function = (x: number, y: number) =>{console.log(x+y)}

数组

正常形式

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

数组泛型

泛型是在编译期间不确定方法使用的类型(广泛之意思),在方法调用时,指定泛型具体指向类型。

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

元祖

元组类型允许表示一个已知元素数量和类型的数组（即允许数组中有不同的变量类型）

let x: [string, number] = ['hello', 10];

注意当访问一个越界的元素，会使用联合类型替代，即我们可以给x[2]赋值string或者number类型的值。

x[2] = 'world'; //OK
x[3] = 2; //OK
x[4] = true //这里会报错，string和number的联合类型不能是boolean。

枚举（enum）

理解为定义一个变量，变量有所有的取值，通过不同的属性找到取值。枚举值默认从0开始，依次加1。也可以通过自己设定。

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName); // 显示'Green'因为上面代码里它的值是2.

注意不同枚举变量是不可以比较的。

enum Color1 { red, blue }
enum Color2 { red, blue }
Color1.red === 0 // true
Color1.red === Color2.red //error 无法进行比较

从枚举值到枚举名可以反向映射。

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

编译成

var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"

常数枚举

一个枚举类型可以包含零个或多个枚举成员。枚举成员具有一个数字值，它可以是常数或是计算得出的值 当满足如下条件时，枚举成员被当作是常数：

不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加1。但第一个枚举元素是个例外。如果它没有初始化方法，那么它的初始值为0。
枚举成员使用常数枚举表达式初始化。常数枚举表达式是TypeScript表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：
- 数字字面量
- 引用之前定义的常数枚举成员（可以是在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，可以使用非限定名来引用。
- 带括号的常数枚举表达式