TypeScript入门
这是我参与「第四届青训营 」笔记创作活动的的第11天
1.重点内容
TypeScript的入门
2.重要的知识点
什么是TypeScript？
TypeScript的基础数据类型
函数类型
函数重载
数组类型
TypeScript补充类型
泛型
类型别名 & 类型断言
字符串|数字 字面量
联合/交叉类型
类型保护与类型护卫
函数返回值的类型
工程运用
3.详尽的知识点
什么是TypeScript？
- Typescript是静态类型的编程语言，包含于兼容所有的js特性，支持ts，js共存，同时支持渐进式引入和升级
- 可读性增强，基于语法解析TSDos，IDE增强
- 可维护性增强，在编译阶段暴露大部分问题，有利于在多人合作的大型项目中，获得更好的稳定性和开发效率
TypeScript的基础数据类型
定义变量时在变量名后添加数据类型的说明。
//js
const str = 'string'
//ts
const str: string = 'string'
对象自定义类型
interface IClassname {
//只读属性
readonly ID: number;
name: string;
gender: 'man' | 'woman' | 'other';
age: number;
//可选属性
hobby?: string;
//任意属性
[key: string]:any;
}
对象实例化
const card: IClassname = {
id: 114514,
name: 'Bob',
gender: 'man',
age: 24,
}
可以加任意属性
card.address = 'China'
只读属性无法更改值，实例化时必填属性缺失会报错。
函数类型
//js
function add(x,y) {
return x+y
}
//ts
function add(x: number,y: number): number {
return x+y
}
//js
const mult = (x,y) => x*y
//ts
const mult: (x: number,y: number) => number = (x,y) => x*y
//ts
interface IMult {
(x: number,y: number): number;
}
const mult: IMult = (x,y) => x*y
函数重载
通过对传入数据类型的判断来决定输出的数据类型。
数组类型
- 类型+方括号表示
- 泛型表示
- 元组表示
- 接口表示
type IArr1 = number[];
type IArr2 = Array<string | number | Record<string, number>>;
type IArr3 = [number, number, string, string];
interface IArr4 {
[key: number]: any;
}
TypeScript补充类型
- 空类型，表示无赋值
- 任意类型，是所有类型的子类型
- 枚举类型，支持枚举值到枚举名的正反映射
- 泛型
type IEmptyFunction = () => void;
type IAnyType = any;
enum EnumExample {
add = '+',
mult = '*',
}
type INumArr = Array<number>;
泛型
在开发中要考虑代码的复用性，因此需要使用泛型来创建可复用的组件，这使得同一个组件可以支持多种类型的使用。泛型将不确定的类型变成参数，用T表示。
function fun<T>(arg: T): T {
return arg
}
此时的T代表的是类型变量，即不预先指定具体的类型，而是在使用的时候再进行指定，也可以理解为先搭好框架，然后在使用时再往里添加具体的参数。
泛型接口 & 多泛型 | 泛型类 | 泛型别名
interface IX<T,U> {
key: T;
val: U;
}
class IMan<T> {
instance: T;
}
type ITypeArr<T> = Array<T>;
泛型约束
限制泛型的类型，以字符串为例
type IArr = <T extends string>(arg: T) => T[]
默认泛型
默认泛型的数据类型，以数字为例
type IArr<T = number> = (arg: T) => T[]
类型别名 & 类型断言
类型别名：使用type关键字定义别名类型，使用IObjArr来代替后面复杂的类型说明，简化代码数量。
type IObjArr = Array<{
key: string;
[objKey: string]: any;
}>
类型断言：使用as关键字对变量进行断言，即开发者已经明确最后变量的数据类型时，可以使用断言来标记变量。以keyBy函数为例。
function keyBy<T extends IObjArr>(objArr: Array<T>) {
const result = objArr.reduce((res, val, key) => {
res[key] = val;
return res;
},{});
return result as Record<string, T>;
}
字符串|数字 字面量
type ITag = 'html' | 'body' | 'duv';
type INumber = 1 | 3 | 5 | 7;
联合/交叉类型
一开始学习ts，会因为其繁琐的数据类型说明而烦恼。但是我们可以通过类型的联合和交叉来简化类型说明的代码。
-
联合类型
- IA | IB
- 值可以是几种类型之一
-
交叉类型
- IA & IB
- 多种类叠加一起，包含所需的所有类型
类型保护与类型护卫
在使用联合类型的时候，仅能访问联合类型中的交集部分。即仅能访问两者中都拥有的部分。
此时如果我们有对应的需求，则需要使用类型守卫。
类型守卫就是通过定义一个函数，其返回的值是一个类型谓词，生效范围为子作用域。
- typeof类型保护
- instance类型保护
联合类型+类型保护 = 自动类型推断
函数返回值的类型
-
extends
- 当跟随泛型出现时，表示推断，可类别三元运算符
-
infer
- 出现在类型推荐中，表示定义类型变量，用于指代类型
工程运用
-
web
- 配置webpack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动/打包
- loader处理ts文件，进行编译和检查
-
node
- 安装node和npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
4.课后总结
TypeScript作为现在流行的前端语言，在实际开发中非常常见，因此学习typescript是非常有必要的。作为js的超集，在初学的时候必然会遇到困难，会因为复杂的语法规则而烦恼。但是只要厘清关系，同时作为有js基础的开发者来说，ts还是比较容易上手的。
