TypeScript 入门 | 青训营笔记

Xh1Xxhg
101 阅读4分钟

TypeScript 入门 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天，学习了掘金视频课《前端入门——理论篇》第八节课程 “TypeScript 的发展与基本语法” ，第九节课程 “TypeScript 高级数据类型” ，以下为本次的学习笔记：

TypeScript 的发展与基本语法

TypeScript发展历史

  • 2012-10：微软发布了 TypeScript 第一个版本（0.8）
  • 2014-10：Angular 发布了 2.0 版本，它是一个基于 TypeScript 开发的前端框架。
  • 2015-04：微软发布了 Visual Studio Code，它内置了对 TypeScript 语言的支持，它自身也是用 TypeScript 开发的。
  • 2016-05：@types/react 发布，TypeScript 可以开发 React 应用了。
  • 2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript。
  • 2021-11：v4.5版本发布

为什么是TypeScript

  • JS

    • 动态类型（执行阶段才会完成类型的匹配）

    • 弱类型语言

      • 例：可以将字符串 12 和整数 3 进行连接得到字符串 123

  • TS

    • 静态类型（提前完成类型的匹配，例如Python, Java）

      • 可读性增强：基于语法解析TSDoc，ide增强
      • 可维护性增强：在编译阶段暴露大部分错误

    • 弱类型语言

      • 例：可以将字符串 12 和整数 3 进行连接得到字符串 123

    • JS的超集

      • 包含于兼容所有JS特性，支持共存
      • 支持渐进式引入与升级

基本语法

变量类型

const 变量名：变量类型 = '变量值'；

/*字符串*/
const q: string = 'string';
/*数字*/
const w: number = 1;
/*布尔值*/
const e: boolean = true;
/*null*/
const r: null = null;
/*undefined*/
const t: undefined = undefined;

对象类型

interface IBytedancer {
    /*只读属性：约束属性不可在对象初始化外赋值*/
    /*必填部分*/
    readonly jobID: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /*可选属性：定义该属性可以不存在*/
    hobby?: string;
    /*任意属性：约束所有对象属性都必须是该属性的子类型*/
    [key : string]: any;
}

函数

函数类型
interface IMult {
    (x: number, y: number): number;
}
const mult:IMult = (x, y) => x * y;
函数重载

在同一个作用域中，如果有多个函数的名字相同，但是形参列表不同(参数类型不同或参数个数不同)，返回值类型可同也可不同，我们称之为重载函数。

重载的函数是通过形参列表区分的，与返回值类型无关。函数重载其实是"一个名字，多种用法"的思想，不仅函数可以重载，运算符也可以重载。

数组类型

/*[类型 + 方括号表示](常用)*/
type IArr1 = number[];
/*泛型表示(常用)*/
type IArr2 = Array<string | number | Record<string, number>>;
/*元组表示*/
type IArr3 = [number, number, string, string];
/*接口表示*/
interface IArr4 {
    [key: number]: any;
}

TypeScript泛型

不预先指定具体类型

/*<>中的内容为泛型*/
/*泛型接口 & 多泛型*/
interface IX<T , U> {
    key: Y;
    VAL: u;
}
/*泛型类*/
class IMan<T> {
    instance: T;
}
/*泛型别名*/
type ITypeArr<T> = Array<T>;

字符串/数字 字面量

/*允许指定字符串/数字必须的固定值*/
​
/*IDom必须为html、 body、 div、 span中的其一*/
type IDomTang = 'heml' | 'body' | 'div' | 'span';
/*IOddNumber必须为1、3、5、7、9中的其一*/
type IOddNumber = 1 | 3 | 5 | 7 | 9；

TypeScript 高级数据类型

联合/交叉类型

  • 联合类型：IA | IB；联合类型表示一个值可以是几种类型之一

    • T | U
    • 其返回类型为连接的多个类型中的任意一个

  • 交叉类型：IA | IB；多种类型叠加到一起成为一种类型，包含了所需所有类型的特性

    • T & U
    • 其返回类型既要符合 T 类型也要符合 U 类型

高级类型

  • 类型约束

    • T extends K
    • 这里的 extends 不是类、接口的继承，而是对于类型的判断和约束，意思是判断 T 能否赋值给 K

  • 类型映射（in）

    • 会遍历指定接口的 key 或者是遍历联合类型

  • 类型谓词

    • parameterName is Type
    • parameterName 必须是来自于当前函数签名里的一个参数名，判断 parameterName 是否是 Type 类型。

  • 待判断类型

    • 用 infer P 来标记一个泛型，表示这个泛型是一个待推断的类型，并且可以直接使用

  • 原始类型保护

    • typeof v === "typename"` 或 `typeof v !== "typename"
    • 用来判断数据的类型是否是某个原始类型（number、string、boolean、symbol）并进行类型保护
    • "typename"必须是 "number"， "string"， "boolean"或 "symbol"。 但是 TypeScript 并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。

  • 类型保护

    • instanceof

    • nstanceof 的右侧要求是一个构造函数，TypeScript 将细化为：

      • 此构造函数的 prototype 属性的类型，如果它的类型不为 any 的话
      • 构造签名所返回的类型的联合

工程应用——webpack

  • 配置webpack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时，会进行编译与类型检查
avatar
文章
阅读
粉丝