1 TypeScript概述

1.1 JavaScript是什么？

  • JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。
  • 当JS应用于浏览器时，为网络提供动态交互特性，让网页“动”起来。
  • JavaScript的运行环境：
    • 浏览器。
    • Node.js。
  • Node.js让Javascript脱离了浏览器的束缚，可以实现服务端/桌面端编程等。

总结：JavaScript既能运行在浏览器中，也可以运行在Node.js中，前后端通吃，无所不能。

1.2 TypeScript是什么？

  • TypeScript（简称TS）是JavaScript的超集（JS有的，TS都有）。
  • Typescript = Type + JavaScript（为JS添加了类型系统）。

  • TypeScript是微软开发的开源编程语言，设计目标是开发大型应用，可以在任何浏览器、任何计算机、任何操作系统上运行。

  • 实例：

    1. let param = "hello";
    2. param = []; // 运行期才会报错
    1. let param : string = "hello";
    2. param = []; // 编译期报错

    1.3 TypeScript相对JavaScript的优势

  • JS的类型系统存在“先天缺陷”，绝大部分错误都是类型错误（Uncaught TypeError）。

  • TypeScript相对JavaScript的优势：
    • ①类型化思维方式，使得开发更加严谨，提前发现错误，减少改bug的时间。
    • ②类型系统提高了代码的可读性，并使得和重构代码更加容易。
    • ③补充了接口、枚举等开发大型应用时JS缺失的功能。
  • Vue3源码使用TS重写，释放出重要信号：TS是趋势。
  • Angular默认支持TS。

  • React和TS完美配合，是很多大型项目的首选。

    2 环境准备

    2.1 安装Node.js

  • 按照步骤引导安装即可。

  • 在终端（黑窗口）中输入：node -v，验证是否安装成功（注意：需要重启VSCode和WebStorm）。
  • 如果打印出版本信息说明安装成功。

image.png

2.5 安装解析TS的工具包

2.5.1 为什么要安装解析TS的工具包？

  • Node.js和浏览器，只认识JS代码，不认识TS代码。

  • 需要先将TS代码转换为JS，然后就可以在Node.js和浏览器中运行了。

    2.5.2 安装解析TS的工具包

  • 安装命令：

npm -g install typescript

备注：typescript就是用来解析TS的工具包，提供了tsc命令，实现了TS—>JS的转化。

3 第一个TS文件

3.1 步骤

  • ①创建ts文件：
    • 在桌面中创建文件夹：code。
    • 通过终端构建一个node项目，输入node init，默认回车即可。
    • 在输入tsc init构建typescript项目。
    • 在文件夹上点击鼠标右键，然后点击Open With Code（用VSCode打开文件夹）。
    • 在VSCode中新建ts文件：index.ts（注意：文件后缀名为.ts）。

  • ②项目结构

    code
|---src                   //ts文件目录
|---package.json
|---tsconfig.json

  • ③写代码：在src文件创建index.ts文件，并在index.ts写入以下代码，并保存。

const hello : string = "Hello World!";
console.log(hello);
  • ③执行代码。
    • TS代码不能直接在Node.js中运行，所以需要在当前目录中打开终端，输入命令tsc index.ts敲回车。
    • 执行JS，输入命令node index.js（注意：后缀名为.js）。

说明：

  • tsc index.ts会生成一个hello.js文件。
  • node index.js表示执行这个js文件中的代码。

image.png

3.2 简化执行TS的步骤

  • 问题：每次修改代码后，都要重复执行两个命令才能执行TS代码，太繁琐。
  • 简化方式：使用ts-node包，“直接”在Node.js中执行TS代码。
  • 安装ts-node：
npm -g install ts-node

注意：因为ts-node（版本为10.0.0）依赖的更新，需要先安装如下的依赖，之后ts-node才能正常使用。

npm -g install @swc/wasm@

npm -g install @types/node@*

 npm -g install @swc/core@
  • 解释：
    • ts-node包内部会偷偷的将TS转换为JS代码，然后执行JS代码。
    • ts-node包提供了命令ts-node，用来执行TS代码。
  • ts-node执行ts的命令：
ts-node hello.ts