TypeScript 入门(1)| 青训营笔记

118 阅读2分钟

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

前言

之前就听过TS的大名,也知道这个是未来的主流,但是没有用到的机会所以没学,所以今天终于有机会来学习一下了。

什么是TypeScript

发展历史

2012-10:微软发布了TypeScript第一个版本(0.8)

2014-10:Angular 发布了基于TypeScript的2.0版本

2015-04:微软发布了Visual Studio Code

2016-05:@ ty pes/react发布,TypeScript 可开发React

2020-09:Vue 发布了3.0 版本,官方支持TypeScript

2021-11:v4.5版本发布

为什么是TypeScript

image.png

态类型在执行过程中进行类型的匹配,js的弱类型会在执行时进行隐式类型转换,而在静态类型中则不然

TypeScript则为静态类型:java、c/c++等

可读性增强:基于语法解析TSDoc,ide增强

可维护性增强:在编译阶段暴露大部分错误

多人合作的大型项目中,可以获得更好的稳定性和开发效率

TypeScript是JS的超集

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

基本语法

基本数据类型

js ==> ts

image.png

ts的类型定义方式:let 变量名: 类型 = 值;

对象类型

image.png

函数类型

image.png 格式为function 函数名(参数:类型...):返回值类型

函数重载

image.png

数组类型

type作用就是给类型起一个新名字,相当于c++中的typedef

image.png

TypeScript补充类型

  • 空类型:表示无赋值
  • 任意类型:是所有类型的子类型
  • 枚举类型:支持枚举值到枚举名的正、反向映射

image.png

Typescript泛型

泛型不预先指定具体的类型,而在使用的时候再指定类型的一种特性

image.png

image.png

类型别名 & 类型断言

image.png

字符串/数字 字面量

image.png