1. 前言
之前的文章ts-03基础语法
介绍了一些简单的语法,对TS有了初步的认识
接下里讲些常见的用法
2. 函数重载
还是书接上文的函数内容
2.1 函数重载的概念
利用形参的类型或数量的不同 来区分多个函数
一个函数有多种使用方法
2.2 基础代码
function play(cb1: () => void): void // 重载2 function play(cb1: () => void, cb2: (v1: any, v2: any) => void): void // 实现 function play(cb1: () => void, cb2?: (v1: any, v2: any) => void) { if (cb2) { console.log("执行重载2") } else { cb1() console.log("执行重载1") } }
2.3 使用
play(() => { }) play(() => { }, (v1, v2) => { })
图示
这就是平常写代码的提示 ,提示多个的原因,就是利用了重载
![3EUKIQ2){]21$6~~QEX{(}S.png](https://ucc.alicdn.com/pic/developer-ecology/86b03b4394cf4581882ac2cefe2691ba.png?x-oss-process=image/resize,w_1400/format,webp "3EUKIQ2){]21$6~~QEX{(}S.png")
3.类型别名
3.1 引子
var obj: object = { name: "yzs" }
对这个对象类型进行赋值的时候 ,写注解也没用
因为并不能约束对象里面的结构
3.2 对象约束
var objType: { name: string, age: number}
3.3 使用
objType = { name: "yzs", age: 30 }
3.4 代码提示
4. type 类型别名
类似接口
上面的 对象约束 ,其实不方便复用
4.1 基本用法
type Person = { name: string, age: number
关键字
type是重点
4.2 使用
var objType2: Person objType2 = { name: "祺祺", age: 3 }
4.3 数据列表
var persons: Person[] = [{ name: "yzs", age: 30 }, { name: "祺祺", age: 3 }]
这个就是我们平常 接收服务器返回的 List的数据结构形式
5. 联合类型
顾名思义 ,多个类型结合起来使用
5.1 联合类型语法
type First = { first: number } type Second = { second: string } type FirstAndSecond = First & Second
5.2 联合类型场景
服务器返回的数据是不带状态的
而我们的实际情况是会有选中态等类似的状态的
// 类型别名 type Person= { id: number; name: string; }; type PersonVip= Person& { selected: boolean };
5.3 使用
模拟服务器返回的数据
persons: Person[] = [{id:1,name:"沈腾"},{id:2,name:"马丽"}]
模拟遍历后处理的数据
persons: PersonVip[] = [{id:1,name:"沈腾",vip:true},{id:2,name:"马丽",vip:false}]
再结合界面的 class或者选中框 等来处理
6. class的不同
6.1 核心代码
class Parent { private _money = "98765432"; // 私有属性,不能在类的外部访问 protected age = 30// 保护属性,可以在子类中访问 //参数属性: 构造函数 参数 加修饰符 能够定义为成员属性 constructor(public nationality = "China") { } //方法也修饰符 private sayHello() { } // 存取器: 属性方式访问 .可添加额外逻辑 控制读写 get money() { return this._money } set(val:string) { this._money = val } }
6.2 变量
写过强类型语言的应该非常熟悉这块
private 私有变量只能父类自己访问
protected 受保护的属性 子类也能访问
public 共有类,这里去修饰构造函数的形参的写法比较省事,
当然也可以采用和 私有变量 受保护变量的写法
6.3 方法
方法也可以加修饰符 和 变量一样
6.4 存取器
主要就是 set get方法
如果使用Vue框架 里面的computed计算属性就可以通过这个存取器来实现
下篇文章详细讲解在Vu3里面的ts用法
7. 子类
7.1 基础代码
class Child extends Parent{ constructor() { super() this.age = 30 } }
7.2 提示
7.3 简要分析
父类的私有方法访问不到所以不会提示
money能访问到是因为接住了父类的存储器
8. 接口
8.1 基本写法
interface Book{ name:string, price:string }
8.2 分析
是不是觉得和type 类型别名很像
确实很像区别在于
接口 是
只定义结构,不定义实现type比较简洁,也更灵活
8.3 用法
function shop(book:Book){ return `书名:${book.name}+价格:${book.price}` } shop({name:"价值",price:'99.99'}) //正确 // shop({name:"被讨厌的勇气"}) //报错
9. 泛型
泛型是很广泛的
接口.类,函数,都可以是泛型的
一般 用 从
T开始的大写字母表示
interface Result<T>{ ok: 0 | 1; // data: Person data:T }
