TypeScript(TS)基础使用

什么是 TypeScript？

官方文档

TypeScript 本质上是向 JavaScript 语言添加了「可选的静态类型」和「基于类的面向对象」编程，按照TS官网的介绍，ts是一门javaScript的超集。所谓超集意思就是，js有的东西，我ts有，js没有的，我ts还有，那到底ts提供给了我们哪些额外的东西了呢，。

JavaScript是一门动态弱类型语言。当我们声明了一个变量后，比如赋值了一个字符串，但是后续仍然可以将其再赋值成其它类型的数据，这个就是弱类型的表现。相反那些，声明后不能修改变量值类型的语言，就是强类型语言。

TypeScript	TypeScript
JavaScript 的超集用于解决大型项目的代码复杂 性	一种脚本语言，用于创建动态网页。
可以在编译期间发现并纠正错误	一种脚本语言，用于创建动态网页。
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理 解	可以直接在浏览器中使用
支持泛型和接口	不支持泛型或接口
支持 ES3 ， ES4 ， ES5 和 ES6 等	不支持编译其他 ES3 ， ES4 ， ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

                

基础类型

我们可以在声明一个变量之后设置我们想要添加的类型 :type ( 我们一般称之为 “== 类型注释 ==” 或

“== 类型签名 ==” 或 "== 类型约束 ==") ；但是，如果变量有默认值的话，一般我们也不需要显式声明类型，

TypeScript 会自动推断变量的类型（类型推断）

布尔类型boolean

最简单的数据类型就是 true / false 值

const isDone: boolean = false;
// ES5：var isDone = false;

数值类型number

二进制数、十进制数、十六进制数都可以用 number 类型来表示

const count: number = 10;
// ES5：var count = 10;

字符串类型string

双引号或者单引号表示字符串

模板字符串 使用反引号来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法

${xxx} 的占位符，占位符内可以写变量名，模板字符串会进行变量值的解析。

const title: string = "你好，李焕英";
// ES5：var title = '你好，李焕英';`

数组类型array

数组类型有两种表示方法，第一种在元素类型后接上 [] ，表示由此类型元素组成的一个数组；另一

种方式是使用数组泛型（ 泛型后续会单独介绍 ）， Array< 元素类型 >

const list: number[] = [1, 2, 3];
// ES5：var list = [1,2,3];
const list: Array<number> = [1, 2, 3]; // Array<number>泛型语法
// const list: ReadonlyArray<number> = [1, 2, 3]; // 数组不可被修改
// ES5：var list = [1,2,3];

枚举类型enum

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用

例。 TypeScript 支持数字的和基于字符串的枚举。

说人话：一个变量的值是有限的，如月份只有 1-12 月，性别只有男和女，星期只有 1-7 等等

enum Gender {
MAN,
WOMAN
}
const gender: string = Gender[0]
console.log(gender)
enum Direction {
NORTH = "NORTH",
SOUTH = "SOUTH",
EAST = "EAST",
WEST = "WEST",
}

any类型

有时候接收来自用户的输入，我们是不能确定其变量类型的。这种情况下，我们不希望类型检查器

对这些值进行检查，而是直接让它们通过编译阶段的检查，此时可以使用 any

如果一个数据是 any 类型，那么可以访问它的任意属性，即使这个属性不存在

说人话： typescript 代码中使用了 any 就变成了 javascript ，这样 typescript 就失去了意义，所

以在项目中要避免使用或减少使用 any

let str: any = 666;
str = "你好，李焕英";
str = false;

元组类型Tuple

众所周知，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时

候我们就可以使用元组。在 JavaScript 中是没有元组的，元组是 TypeScript 中特有的类型，其工作方式

类似于数组。

元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。使用元组时，

必须提供每个属性的值。

说人话：元组里可以放一条数据的多个不同类型的信息，如 [ 姓名，年龄，性别，爱好 ] 等

let user: [string, number, string?] // ?代表可选
user = ['李焕英', 18, '女']
console.log(user, 'user')
user = ['贾玲她妈', 19]
console.log(user, 'user')

void类型

某种程度上来说， void 类型像是与 any 类型相反，它表示没有任何类型。

当一个函数没有返回值时，你通常会见到其返回值类型是 void

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null ：

function fn(): void {
console.log('void意为空的，缺乏的，代表函数没有返回值');
}
const nothing: void = undefined

null 和 undefined 类型

TypeScript 里， undefined 和 null 两者有各 自的类型分别为 undefined 和 null

let u: undefined = undefined;
let n: null = null;

never 与 unknown类型

never 类型表示那些永不存在的值的类型。 never 类型是任何类型的子类型，也可以赋值给任

何类型；然而，没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之

外）。 即使 any 也不可以赋值给 never 。

unknown 类型是 any 类型对应的安全类型。我们知道 any 无需事先执行任何类型的检查，在

许多情况下，这太宽松了。 unknown 类型呢？所有对该 value 变量的分配都被认为是类型正

确的。可以看到，该 unknown 类型只能分配给 any 类型和 unknown 类型本身。

// 一个抛出异常的函数表达式，其函数返回值类型为 never：
function error(message: string): never {
throw new Error(message);
}
// 函数里有死循环那么返回的也是never
function infiniteLoop(): never {
while (true) {}
}
let value: unknown
value = true // OK
value = 10 // OK
value = "Hello World" // OK
value = [] // OK
value = {} // OK
value = Math.random // OK
value = null // OK
value = undefined // OK
value = new TypeError() // OK
let value1: unknown = value // OK
let value2: any = value // OK
let value3: boolean = value // Error
let value4: number = value // Error
let value5: string = value // Error
let value6: object = value // Error
let value7: any[] = value // Error
value.foo.bar // Error
value.trim() // Error
value() // Error
new value() // Error
value[0][1] // Error

字面量类型

在 TypeScript 中，字面量不仅可以表示值，还可以表示类型，即所谓的字面量类型。

目前， TypeScript 支持 3 种字面量类型：字符串字面量类型、数字字面量类型、布尔字面量类型，

对应的字符串字面量、数字字面量、布尔字面量分别拥有与其值一样的字面量类型，字面量类型是集合

类型的子类型，它是集合类型的一种更具体的表达。

实际上，定义单个的字面量类型并没有太大的用处，它真正的应用场景是可以把多个字面量类型组

合成一个联合类型，用来描述拥有明确成员的实用的集合。

通过使用字面量类型组合的联合类型，我们可以限制函数的参数为指定的字面量类型集合，然后编

译器会检查参数是否是指定的字面量类型集合里的成员。

// 字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello')!, 'scroll'); // 没问题
handleEvent(document.getElementById('world')!, 'dblclick'); // 报错，event 不能
为 'dblclick'