什么是TypeScript

Typed JavaScript at Any Scale.
添加了类型系统的 JavaScript，适用于任何规模的项目。

它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模。

类型系统

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

TypeScript 是静态类型

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段(不需要在运行前先编译成其它语言，可以用如V8引擎直接解释运行)，所以它是动态类型，以下这段代码在运行时才会报错：

  1. let foo = 1;
  2. foo.split(' ');
  3. // Uncaught TypeError: foo.split is not a function
  4. // 运行时会报错（foo.split 不是一个函数）

静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型，这段 TypeScript 代码在编译阶段就会报错了：

  1. let foo = 1;
  2. foo.split(' ');
  3. // Property 'split' does not exist on type 'number'.
  4. // 编译时会报错（数字没有 split 方法），无法通过编译

TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

  1. console.log(1 + '1');
  2. // 不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字 1 会被隐式类型转换为字符串 '1'，加号 + 被识别为字符串拼接打印出字符串 '11'

虽然 TypeScript 不限制加号两侧的类型，但是可以借助 TypeScript 提供的类型系统，以及 ESLint 提供的代码检查功能，来限制加号两侧必须同为数字或同为字符串。这在一定程度上使得 TypeScript 向「强类型」更近一步了——当然，这种限制是可选的。

总结

什么是 TypeScript？

  • TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
  • TypeScript 是一门静态类型、弱类型的语言。
  • TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
  • TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
  • TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
  • TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
  • TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
  • TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。

  • TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

    安装TypeScript

    安装TypeScript其实就是安装命令行工具tsc：npm i typescript -g。全局安装 tsc 命令，可以在任何地方使用tsc命令了：

  • tsc --init：创建一个tsconfig文件

  • tsc hello.ts：编译TypeScript 文件，生成编译好的hello.js文件。

TypeScript 编译的时候即使报错了，还是会生成编译结果，仍然可以使用这个编译之后的文件。如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

编译运行ts单文件

方法一：
VSCode中监听文件变化自动编译(一般针对单文件)成JS，但还需要手动node xxx.js文件才可以执行
image.pngimage.pngimage.png
方法二：
执行命令行**tsc --watch** 进行监听，同上
方法三：
全局安装一个可以在node里运行ts文件的插件**npm i -g ts-node**：即可以在终端直接使用ts-node Demo.ts 运行ts文件。（省去tsc Demo.ts将ts文件转换成js，再node Demo.js执行)。

ts-node还可以搭配VScode的扩展Code Runner，可以实现右键直接Run Code

编译运行ts项目

项目里都会用到构建工具如 webpack、rollup等，所以都会利用构建工具来处理ts：
解析ts的方式有两种：一个是ts插件，另一个是babel
rollup会采用rollup-plugin-typescript2
webpack会采用ts-loder / babel-plugin-typescript

JS文件中使用ts检测

首先需要全局安装TypeScript。使用时，只需要在JavaScript文件的第一行添加一句// @ts-check，然后必须向代码中添加JSDoc（JavaScript文档）之后，类型检测才被启用。
image.png
image.png