【九月打卡】第2天 TS开发环境配置，TS的工作流

第一板块：两小时极速入门TypeScript，2-2;2-3，阿莱克斯刘

第二板块：

一.如何搭建开发环境？

由于TypeScript最终会编译成JavaScript代码，所以要安装对应的环境变量：

1. 首先打开TypeScript官方文档：https://www.typescriptlang.org/
   

2. 在项目中安装TS有两种方式：

   （1）通过node.js中的npm安装（npm install -g typescript，检测是否安装成功：tsc -version）

   （2）借助vscode编辑器插件安装（小众，一般使用第一种）

3. 在安装TypeScript的前提需要先安装node，node安装方式直接通过node.js官方网站进行下载即可。

二.js的版本梳理：

ES3，ES5：支持目前所有主流浏览器

ES6=ES2015：目前浏览器不支持。ES7=ES2016，ES8=ES2017命名 。

在编写代码的时候我们会发现由ES6转成ES5之后在运行会非常的麻烦。

那么我们可以这么操作：

在终端输入：

npm init

接下来一直回车，会发现项目中会出现package.json文件，这个文件就是用来管理项目的配置文件。

{
    "name":"demo-1",
    "version":"1.0.0",
    "description":"",
    "main":"test.js",
    "script":{
        "test":"echo \'Error:no test specified\' && exit 1",
        "start":"npm run start"
    },
    "author":"",
    "dependencies":{
        //我们项目中所需要的依赖包
    },
    "devDependencies":{
      //我们项目中所需要的依赖包    
    } 
}
"dependencies"与"devDependencies"的区别：devDependencies仅在开发项目时使用，不需要打包放到服务器；
dependencies则是需要打包放到服务器的。区分两个的好处是：在生产环境中可以让用户快速打开网站访问。

注意：为什么说ES6浏览器不支持呢，因为绝大部分网站不支持直接运行.ts文件，需要将.ts文件编译为ES5的.js文件。

第三板块：

写一个ts文件进行测试：

// 文件 test.ts

function foo(str: string) {
    console.log(str.length);
}
foo('abc');

在终端执行：tsc test.ts
编译之后我们会发现项目中生成一个test.js的文件。
执行：node test.js
终端输出了3

第四板块：