前端与HTML青训营笔记

48 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第7天。

js与ts

JS 动态类型 弱类型语言

TS 静态类型 弱类型语言

静态类型

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

JS的超集

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

基本语法

基础数据类型

  • 字符串

  • const q = 'string'; = const q: string = 'string';

  • 数字

  • const w = 1; = const w: number =1;

  • 布尔值

  • const e = true; = const e: boolean = true;

  • null

  • const r = null; = const r: null = null;

  • undefined

  • const t = undefined; = const t: undefined = undefined;

对象类型

D8301719D9C32B7726BE2CBB566BC29B.png

函数类型

508CCA087325BC79D8F7FFB600DB83E2.png

函数重载

  • 对getDate函数进行重载,timestamp为可缺省参数
  • 不能将类型"(type:any,timestamp:any)=>string | Date "分配给类型"IGetDate"
  • 不能将类型 "string | Date" 分配给类型 "string"
  • 不能将类型 "Date"分配给类型 "string"

数组类型

7E328E87A83337832801226C59FAFD8A.png

TypeScript补充类型

  • 空类型,表示无赋值
  • 任意类型,是所有类型的子类型
  • 枚举类型,支持枚举值到枚举名的正、反方向映射
  • 泛型

TypeScript泛型

C62480397BB51D4AB049B2B3FF5E40D3.png 508E54F581FE8919501C5A48C0227C4C.png

类型别名 类型断言

  • 通过type关键字定义了I0bjArr的别名类型
  • 未指定类型时,result类型为{}
  • 通过as关键字,断言result类型为正确类型

字符串/数字 字面量

允许指定字符串/数字必须的固定值 (必须为所列举的其中一个)

高级类型

  • 联合/交叉类型

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

交叉类型:IA & IB 多种类型叠加到一起成为一种类型,包含了所需要的所有类型的特性

  • 类型保护、类型守卫
  • 函数返回值类型