TypeScript入门 | 青训营笔记

1010A
101 阅读1分钟

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

现在TypeScript已经被越来越多的人使用，而且react和vue等优秀的前端都支持了TS，我们有必要一起去入门了解一下啦！

为什么、什么是TypeScipt

JS:

  • 动态类型：在执行阶段才确定一个类型的匹配
  • 弱类型语言：类型转换

TS：

  • 静态类型：提前确定类型匹配
  • 弱类型语言：类型转换

TS特点：

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

=>多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集：

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

基本语法

基础数据类型

image.png

对象类型

image.png

函数类型

image.png

函数重载

image.png

数组类型

image.png

TypeScript补充类型

image.png

TypeScript泛型

image.png

image.png

类型别名&类型断言

image.png

字符串/数字 字面量

image.png

高级类型

玩出花哈哈哈

联合/交叉类型

image.png

image.png

类型保护与类型守卫

image.png

image.png

高级类型

image.png

image.png

image.png

函数返回值类型

image.png

image.png

工程应用

浏览器Web

  • 配置Webpack loader相关配置
  • 配置rsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时，会进行编译与类型检查

Node.Js

使用TSC编译

  • 安装Node与npm
  • 配置tsconfig.js文件
  • 使用npm安装tsc
  • 使用tsc运行编译得到js文件
avatar
文章
阅读
粉丝