前言:

最近开始学习typeScript,为什么呢?
现在的一个市场技术栈趋势,大部分的框架都已经支持typeScript了,而且代码编写时候给出的提示,开发体验真的很不错。
为了加深印象,我在这里记录一下学习的过程和自己的总结的一些东西,如果有什么写的不对的地方,欢迎各位朋友帮忙指正。

1. 安装和起步

安装typeScript命令:

npm i typescript -g

运行ts文件命令:

// 编译ts文件为js文件
// 运行这个命令后会在同目录下生成一个同名的js文件
tsc xxx.ts
// 之后用node运行js文件
node xxx.js

这种方式需要先把ts文件编译成js文件再运行,有些麻烦,我们可以通过@types/node 直接运行ts文件
安装:

npm i ts-node -g

运行ts文件:

ts-node xxx.ts

2. 基础类型

typeScript是JavaScript的超集,所以ts内置了js中的number、string、boolean、object、array、null、undefined以及ES6 的 Symbol 和 ES10 的 BigInt等类型,可以不需要声明,直接使用。
语法如下:

const str: string = '我是字符串'
const num: number = 123
const booleanVal: boolean = true
const obj: object = { a: 1 } // object可以使用字面量{}代替
const arr: [] = [1, 2] // 数组类型字面量:[]

需要注意一点:
以上三种类型,直接赋值通过new对应构造函数(StringNumberBoolean)是不可以的,因为构造函数会返回一个实例对象,而不是一个基础值。但我们使用类似(String(1)Number(1)Boolean(1))方式是可以的。

3. 特殊值类型

const undefinedVal: undefined = undefined
const nullVal: null = null
// 因为js当中没有void、unknown和any类型的概念,所以void、unknown和any不可以当做值来使用
const voidVal: void = undefined || null // 严格模式下可以赋值undefined,非严格模式可以赋值null或者undefined,但一般情况下不做赋值操作,而是用作指定函数没有返回值的情况
const unknownVal: unknown =  undefined || null // 可以赋值所有类型
const anyVal: any = xxx // 可以赋值所有类型

另外因为undefined和null是所有类型的子类型,当tsconfig.json中严格模式配置为false时

TypeScript 版本的 pdfjs typescript教程pdf_typescript


undefined和null可以赋值给所有类型的变量:

TypeScript 版本的 pdfjs typescript教程pdf_前端_02


一般情况下不要把变量的类型指定为any,虽然可以随意操作变量,但是会失去对TS对类型检测。

ts 3.0中引入了unknown类型也被认为是top type,与any一样,所有类型的值都可以分配给unknown,但是与any相比,unknown更加严格,比any更安全。例如:当你在定义一个对象的时候,对象不存在某个属性时,any是不会报错的,而unknown会报错

TypeScript 版本的 pdfjs typescript教程pdf_数组_03

如果在定义变量的时候,无法预测后面的操作会对类型做什么样的改变,可以尝试使用unknown。

TypeScript 版本的 pdfjs typescript教程pdf_赋值_04

4. 数组和对象

在定义数组和对象中选项类型的时候可以将以上的数据类型进行组合。
语法如下:

// 数组
const arr: [
	number, 
	string, 
	boolean, 
	undefined, 
	null, 
	any, 
	unknown, 
	void
] = [1, '1', false, undefined, null, '所有类型', '所有类型', /*void类型可以赋值的数据*/]
// 对象
const obj: {
	num: number,
	str: string,
	booleanVal: boolean,
	undefinedVal: undefined,
	nullVal: null,
	anyVal: any,
	unknownVal: unknown,
	voidVal: void
} = {
	num: 1,
	str: '1',
	booleanVal: true,
	undefinedVal: undefined,
	nullVal: null,
	anyVal: '所有类型',
	unknownVal: '所有类型',
	voidVal: /*void类型可以赋值的数据*/
}

除了指定选项值的类型,我们也可以指定固定的值:

TypeScript 版本的 pdfjs typescript教程pdf_typescript_05


以上方式定义的数组和对象,选项都是必填的,不能多也不能少,而且类型也是只指定了一种,我们开发中更多遇到的情况是:某个值不一定存在,并且一个值得类型也可能有多个。

下一章开始学习 ts 中常用的操作符