TypeScript 真的会用么?

204 阅读2分钟
一句话介绍TypeScript:

TypeScript是JavsScript的超集,包含JavaScript的一切

image.png

为什么使用TypeScript:

TypeScript 是在编译后去执行代码,在编译的过程中规避掉JavaScript运行时产生的错误。

  • JS 是动态类型的编程语言,动态类型最大的特点就是它只能在 代码执行 期间做类型的相关检查
  • TS 是静态类型的编程语言,代码会先进行编译然后去执行,在 代码编译 期间做类型的相关检查,如果有问题编译是不通过的,也就暴露出了问题。
TypeScript 基本数据类型:
  • 基础类型(JS&TS):number string boolean null undefined
  • 复杂类型:数组 对象 函数
基础类型定义:

image.png

数组类型定义

image.png

联合类型

类型与类型之间使用 | 连接,代表类型可以是它们当中的其中一种,这种类型叫:联合类型

image.png

类型别名

image.png

函数类型

image.png

对象类型

image.png

接口类型 interface

image.png

接口继承interface 接口A extends 接口B {}

image.png

类型推断

image.png

字面量类型

image.png

断言类型

const aLink = document.getElementById('link') as HTMLAnchorElement

通过类型断言,aLink 的类型变得更加具体,这样就可以访问 a 标签特有的属性或方法了 明确类型

泛型

泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用,而是能被多种类型复用。

image.png

any 类型

任意类型 => 不推荐使用

TS踩坑: 在日常项目中,我使用Prettier 插件: 在 TypeScript 中使用泛型时,确实可能会遇到语法与 JSX 语法冲突的问题,特别是在使用尖括号 (<>) 时。为了避免 TypeScript 将泛型解析为 JSX 可以将.ts文件 在vscode 中配置语言模式为 ts 而不是tsx