声明

• 关于TS: 在学习TypeScript的时候要把它当做是一门独立的语言，而不是JS或者ES的附属品

• 学习目标： 学完TypeScript后可以抛弃AnyScript和JavaScript,前端项目中不使用.js或.jsx后缀的文件，而是使用tsx后缀或者ts后缀

• 对于any的态度: 要么不用，要么就会有无数个any

• 由于TS是微软公司发明的，因此使用VSCode来做TS开发更舒服

• JS 的类型跟 TS 的类型到底有什么区别?

  JS 这门语言其实并没有提供类型相关的关键字（如小写的 number、string、boolean），只是提供了 typeof 让我们获取变量的类型，JS 对类型非常不重视。

  而 TS 则将 JS 中的类型提升到很高的位置，高到如果你把类型写错了代码就不能通过编译

  1.粒度不同：在 JS 中的类型 number 不可再细分，而 TS 中的 number 可以看做 1、1.1、2、2.3 等无数个小类型的联合

  2.可变性不同：JS 中的变量类型是可变的，一个 number 随时可以变成一个 string；TS 中除了 any，其他类型要么是不可变的，要么就算可变也是有限制的

• 为什么使用TS写代码会让心理负担减轻？

  因为TS会提示我们怎么写代码，如获取Button，并给button添加事件，它会自动帮我们加一个问号?,鼠标浮到button上提示button可能是HTML元素也有可能为空，所以我们知道要判断button为空的情况，这是TS告诉我们了button的类型

  此外，写代码的时候，它还会提示我们参数的类型、this指的是谁

  也就是在写代码的时候，TS就已经帮我们判断出了代码中写错的地方，而不是在运行时才报错，减少了找bug改bug的时间，这样写代码的时候就很放心！！

  

  

  

  

类型擦除是什么

定义

擦除类型：去除掉ts中的类型，将ts变成js

如何擦除类型

1. esbuild 1.ts > 1.js(npm i -g esbuild)

2. swc 1.ts -o 1.js(npm i -g @swc/cli @swc/core)

上面两种方法不检查类型语法，它只是把所有和ts相关的东西删掉，所以速度很快

3. tsc 1.ts (npm i -g typescript)

自动的将ts文件转成js文件，同时它会去做类型检查，即检查ts语法，所以速度会慢一些

4.bable --presets @bable/preset-typescript 1.ts (pnpm i @babel/core @babel/cli @babel/preset-typescript)

不支持全局安装，只能在本地安装

它会去做类型检查，即检查ts语法，所以速度也会慢一些

esbuild是用go语言写的，所以它的构建速度是相当相当快的

swc是rust提供的打包工具

TS、ES6、ES5的关系

备注

打包的好处就是将多个文件，打包成一个文件，方便快速下载

如何查看ES6兼容表

es6 compatibility table

如何运行TypeScript

1. 在线编辑器

1.1 TypeScript Playground:

适合简单代码的运行

缺点是文件代码越多，分享出去的地址就越长，不利于分享，易刷屏

1.2 最快的在线编辑器Playcode.io (推荐)

真正的实时同步预览

分享的url一旦生成就不会再变

并且修改完代码保存后，分享链接的代码也会跟着发生变化

提问分享链接之后最好不要再改代码了

如果想修改，那么就clone一份，将clone的那份的链接分享出去

1.3 stackblitz (推荐)

比较好用的原因是，它有单独的vite

实际上它就是一个在线的VSCode

1.4 codesandbox

2. 本地编辑 + 浏览器

使用Vite 运行 TypeScript (推荐)

vite官网

运行npm create vite@latest my-vue-app -- --vanilla-ts

• cd my-vue-app

• npm install

• npm run dev

3. 本地编辑 + Node

如何用Node运行TS？

3.1. ts-node

文档

安装：

npm install -g typescript
npm install -g ts-node

使用：

ts-node 文件路径

特点：

类型检查 + 类型擦除 + 运行

3.2. swc-node

文档

安装：

npm i -D @swc-node/register

使用：

node -r @swc-node/register script.ts

• 比ts-node执行速度更快
• 但是不带类型检查，而是直接类型擦除再运行

3.3 esm-loader

文档

安装：

npm install --save-dev @esbuild-kit/esm-loader

使用：

node --loader @esbuild-kit/esm-loader ./file.ts

3.4 esno (推荐)

文档

安装：

npm i -g esno

使用：

esno index.ts

===============！！！！===============

以上都是工具类，只需要会使用即可，因为过几年可能又过时了

===============！！！！===============

如何调试TS

如果想知道X的类型是什么怎么调试？

type Age = number  
  
type Name = string  
  
type X = Name & Age

使用console.log()吗？

TypeScript中没有log，log后面只能跟一个值，但是这里的X是一个类型！

类型到最后是会被擦除的，擦除完，Name、Age 和 X 都不存在了，还怎么log ?

TS的调试要用鼠标，鼠标悬浮到类型上或者报错上即可

说明Name 和 Age 联合之后的结果就是never

推荐书

《编程与类型系统》

《TypeScript编程》

《类型和程序设计语言》 - 偏理论化和底层

TS类型体操

链接地址

TS类型体操是纯函数式编程

建议

• 能用ES6就不要使用ES5
• 能不用JS就不用JS，而是用TS
• 能不用类就不要用类(React中也少用类)，能用对象就用对象，能用函数就使用函数
• 能不用this，就不要用this，React中基本不用this了(当然vue中比较适合用this获取data等)