1.ts初识与环境搭建

在学习typescript之前，国际惯例，先了解一下历程：

TypeScript 是微软在开发的一门免费开源的编程语言。它是

JavaScript 的一个超集（增强版）

为什么要学习TypeScript？

拥有强大的靠山，分别为微软与谷歌。TypeScript是由微软开发的，谷歌的Angular框架是用Typescript开发的。所以TypeScript很有可能是未来的前端脚本语言发展的主流方向

话不多说，来学习一下环境搭建

因为TypeScript在JavaScript的基础上增加了类型系统，所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。

先来搭建一个TypeScript的基本开发环境

1.安装node，怎么安装node我不在这里介绍，大家自行百度，简单来说就是官网下载，然后一直点下一步傻瓜式安装，安装完成后检测方法：

node -vnpm -v

2.全局安装typescript

// 在终端输入命令,全局安装ts，注意不是在某工程下，是在你的计算机全局npm i typescript -g// 安装完成后查看typescript版本tsc --version

3.运行你的第一个ts程序

创建一个test.ts文件

在文件中写入

let site:string = 'zhouyajing' // string是变量的类型console.log(site)

在命令行输入以下命令，将ts编译成js：

tsc test.ts

在文件夹内会多出一个名字为test.js的文件：

let site = 'zhouyajing'console.log(site)

node运行（当然如果你的编辑器是vscode或者webstorm都可以下载直接运行js代码的插件，不适用终端运行）

node test.js

4.实现对ts文件的监听（目的是为了省去tsc xxx.ts这步操作，使用npm run build或者npm run start等代替）

通过命令，创建package.json

npm init -y

打开package.json，增加脚本build执行tsc命令

"scripts": {"build":"tsc"}

tsc命令会使用到tsconfig.json的配置，继续新建tsconfig.json，并输入以下代码：

// 执行cnpm --init 后生成tsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es5","sourceMap": true,"outDir": "lib" // outDir设置输出目录},"include":["src/**/*.ts"]}

以上配置会将src目录下的ts编译到lib文件夹下

假设我们的test.js在src目录下，这时我们输入命令：

cnpm run build

你就会发现会自动出现一个名为lib的文件夹，lib中生成了一个名为test.js的文件，这个test.js就是我们要的ts编译完成后的js文件

当然我们如果每写一次代码就要执行一次cnpm run build太麻烦了，下面告诉大家实现代码的自动监听，在package.json中增加start脚本

"scripts": {"start":"tsc --watch","build":"tsc"}

这样你修改完代码，保存后就自动将你的ts文件编译成js文件

如果以上内容对你有帮助，给个赞支持一下二嘎，谢谢！