1.认识typeScript

1.JavaScript 和 TypeScript 的区别

（1）类型检测问题

 (2) 没有对是否传入参数进行校验

// 当前foo函数，在被其他调用时，没有做任何的参数校检
// 1.没有对类型进行校验
// 2.没有对是否传入参数进行校验
function foo(message){
console.log(message.length);
}

foo("helle")
foo(123)

2. 如何编译TypeScript 代码

    (1)先安装

npm install typescript -g

   （2）运行代码: tsc   需要编译的文件

tsc typescript.ts

（3）代码示例初体验：

//1.给变量赋值
let message:string="hello world"

//2.函数参数限制
function foo(payload:string){
    console.log(payload.length)
}
foo("english")

（4）如何将这个代码运行到浏览器上面

         1.新建一个html文件，并引入文件编译好的文件

       2.因为每次新的文件编译，都会生成不同js文件，这时候我们通过webpack搭建一个ts的环境或者利用ts-node库：

这是方式一 ：利用ts-node 库，搭建的ts 运行环境

1.安装: npm install ts-node -g

 2.并且安装两个依赖包：npm install  tslib  @types/node

 3.输入命令：ts-node TypeScript.ts

这是方式二 ：利用webpack，搭建的ts 运行环境 

1. npm init  然后一直回车 就建了一个package.json

2.安装webpack ： npm  install webpack webpack-cli  -D

3. 新建一个webpack.config.js 文件

4.在package.json 写一个运行的脚本

"scripts": {

"build": "webpack", //命令

},

 在webpack.config.js 里面写相关的配置文件

⚠️：要安装ts-loadel 和babel

npm install ts-loader -D 
npm install babel-loader @babel/core -D
tsc --init //自动生成一个tsconfig.json 的配置文件

const path=require("path")
module.exports={
  entry:"./src/main.ts",
  output:{
    path:path.resolve(__dirname,"./dist"),
    filename:"bundle.js"
  },
  resolve:{
    extensions:['.ts']
  },
  module:{
    rules:[
      {
        test:/\.ts$/,
        loader:"ts-loader"
      }
    ]
  }
}

⚠️：注意我们每次运行打包代码的时候都会输入npm run build ,这样的话很影响开发效率，这时侯我们可以安装一个npm install webpack-dev-serve 本地服务，然后配置下

 以上如果在配置webpack 出现错误，可以根据错误去找下之前写的关于webpack文章。

3.Typescript 变量如何声明

var /let /const   变量名：数据类型  =   赋值；

4.其他补充：

1.大小写string 的区别

string:  TypeScript 中的字符串类型

String: JavaScript 的字符串包装类的类型