1.ts初识与环境搭建

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

• TypeScript 是微软在2012年开发的一门免费开源的编程语言。它是
  JavaScript 的一个超集（增强版）

为什么要学习TypeScript？

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

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

因为TypeScript在JavaScript的基础上增加了类型系统，所以TypeScript不能够直接在浏览器当中运行。我们需要使用编译器将TypeScript编译为JavaScript。
先来搭建一个TypeScript的基本开发环境

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

node -v
npm -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文件

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