【九月打卡】第12天 Typescript 开发环境搭建

课程名称：2小时极速入门 TypeScript

课程章节： 第2章 了解TypeScript 工作流

主讲老师：阿莱克斯刘

课程内容：

今天学习的内容是 Typescript 的开发环境搭建和工作流。

环境安装

1.安装 Nodejs

2.安装 typescript：

npm install -g typescript

3.打开命令行窗口，检验安装是否成功：

tsc -v

能打印出版本号，说明安装成功。

Typescript 的 Hello，world

新建一个 index.ts 文件，输入以下内容：

let message = "Hello, world!";
console.log(message);

打开命令行工具，使用 tsc 进行编译：

tsc index.ts

会在当前目录下生成一个 index.js 文件，使用 node 去执行它：

node index.js

命令行终端会打印出：Hello，world!

Typescript 工作流

Javascript 可以运行在浏览器和 Node 环境中。Typescript 是 Javascript 的超集，不能直接运行在浏览器中，需要经过编译器，转译成浏览器能识别的 JS 代码，才能运行。
比如上面编写的 index.ts，经过 tsc 命令编译为普通的 js 文件，就可以被 Node 执行，或者在浏览器中运行。

管理前端项目

在项目文件夹中新建一个 index.html，并引入 tsc 编译生成的 js文件：

<script src="index.js"></script>

使用 npm 初始化：

npm init -y

安装几个项目依赖，lite-server 是一个用于开发环境下的轻量web服务器：

npm install -D lite-server

在 package.json 中配置一个脚本命令：

"scripts": {
    "dev": "lite-server"
}

启动开发服务：

npm run dev

打开浏览器访问 http://localhost:3000，就能访问开发环境下的 index.html 文件了，并且它引用的 js 文件发生变化，就会自动刷新浏览器。

课程收获

这节课学习了 Typescript 的开发环境的搭建，以及 TypeScript 的工作和编译流程。