深入浅出TypeScript | 青训营笔记

用户1657100955633
97 阅读3分钟

一、为什么要学习TS

1.js和ts对比

image-20230510105414381.png

二、使用ts

  1. 下载Node.js

  2. 安装Node.js

  3. 使用npm全局安装typescript

    • 进入命令行
    • 输入：npm i -g typescript

  4. 创建一个ts文件

  5. 使用tsc对ts文件进行编译

    • 进入命令行
    • 进入ts文件所在目录
    • 执行命令：tsc xxx.ts

三、TS基础

1.基础类型

类型例子描述
number1, -33, 2.5任意数字
string'hi', "hi", hi任意字符串
booleantrue、false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值（undefined）没有值（或undefined）
never没有值不能是任何值
object{name:'孙悟空'}任意的JS对象
array[1,2,3]任意JS数组
tuple[4,5]元素，TS新增类型，固定长度数组
enumenum{A, B}枚举，TS中新增类型

例子：

let num: number = 100; // number
let isDone: boolean = false; // boolean
let color: 'red' | 'blue' | 'yellow';  // 字面量
let list: Array<number> = [1, 2, 3]; // 数组
let x: [string, number]; // 元组

2.函数类型

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

例子：

function add(x: number[]):number
function add(x: string[]):string
function add(x: any[]):any {
    if (typeof x[0] === 'string') {
        return x.join();
    }
    if (typeof x[0] === 'number') {
        return x.reduce((acc, cur) => acc + cur);
    }
}

3.接口

定义：接口是为了定义(规范)对象类型

特点：

  • 可选属性
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性

例子：

// 定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",   // 如果这里值为非string类型，编译的时候就会报错
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
}

4.类

定义：写法和js差不多，增加了一些定义

特点：

  • 增减了public、private、protected修饰符

  • 抽象类

    • 只能被继承，不能被实例化
    • 作为基类，抽象方法必须被子类实现

  • interface约束类，使用implements关键字

例子：

// 抽象类
abstract class Animal {
    constructor(name:string) {
        this.name = name;
    }
    public name: string
    public abstract sayHi():void
}
​
// 继承自抽象类
class Dog extends Animal {
    constructor(name:string) {
        super(name);
    }
}

四、TS进阶

1.高级类型

  • 联合类型（|）
  • 交叉类型（&）
  • 类型断言（as）
  • 类型别名（type）

2.type和interface异同

不同：

  1. interface是ts用来定义对象，type是用来定义别名方便使用
  2. type可以定义基本类型，interface不行
  3. interface可以合并重复声明，type不行

相同：

  1. 都可以定义对象或函数
  2. 都允许继承

3.泛型

定义：

  1. 泛型的语法是<>里面写类型参数，一般用T表示

  2. 使用时有两种方法指定类型

    1. 定义要使用的类型
    2. 通过ts类型推断，自动推导类型

  3. 泛型的作用是临时占位，之后通过传来的类型进行推导

function print<T>(arg:T):T {
    console.log(arg)
    return arg
}
​
print<string>('hello'); // 定义T为string
print('hello'); // ts类型推断，自动推导类型为string

4.泛型工具-基本操作符

  • typeof：获取类型
  • keyof：获取所有键
  • in：遍历枚举类型
  • T[k]：索引访问
  • extends：泛型约束

5.泛型工具类型

  • Partial：将类型属性变为可选
  • Required：将类型属性变为必选
  • Readonly：将类型属性变为只读
  • Pick、Record...

五、实战&工程向

1.声明文件

  • declare：三方库需要类型声明文件
  • d.ts：声明文件定义
  • @types：三方库ts类型包
  • tsconfig.json：定义ts的配置

2.泛型约束后端接口类型

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: '非常棒！'
})

// 路径错误 在编译时会报错
request('/book/test', {
    id: 1,
    comment: '非常棒！'
})
​
// 参数错误 在编译时也会报错
request('/book/detail', {
    id: 1,
    comment: '非常棒！'
})

六、总结

ts是js的超集，是一种强类型语言，可以在编译期间发现并纠正错误，同时不允许改变变量的数据类型，增强了类型安全，能够大大减少后期排查错误的时间，提高了生产效率。

avatar
文章
阅读
粉丝