TypeScript概况

TypeScript VS JavaScript

TypeScript

JS的超集，用于解决大型项目的代码复杂性
强类型，支持静态和动态类型
可以在编译期间发现并纠正错误
不允许改变变量的数据类型

JavaScript

一种脚本语言，用于创建动态网页
动态弱类型语言
只能在运行时发现错误
变量可以被赋值成不同类型

TypeScript带来了什么

类型安全
拥有下一代JS特性
完善的工具链不仅仅是一门语言，更是生产力工具

TypeScript学习推荐

Awesome Typescript: TS开源教程及应用 ByteTech: TS&React: React+TypeScript开发模式介绍 TypeScript Playground: TS到JS在线编译

TypeScript基础

基础类型

boolean、number、string
枚举enum
any、unknown（只允许被赋值，反向赋值只能给any，unknown）、void

never（代表从不会出现的值，常用于防御性编程）

function throwError(message: string): never {
	throw new Error(message);
}

数组类型 [ ]
元组类型tuple（数组特殊类型，允许存储不同类型的元素）

函数基础

定义：TS定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型

interface

定义：接口是为了定义对象类型

特点：
- 可选属性：？
- 只读属性：readonly
- 可以描述函数类型
- 可以描述自定义属性总结：接口非常灵活duck typing

interface Person {
	name: string
	age: number
}
interface RandomKey {
	[propName: string]: string
}
const obj: RandomKey = {
	a: 'hello',
	b: 'world',
	c: 'typescript',
}

类

写法和JS差不多，增加了一些定义

特点：
- 增加了public、private、protected修饰符
- 抽象类：
  - 只能被继承，不能被实例化
  - 作为基类，抽象方法必须被子类实现
- interface约束类，使用implements关键字

TypeScript 进阶

高级类型

联合类型 |

let num: number | string

num = 8
num = 'eight'

交叉类型 &

interface Person {
	name: string
	age: number
}
type Student = Person & {grade: number}

const stu:Student
stu.age = 8
stu.name = 'student A'

stu.grade = 6

类型断言

function getLength(arg: number | string): number {
	const str = arg as string
	if (str.length) {
		return str.Length
	} else {
		const number = arg as number
		return number.toString().length
	}
}

类型别名

类型别名（type VS interface）

定义：给类型起个别名相同点：

都可以定义对象或函数
都允许继承差异点：
interface: 是TS用来定义对象，type是用来定义别名方便使用；
type可以定义基本类型，interface不行；
interface可以合并重复声明，type不行；

泛型

泛型的语法是< >里面写类型参数，一般用T表示；
使用时有两种方法指定类型：
1. 定义要使用的类型
2. 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导；

function print(arg: any): any {
	console.log(arg)
	return arg
}

function print<T>(args: T): T {
	console.log(arg)
	return arg
}

基础操作符

typeof: 获取类型
keyof: 获取所有键

in: 遍历枚举类型

type Keys = "a" | "b" | "c"
type Obj = {
	[p in Keys]: any
}

T[K]: 索引访问 let type1: Person['name]'

extends: 泛型约束

interface Lengthwise {
	length: number;
}
function loggingIdentity<T extends Lengthwise>(args: T): T {
	console.log(arg.length);
	return arg;
}

常用工具类型

Partial<T>: 将类型属性变为可选
Required.<T>: 将类型属性变为必选
Readonly<T>: 将类型属性变为只读
Pick、Record..

	type Partial<T> = {
		[P in keyof T]?: T[P];
	};
	type Required<T> = {
		[P in keyof T]-?: T[P];
	};
	type Readonly<T> = {
		readonly [P in keyof T]: T[P];
	};

实战 & 工程向

声明文件

declare: 三方库需要类型声明文件
.d.ts: 声明文件定义
@types: 三方库TS类型包
tsconfig.json: 定义TS的配置

泛型约束后端接口类型

泛型约束后端接口类型.png

总结

今天的内容是TypeScript，学习比较了TS和JS，并学习了TS的相关语法和一些进阶用法。

Day5 深入浅出TypeScript | 青训营