TypeScript

为什么要学习TypeScript

首先介绍一下TypeScript和JavaScript的区别，下面列出了一个表格：

TypScript	JavaScript
JavaScript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以再编译期间发现并纠正错误	只能再运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

同时TypeScript给我们带来了很多东西，它不仅仅是一门语言，更是生产力工具

• 类型安全
• 下一代Js特性
• 完善的工具链

接下来提供一些TypeScript的相关站点推荐：

TypeScript开源教程及应用 (github.com)

TypeScript到JavaScript在线编译 (typescriptlang.org)

TypeScript基础

基础类型

• boolean、number、string
• undefined、null
• any、unknown、void
• never
• 数组类型
• 元组类型 tuple

函数类型

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

function add(x: number[]): number
function add(s: 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)
    }
}

interface

• 定义：接口是为了定义对象类型

• 特点：

  • 可选属性：?
  • 制度属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性

• 总结：接口非常灵活！

// 限制对象属性
interface Person {
    name: string
    age: number
}
​
const p1: Person = {
    name: 'lin',
    age: 18
}
​
// 
interface RandomKey {
    [propName: string]: string
}
​
const obj: RandomKey = {
    a: 'hello',
    b: 'world',
    c: 'typescript'
}

类

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

• 特点：

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

  • 抽象类

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

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

class Person {
    protected name: string
    private sex: string
    public constructor(name: string) {
        this.name = name
        this.sex = 'male'
    }
}
​
class Student extends Person {
    study() {
        console.log(this.name);
        console.log(this.sex);  // 报错: Property 'sex' is private and only accessible within class 'Person'.
    }
}
​
let person = new Person("lear");
person.name // 报错: Property 'name' is protected and only accessible within class 'Person' and its subclasses.
person.sex  // 报错: Property 'sex' is protected and only accessible within class 'Person'.

TypeScript进阶

高级类型

• 联合类型 |

• 交叉类型 &

• 类型断言

• 类型别名 (type VS interface)

  • 定义：给类型起个别名

  • 相同点：

    • 都可以定义对象或函数
    • 都允许继承

  • 差异点：

    • interface是TypeScript用来定义对象，type是用来定义别名方便使用；
    • type可以定义基本类型，interface不行
    • interface可以合并重复声明，type不行

// 联合类型 |
let num: number | string
num = 8
num = 'eight'
​
function getLength(arg: number | string): string {
    return arg.length // 报错: Property 'length' dose not exist on type 'number'. (不知道arg的类型，无法访问成员变量)
}
​
// 交叉类型 &
interface Person {
    name: string
    age: number
}
type Student = Person & {grade: number}
const stu:Student   // stu对象有name、age、grade三个属性
​
// 类型断言
function getLength(arg: number|string): number {
    const str = arg as string   // 断言arg是string类型
    if (str.length) {           // 可以访问string的成员变量
        return str.length
    } else {
        const number = arg as number    // 断言为number类型
        return number.tostring().length // 可以使用number类型的成员函数.tostring()
    }
}

泛 型

官方定义：

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。

组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，

这在创建大型系统时为你提供了十分灵活的功能。

就像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，

一个组件可以支持多种类型的数据。这样用户就可以使用自己的数据类型来使用组件。

接下来举个例子：

应用场景：

顶一个print函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入的参数的类型是string，函数返回类型为string。

如果你想支持number类型？你需要重新重载函数；如果你想要支持数组类型？或者任意类型？

泛型可以很好的解决这个问题！

function print(arg:string):string {
    console.log(arg)
    return arg
}
function print(arg:string | number):string | number {
    console.log(arg)
    return arg
}
function print(arg:any):any {
    console.log(arg)
    return arg
}
// 使用泛型
function print<T>(arg:T):T {
    console.log(arg)
    return arg
}

基本定义

• 泛型的语法是<>里面写类型参数，一个用T表示；

• 使用时有两种方法指定类型：

  • 定义要使用的类型
  • 通过Typescript类型推断，自动推导类型

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

基本操作符

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

常用工具类型

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

TypeScript实战

声明文件

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

example：泛型约束后端接口类型

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

总结

• 为什么学Typescript

  • Typescript是Javascript的超集
  • 增强了类型安全
  • 提高生产力

• Typescript基础

  • 基础类型
  • 函数类型
  • Interface
  • Class类

• Typescript进阶

  • 高级类型
  • 泛型
  • 泛型工具类型

• Typescript实战

  • 声明文件
  • 后端接口约束