TypeScript入门 | 青训营笔记

chunchun2020
85 阅读3分钟

TypeScript入门 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第10天 与大家分享TypeScript的基础入门知识，包括TypeScript的发展、语法等，不足之处欢迎大家批评指正！

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版本发布

什么是TypeScript

JS

  • 动态类型：在执行的过程才确定类型的检验匹配（编译发生在执行时）

  • 弱类型语言：允许隐式类型转换，如字符串和数字可以相加

TS

  • 静态类型

1.编译再执行，编译发生在执行前，如Python，Java语言

2.可读性增强：基于语法解析TSDoc，ide增强

3.可维护性增强：在编译阶段暴露大部分错误 => 多人合作的大型项目中，获得更好的稳定性和开发效率

  • 弱类型语言

  • JS的超集

1.包含与兼容所有JS特性，支持共存

2.支持渐进式引入与升级

编辑器推荐

image.png

image.png

基本语法

基础数据类型

  • JS image.png

  • TS

image.png

对象类型

  • TS自定义对象 IBytedancer:大写I开头：表示对象类型

只读属性：不可更改，不可在初始化外赋值

可选属性：可以不存在

image.png

image.png

函数类型

  • 方式一： image.png

image.png

  • 方式二：通过interface定义

image.png

函数重载

可用重载做根据不同类型参数的输入

image.png

  • interface类型 自动做类型推断，编译不通过

解决：让IGetDate函数比匿名函数的范围大

image.png

数组类型

数组：特殊的Object，可以用interface做数组类型的定义

image.png

补充类型

image.png

TypeScript泛型

image.png

image.png

高级语法：泛型约束、泛型参数默认类型

image.png

类型别名、类型断言

  • 类型别名 通过type关键字定义对象别名类型

  • 类型断言 未指定类型时，result类型为空对象

通过as关键字，断言result类型为正确类型

image.png

image.png

字符串/数字 字面量

image.png

高级类型

好处：通过基本类型衍生出非常多的类型，不用重复编写代码

联合/交叉类型

  • 原始代码：为书籍列表编写类型 不足之处：

1.类型声明繁琐，存在较多重复

2.type的类型声明不准确 image.png

  • 联合类型和交叉类型改进后的代码 联合类型：IA | IB;联合类型表示一个值可以是几种类型之一

交叉类型：IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

image.png

类型保护与类型守卫

例1

  • 使用联合类型：只能使用交集部分

image.png

  • 在TS中：通过类型守卫进行改造

定义一个函数，用as的类型断言，进行自动类型推断

image.png

例2

将数组进行反转，识别数组的类型

image.png

  • 类型守卫与类型保护

image.png

高级类型

  • 原代码

image.png

image.png

  • 改进：通过泛型方式

image.png

函数返回值类型

image.png

对泛型做了类型限定,extends表示泛型的类型推断，语法为函数类型的定义

两个冒号：三元表达式

image.png

TypeScript工程应用

web

image.png

  1. 配置webpack loader相关配置

  2. 配置tsconfig.js文件

  3. 运行webpack启动/打包

  4. loader处理ts文件时，会进行编译

  • 相关loader 附链接，可自行浏览学习 image.png

  1. awesome-typescript-loader https://www.npmjs.com/package/awesome-typescript-loader

  2. babel-loader https://www.npmjs.com/package/babel-loader

Node

  1. 使用TS编译

image.png

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