深入浅出TypeScript||青训营笔记

sunset_
99 阅读4分钟

课程介绍

本课程从TS基础入手，由基础类型一步步延伸到高级类型，通过示例来深入浅出的了解TypeScript的各种姿势。

课程重点

  • 整体介绍:Ts 背景、优缺点、社区活跃度等

  • TS常用类型基本概念

    • 基础类型、对象类型、接口、断言等

  • 进阶用法

    • 类、泛型及使用场景

  • 工程向

    • 代码检测、编译配置、tsconfig介绍
    • 工程中最佳实践、迁移工具

  • 小练习：实践一下

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

TypeScript 带来了什么

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

TypeScript 推荐

1. TS 基础

1.1 基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple

1.2 函数类型

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

1.3 interface

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

  • 特点：

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

  • 总结：接口非常灵活 duck typing

1.4 类

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

  • 特点：

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

    • 抽象类：

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

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

2. TS 进阶

2.1 高级类型

  1. 联合类型 |

  2. 交叉类型 &

  3. 类型断言

    function getLength(arg: number | string): number {
    const str = arg as string
    if (str.length){
        return str.length
    } else {
        const number = arg as number
        return number.tostring().length
    }
}
复制代码

  4. 类型别名（type VS interface）

    • 定义：给类型起别名

    • 相同点：

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

    • 差异点：

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

2.2 泛型

官方定义：

软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

应用场景：

定义一个 print 函数，这个函数的功能就是把传入的参数打印出来，再返回这个参数。

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

基本定义：

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

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

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

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

2.2.2 泛型工具类型

基础操作符

  • typeof: 获取类型
  • keyof: 获取所有键
  • in: 遍历枚举类型
  • T[K]: 索引访问
  • extends: 泛型约束
2.2.3 常用工具类型
  • Partial: 将类型属性变为可选
  • Required: 将类型属性变为必选
  • Readonly: 将类型属性变为只读
  • Pick、Record……
type Partial<T> = {
    [P in keyof T]?: T[P];
};
​
type Required<T> = {
    [P in keyof T]-?: T[P];
};
​
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
复制代码

3. 实战 & 工程向

3.1 声明文件

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

3.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)
}
复制代码

  • case 1: 路径错误

    request('/book/test', {
    id: 1,
    comment: '非常棒'
})
复制代码

  • case 2: 参数错误

    request('/book/detail', {
    id: 1,
    comment: '非常棒'
})
复制代码

4. 课程总结

为什么学 TS

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

TS 基础

  • 基础类型
  • 函数类型
  • interface
  • class 类

TS 进阶

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

TS 实战

  • 声明文件
  • 后端接口约束
avatar
文章
阅读
粉丝