TypeScript 入门｜青训营笔记

卓怀芋
87 阅读3分钟

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

一、本堂课重点内容：

  • 本堂课的知识要点有哪些？
  1. TypeScript 历史及定义解析
  2. TypeScript 优势解读
  3. TypeScript 练习工具
  4. 联合交叉类型
  5. 类型保护与类型守卫
  6. Merge 函数类型实现
  7. 函数返回值类型
  8. TypeScript 工程应用

二、详细知识点介绍：

ts定义

  • js是动态弱类型语言（执行时做类型匹配），ts是静态弱类型语言（编译时做类型匹配），类型匹配时弱类型匹配可以支持1+‘1’，ts有多个生态支持（动态类型：执行时才匹配变量类型/编译）
  • TypeScript 是 JavaScript 的语法超集，它添加了静态类型，支持渐进式引入与升级。
  • 优势：增强可读性（基于语法解析TSDoc）/可维护性（编译阶段暴露大部分错误），利于多人合作大项目

基本语法

  • 基础语法，比js加了类型，在变量名之后➕冒号类型const w:number=1;
    • 基础类型：string/number/boolean/null/undefined，any任意类型，
    • 自定义对象类型前加I，
    interface IByteDancer {
    readonly jobId:number;//只读属性
    name: string;
    sex: 'man'|'woman';
    hobby?: string;//可选属性
    [key: string]: any;//任意属性：约束所有对象属性都必须是该属性的字类型
}
const bytedancer: IBytedancer = {
    jobId: 90,
    name: 'Lin',
    sex: 'man',
    hobby: 'tennis',
}
bytedancer.platform= 'data';//任意属性标注下可以添加任意属性
    • 好多接口interface
  • 函数类型 image.png
    • 函数支持接口化，可以写成Ifunction（右上角）
    • 函数类型声明存在类型推断
  • 数组 number[],Array<string|number|Record<string,number>>,元组，接口
  • ts的类型补充：
    • 空类型type IEmptyFunction=()=>void,
    • 任意类型type IAnyType=any,
    • 枚举类型enmu EnumEx{ add='+',mult='*'}支持枚举的正反映射，
    • 泛型type IGetRepeatArrR=<T>(target:T)=>T[]使用时候根据传入确定类型
      • 泛型约束和泛型参数默认类型
      • image.png
  • 用type定义类型别名type IObjArr = Array<key:string;[objKey:string]:any;}
  • 类型断演？ 
    function keyBy<T extends IObjArr>(objArr:Array<T>){
//未指定类型是，result类型为{}
  const result=objArr.reduce((res,val,key)=>{
    res[key]=val;
    return res;
  },{});
  //返回空object
  //通过as关键字，断言result类型为正确类型
  return result as Record<string ,T>;
}
  • 字符串/数字 字面量 用|来固定值type IDonTag='html'|'body'|'div';

高级类型

联合/交叉类型

定义两种Ibook类型，type booklist=Array<类型1 ｜ 类型2>

联合类型：IA ｜ IB，几种类型之一

交叉类型：IA & IB，几种类型叠加为一种类型，包含所需所有类型的特性

type booklist=Array<{作者}&({类型1} ｜ {类型2})> 差异&common

类型保护/守卫

ts中，访问联合类型时，仅能访问联合类型的交集

类型守卫：定义一个函数，返回值是类型谓词，生效范围是子作用域，联合类型+类型保护=自动类型推断

image.png 替代了if-else的操作

image.png

函数的返回值delayCall extends关键字

image.png

extends随泛型出现时，可以类比三元表达式

infer R是整体，类型推断将函数扩展。

工程应用

浏览器web

webpack构建器

webpack loader - 配置 tsconfig.js - 运行webpack启动/打包 - loader处理ts时，会编译和类型检查

awesome

babel

nodejs

code.ts - TSC - code.js

安装node，npm - 配置 tsconfig.js - npm安装tsc - 用tsc运行编译得到js文件

三、实践练习例子：

  • 泛型约束

image.png

四、课后个人总结：

  • 本章有什么知识点不容易掌握？

    ts的高级语法，之前基础差没有习惯type的表达

    类型守卫没听懂，in和？关键字

  • 什么地方容易与其他内容混淆？

    泛型限定和泛型推断

五、引用参考：

  • 我参考了哪些外部博客/笔记/文章？

    类型保护

    学类库

avatar
文章
阅读
粉丝