TypeScript-04-常见用法

2022-05-15 130

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

图示

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

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 代码提示

$FFS6XV7ZW(6M8{IYM6MI_JQ.png$

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
}