字节青训营 浅尝Type Script

Type Script

TS 其实是 js 的超集 ， 用于解决一些js 存在的问题 ，由微软提供的为 js 语言的增强

ts 为我们带来了什么

TS 基础类型

• boolean ， number ，stirng
• enum
• any， unknown ，void
• never
• []
• tuple

var value : [数据类型]
enum f{}
1
2

TS 函数类型

• 定义：TS定义函数需要输入参数类型和输出类型
• 输入参数： 参数支持可以选参数和默认参数
• 输出参数: 输出可以自动推断，没有返回值的时候 默认为 void
• 函数重载： 名称相同但是参数不同 ，可以通过重载支持多种类型

function add(x:number[]) : number
function add(x：string[]): number
1
2

TS interface

• 定义 ： 接口是为了定义对象类型
• 特点
  • 可以选属性：？
  • 只读属性： readonly
  • 可以描述函数类型
  • 可以描述自定义属性
• 接口可以非常灵活
• 如果有需要也可以用 key string 的方式去设置属性

interface Person{
    name : string
    age: number
}
const p1 : Person{
    name: 'lin',
    age:18
}

p1.name 
p1.age

// key string
interface RandomKey{
    [propName:string]:string
}
cosnt obj : RandomKey{
    a:"hello",
    b:"world"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TS Class

• TS 支持es6 的class 关键字 写法和js差不多
• 特点：
  • 增加了 修饰符 public private（私有） protected （只能子类使用）
  • 抽象类：
    • 只能被继承 不能实例化
    • 作为基类，抽象方法必须被子类实现
  • interface 约束类 使用 implements 关键字

class a {
    public name  : string
}
class b extends a{}
1
2
3
4

TS 进阶 高级类型

1. 联合类型 | 可以多个属性
2. 交叉类型 & 可以将属性混入到对象中
3. 类型断言 可以省去相关类型推断
4. 类型别名 type 和 接口的差异为
   1. interface是js定义对象的
   2. type 是定义别名方便实用
   3. type 可以定义基础类型 但是不会混合
   4. type 和 interface 功能类似 可能被混淆
   5. 一般涉及到类和混合属性使用interface，对函数 和其他可以按照习惯

let num number|string
num = 8
num = "eight"
1
2
3

interface p {
    name:string
}

type stu = P &(grade:number)
const student :stu
student.name
student.grade
1
2
3
4
5
6
7
8

function getlist(arg:number|string): number{
    const str = arg as string
}
1
2
3

TS 泛型

泛型的定义是需要考虑灵活性和可重用性的

1. 泛型的语法是<>写类型参数 一般用 T 来表示
2. 使用时有两种指定类型：
   1. 定义要使用的类型
   2. 通过ts 判断 自动推导类型
3. 泛型的作用是临时暂未，通过传来的类型进行推导

function print <T>(arg:T):T{
    return arg
}
1
2
3

泛型工具类型

• typeof ： 获取类型
• keyof ： 获取所用key
• in : 遍历枚举类型
• T[k]: 索引发放稳
• extends 泛型约束

interface p{
    name:string
    age:number
}

type k1 = keyof p //'name'|'age'
1
2
3
4
5
6

TS 实战

1. declare 三方库需要类型声明文件
2. .TS 文件定义
3. @types 三方库类型包
4. tsconfig.json 定义TS 的配置

后端接口类型约束

import axios from 'axios'

interface API{
    'book/detail':{
        id:number
    },
    '/book/comment':{
        id:number,
        comment:string
    }
}

function request<T extends keyof API >(url:T,obj:API[T]){
    return axios.post(url,obj)
}

request( '/book/comment',{
    id:1,
    comment:"good!"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20