1. 前言

1. 之前的文章ts-03基础语法 介绍了一些简单的语法,对TS有了初步的认识
2. 接下里讲些常见的用法

---

2. 函数重载

1. 还是书接上文的函数内容

2.1 函数重载的概念

1. 利用形参的类型或数量的不同 来区分多个函数

2. 一个函数有多种使用方法

---

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) => { })

图示

1. 重载代码提示 1.png
2. 这就是平常写代码的提示 ,提示多个的原因,就是利用了重载

---

3.类型别名

3.1 引子

var obj: object = { name: "yzs" }

1. 对这个对象类型进行赋值的时候 ,写注解也没用
2. 因为并不能约束对象里面的结构

---

3.2 对象约束

var objType: { name: string, age: number}

3.3 使用

objType = { name: "yzs", age: 30 }

---

3.4 代码提示

1.png

---

4. type 类型别名

1. 类似接口
2. 上面的 对象约束 ,其实不方便复用

---

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. 联合类型

1. 顾名思义 ,多个类型结合起来使用

5.1 联合类型语法

type First = { first: number }
type Second = { second: string }
type FirstAndSecond = First & Second

---

5.2 联合类型场景

1. 服务器返回的数据是不带状态的
2. 而我们的实际情况是会有选中态等类似的状态的

// 类型别名
type Person= {
  id: number;
  name: string;
};
type PersonVip= Person& { selected: boolean };

---

5.3 使用

1. 模拟服务器返回的数据

 persons: Person[] = [{id:1,name:"沈腾"},{id:2,name:"马丽"}]

---

2. 模拟遍历后处理的数据

 persons: PersonVip[] = [{id:1,name:"沈腾",vip:true},{id:2,name:"马丽",vip:false}]

3. 再结合界面的 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 变量

1. 写过强类型语言的应该非常熟悉这块
2. private 私有变量只能父类自己访问
3. protected 受保护的属性 子类也能访问
4. public 共有类,这里去修饰构造函数的形参的写法比较省事,
5. 当然也可以采用和 私有变量 受保护变量的写法

---

6.3 方法

1. 方法也可以加修饰符 和 变量一样

---

6.4 存取器

1. 主要就是 set get方法
2. 如果使用Vue框架 里面的computed计算属性就可以通过这个存取器来实现
3. 下篇文章详细讲解在Vu3里面的ts用法

---

7. 子类

7.1 基础代码

class Child extends Parent{
    constructor() {
        super()
        this.age = 30
    }
}

---

7.2 提示

1. 提示父类属性 1.png

---

7.3 简要分析

1. 父类的私有方法访问不到所以不会提示
2. money能访问到是因为接住了父类的存储器

---

8. 接口

8.1 基本写法

interface Book{
    name:string,
    price:string
}

---

8.2 分析

1. 是不是觉得和type 类型别名很像
2. 确实很像区别在于
3. 接口 是 只定义结构,不定义实现
4. type比较简洁,也更灵活

---

8.3 用法

function shop(book:Book){
    return `书名:${book.name}+价格:${book.price}`
}

shop({name:"价值",price:'99.99'}) //正确
// shop({name:"被讨厌的勇气"}) //报错

---

9. 泛型

1. 泛型是很广泛的
2. 接口.类,函数,都可以是泛型的
3. 一般 用 从T 开始的大写字母表示

interface Result<T>{
    ok: 0 | 1;
    // data: Person
    data:T
}

---

参考资料

ts语法基础
TypeScript 脚手架学习环境搭建

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切都是为了部落的崛起

共勉