本文转自公众号:前端日志
作者:lmjben
正文共:约 5000 字
预计阅读时间:10 分钟
最近这两年,有很多人都在讨论 Typescript,无论是社区还是各种文章都能看出来,整体来说正面的信息是大于负面的,这篇文章就来整理一下我所了解的 Typescript。
本文主要分为 3 个部分:
Typescript 基本概念
Typescript 高级用法
Typescript 总结
Typescript 基本概念
至于官网的定义,这里就不多做解释了,大家可以去官网查看 Typescript 设计目标[1]
我理解的定义:赋予 Javascript 类型的概念,让代码可以在运行前就能发现问题。
Typescript 都有哪些类型
1、Typescript 基本类型,也就是可以被直接使用的单一类型。
数字
字符串
布尔类型
null
undefined
any
unknown
void
object
枚举
never
2、复合类型,包含多个单一类型的类型。
数组类型
元组类型
字面量类型
接口类型
3、如果一个类型不能满足要求怎么办?
可空类型,默认任何类型都可以被赋值成
null
或undefined
。联合类型,不确定类型是哪个,但能提供几种选择,如:
type1 | type2
。交叉类型,必须满足多个类型的组合,如:
`type1 & type2
。
类型都在哪里使用
在 Typescript 中,类型通常在以下几种情况下使用。
变量中使用
类中使用
接口中使用
函数中使用
在变量中使用
在变量中使用时,直接在变量后面加上类型即可。
1let a: number;
2let b: string;
3let c: null;
4let d: undefined;
5let e: boolean;
6let obj: Ixxx = {
7 a: 1,
8 b: 2,
9};
10let fun: Iyyy = () => {};
在类中使用
在类中使用方式和在变量中类似,只是提供了一些专门为类设计的静态属性、静态方法、成员属性、构造函数中的类型等。
1class Greeter {
2 static name:string = 'Greeter'
3 static log(){
console.log(‘log')} 4 greeting: string; 5 constructor(message: string) {
6 this.greeting = message; 7 } 8 greet() {
9 return "Hello, " + this.greeting;10 }11}12let greeter = new Greeter("world");13
在接口中使用
在接口中使用也比较简单,可以理解为组合多个单一类型。
1interface IData {
2 name: string;
3 age: number;
4 func: (s: string) => void;
5}
在函数中使用
在函数中使用类型时,主要用于处理函数参数、函数返回值。
1// 函数参数
2function a(all: string) {}
3// 函数返回值
4function a(a: string): string {}
5// 可选参数
6function a(a: number, b?: number) {}
Typescript 高级用法
Typescript 中的基本用法非常简单,有 js 基础的同学很快就能上手,接下来我们分析一下 Typescript 中更高级的用法,以完成更精密的类型检查。
类中的高级用法
在类中的高级用法主要有以下几点:
继承
存储器
get set
readonly
修饰符公有,私有,受保护的修饰符
抽象类
abstract
继承和存储器和 ES6 里的功能是一致的,这里就不多说了,主要说一下类的修饰符和抽象类。
类中的修饰符是体现面向对象封装性的主要手段,类中的属性和方法在被不同修饰符修饰之后,就有了不同权限的划分,例如: