Typescript | 青训营笔记

40 阅读2分钟

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

本课堂重点内容:

  • TypeScript 优势解读
  • TypeScript具体语法
  • TypeScript工程应用

为什么要用TypeScript

Js是动态类型语言且是弱类型语言。动态类型的意思是变量在赋值的时候根据值的类型来规定类型,而TS是静态类型语言,但同样是弱类型语言。

静态类型:

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

静态类型在多人合作的大型项目中,获得更好的稳定性和开发效率。

JS的超集:

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

基本语法

基本类型: image.png

可以看到基本类型中,就是将过去的JS的动态型的赋值换成现在在定义的时候静态的给定变量的类型。

对象类型:

image.png

在对象类型中,我们可以看到有几种不同的定义的方式,有只读的readonly,有规定值范围的|,有可选属性,还有约束所有对象属性的任意属性定义方式。

函数类型:

image.png

函数类型中,我们大体上有两种定义类型的方式,第一种是在定义函数的时候跟着每个属性后以及用冒号表示返回值类型。但是这种可能会影响代码的阅读,也支持用interface先定义好函数的类型,然后再定义函数的时候指定此类型。

函数重载:

image.png

数组类型:

image.png

Typescript的补充类型:

image.png

image.png

类型保护和类型守卫:

interface IA{a:1,a1:2}
interface IB{b:1,b1:2}
function log(arg:IA|IB){
if(arg.a){
    console.log(arg.a1)
}else{
    console.log(arg.b1)
}
}

Typescript的工程应用

1、配置webpack loader的相关配置 2、配置tsconfig.js文件 3、运行webpack启动/打包 4、loader处理ts文件时,会进行编译与类型检查

  • 使用TSC编译

image.png