[字节青训营]前端方向Day10 - 字节前端初阶训练营 -深入浅出 TypeScript | 豆包MarsCode AI刷题

从零成长为初级AI工程师
58 阅读4分钟

字节前端初阶训练营

深入浅出TypeScript

image.png

TypeScript推荐

TypeScript基础

  • 基础类型

    • boolean、number(包含了整数复数浮点数)、string

    • 枚举enum(TS中特有的类型，可以对一些枚举值进行类型定义，)

image.png

-   any(**常用**)、unknown(any的替代类型，只允许被赋值)、void

-   never(永远不存在值的类型，防御性编程)

image.png

-   数组类型[]

-   元组类型tuple (数组的特殊形式，需要显式的去标注数组中每一个元素的类型。)

  • 函数类型

    • 定义：要定义输入参数类型和输出类型

    • 输入参数：支持可选参数和默认参数

    • 输出参数：输出可以自动推断，无返回值，默认void类型(无返回值)-

    • 函数重载：名称相同但参数不同，可以通过重载支持多种类型。

      • 如果多次定义同一个函数，会进行函数重载，会把这些函数的类型进行拼接

      • 前几次都是函数定义，列出各种情况，最后一次是函数实现。

image.png

  • 接口interface

    • 定义：为了定义对象类型(对象类型：具体描述一个具体的JS对象，是对键值对的描述)

    • 特点：

      • 可选属性： ？

      • 只读属性： readonly

      • 可以描述函数类型

      • 可以描述自定义属性[key : string] : string

image.png

  • 类class

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

    • 特点：

      • 增加了public(默认)、

        private(私有,继承类和实例都不能调用)、

        protected(受保护的，仅支持在继承类中进行调用)修饰符

      • 抽象类：

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

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

TypeScript进阶

  • 高级类型

    • 联合类型 |

image.png

-   交叉类型 & (扩展) (同名类型会取交集，同名的非基础类型的合并会进行相关元素的组合关系)

image.png

-   类型断言(TS在运行时，会去看当前变量的实际定义情况，在这个定义中可以提前去使用断言，来去告诉编译器这个类型一定有我指定的类型，省去了相关类型的推断，不会有错误抛出)

    告诉编译器某个实例的一个具体类型 (arg as)

image.png

-   类型别名(type(类型别名概念) VS interface(接口概念))

    -   type进行类型别名的定义

    -   给类型起个别名

    -   相同点：

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

    -   差异点：

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

image.png

    -   使用交叉类型和组合时，用到type

    -   使用类时，对类的类型定义时，使用interface

-   泛型

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

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

        传入参数的类型是string，函数返回类型为string。

image.png

image.png

image.png

        泛型：

image.png

    -   **基本定义**：

        -   <>里面写类型参数，一般用T标识

        -   泛型的作用是临时占位，通过之后传来的类型进行推导，进行完整类型的相关定义

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

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

    -   **基础操作符**：

        -   typeof 获取类型

image.png - keyof 获取所有键

image.png - in 遍历枚举类型

image.png - T[k] 索引访问

image.png - extends 泛型约束 -

    -   **常用工具类型**：

        -   Partial<T>:将类型属性变为可选
        -   Required<T>:将类型属性变为必选
        -   Readonly<T>:将类型属性变为只读
        -   Pick、Record...

image.png

TypeScript实战

  • 声明文件

    • declare：用于声明类型定义，特别是在项目中使用第三方库时，如果没有对应的类型定义文件（.d.ts），可以使用 declare 关键字来为这些库声明类型，以便在 TypeScript 中正常使用
    • .d.ts：这是 TypeScript 的声明文件，其扩展名为 .d.ts。声明文件用来为 JavaScript 库（特别是没有类型支持的库）提供类型定义。在这些文件中，只包含类型声明，而没有具体实现
    • @types：TypeScript 提供的第三方库的类型定义包通常以 @types 开头，例如 @types/lodash。这些包包含了对应库的 .d.ts 文件，并可以通过 npm 安装，帮助 TypeScript 了解库的类型。
    • tsconfig.json：TypeScript 项目的配置文件，定义了编译选项、编译路径、包含的文件等。通过 tsconfig.json 可以控制 TypeScript 编译器的行为，例如设置编译目标、模块系统、严格模式等。

  • 实例

image.png

image.png

image.png

avatar
文章
阅读
粉丝