TypeScript入门 | 青训营笔记

63 阅读2分钟

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

一.重点内容回顾

  1. 介绍了TypeScript以及其发展史
  2. 学习了TS的基本数据类型
  3. 重点讲解了一些常用类型以及高级类型
  4. 介绍了TS的工程应用

二、TypeScript入门

2.1 TypeScript发展史

  • 2012-10:微软发布了TypeScript第一个版本(0.8)
  • 2014-10:Angular发布了基于TypeScript的2.0版本
  • 2015-04:微软发布了Visual Studio Code
  • 2016-05:@types/react发布,TypeScript可开发React
  • 2020-09:Vue发布了3.0版本,官方支持TypeScript
  • 2021-11:v4.5版本发布

2.2 为什么是TypeScript?

1674136091249.png

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

2.3 基本语法

2.3.1 基础数据类型

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

2.3.2 TS常用类型

  • 联合类型
  • 函数类型
  • 函数重载
  • 数组类型
  • TypeScript泛型:不预先指定具体的类型,而在使用的时候再指定类型的一种特性(泛型接口,泛型类,泛型别名,泛型参数)
  • 类型别名&类型断言
  • 字符串、数字 字面量

2.4 高级类型

  • 联合类型:IA | IB;联合类型表示一个值可以是几种类型之一
  • 交叉类型:IA & IB;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性
  • 类型保护与类型守卫
  • 高级类型
  • 函数返回值类型

2.5 工程应用

2.5.1 webpack

  • 配置webpack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时,会进行编译与类型检查 相关loader:
  • awesome-typescript-loader
  • babel-loader

2.5.2 Node

  • 安装Node与npm
  • 配置tsconfig.js文件
  • 使用npm安装tsc
  • 使用tsc运行编译得到js文件

三、引用参考

bytedance.feishu.cn/file/boxcnI…