Typescript入门 | 字节青训营笔记

大梦0
62 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第8天

1）TypeScript发展历史

  • 2012-10：微软发布TypeScript第一个版本（0.8）
  • 2014-10：Angular发布基于TypeScript的2.0版本
  • 2015-04：微软发布了Visual Studio Code
  • 2016-05:TypeScript可开发React
  • 2020-09:Vue发布3.0版本
  • 2021-11：v4.5版本发布

2）TypeScript特点

  • 可读性增强：基于语法解析TSDos，ide增强
  • 可维护性增强：在编译阶段暴露大部分错误。（多人合作的大型项目中，获得更好的稳定性和开发效率）
  • 包含于兼容所有JS特性，支持共存
  • 支持渐进式引入与升级

编译器：VS code

3）基本语法

  • 基础数据类型

image.png

  • 对象类型

接口（interface） ：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。

  1. 可选属性：定义该属性可以不存在。（在该属性后加上？号）。
  2. 只读属性：约束属性不可在对象初始化外赋值。（在对象的某个或某些属性前加上关键字 readonly，可以设置该属性为只读属性）。
  3. 任意属性：约束所以对象属性都必须是该属性的子类型。

image.png

  • 函数类型

image.png

  • 函数重载

image.png

  1. 参数不同的函数重载：
  2. 参数个数相同，但类型不同的函数重载
  • 数组类型

数组类型[]表示: type IArr1 = number[];

数组泛型表示: type IArrr2 = Array<string | number | Record<string,number>>;

元组: type IArr3 = [number, number, string, string];

接口表示: interface IArr4{

[key:number];any;}

image.png

泛型接口：

  1. 多泛型：
interface IX<T,U>{
key:T;
val:U;
}
  1. 泛型类：
class IMan<T>{
  instance:T;
  }
  1. 泛型别名
type ITypeArr<T> = Array<T>;

image.png

4)高级类型

  • 联合类型：IA|IB；联合类型表示一个值可以是几种类型之一
  • 交叉类型：IA&IB：多种类型叠加到一起成为一种类型，它包含所需的所有类型的特性
  • 类型守卫：定义一个函数，他返回值是一个类型谓词，生效范围为子作用域。

索引类型：

  • 关键字【keyof】：其相当于取值对象中的所有key组成的字符串字面量 如：
type IKeys = keyof {a:string;b:number};
  • 关键字【in】：其相当于取值字符串字面量中的一种可能，配合泛型p，即表示每个Key。
  • 关键字【？】：通过设定对象可选选项，即可自动推导出子集类型。

函数返回值类型：

  • 关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T===判断类型？类型A：类型B !
  • 关键字【infer】：出现在类型推荐中，表示定义类型变量，可以用于指代类型。

5)#工程应用

  • webpack

    • ts-loader
    • babel

  • tsc

    • 全局安装
avatar
文章
阅读
粉丝