关于前端:TypeScript快速入门

一、简介
TypeScript是由微软开发的一种开源的、跨平台的编程语言，最终会被编译成JS代码。TypeScript是js的超集，次要提供了类型零碎和对ES6+的反对，并且扩大了js的语法，任何现有的js程序都能够运行在TypeScript环境中。
TypeScript特点：
1、始于JavaScript,归于JavaScript
TypeScript能够编译出污浊、简洁的JavaScript代码，并且能够运行在任何浏览器上，nodeJS环境中和任何反对ECMAScript3或更高版本的JS引擎中。
2、弱小的类型零碎
类型零碎容许js开发者在开发js应用程序时应用高效的开发工具和罕用操作，比方动态检查和代码重构。
3、先进的JavaScript
TypeScript提供最新的和一直倒退的js个性，包含那些来自ES6的和将来提案中的个性。

二、装置
在命令行中运行如下命令，全局装置TypeScript:

npm install -g typescript

装置实现后在控制台输入如下命名，查看装置是否胜利

tsc -V

三、编写TS代码
TypeScript类型的文件扩大名为.ts
a、ts初体验：
1、在TS文件夹下新建一个.ts的文件，写上如下代码：

(()=>{
    function sayHi(str:string){
        return `Hi ${str}`
    }
    let name = 'Liane'
    console.log(sayHi(name))
})()

2、在同目录下新建一个.html文件，应用script标签引入该ts文件，发现浏览器会报错
3、在当前目录下关上命令行，输出tsc 按Tab键，找到以后.ts文件,按回车键，就会在同级目录下输入一个编译好的js文件。

tsc .\0.ts

4、在html文件中引入编译好的js文件，可正确执行，编译好的js文件代码如下：

(function () {
    function sayHi(str) {
        return "Hi " + str;
    }
    var name = 'Liane';
    console.log(sayHi(name));
})();

5、咱们发现箭头函数被编译成一般函数申明的模式，let关键字也替换成了var,“拼接变量也编译成了”+变量的模式。

b、应用vscode主动编译ts文件
1、在我的项目目录下初始化tsc,在终端输出如下命令

tsc --init

2、初始化实现后，我的项目门路下会呈现一个tsconfig.json文件，批改文件中的”outDir”属性值为ts文件编译后的js文件输入门路；批改”strict”严格模式为false。

3、点击vsCod的Terminal，抉择Run Task，再抉择最上面的Show All Tasks，点击tsc:watch。vsCode就配置好了主动编译ts文件了
编译好的js文件会寄存在咱们设置好的js文件夹中，只有vscode检测到ts文件的批改就会主动编译。

c、类型注解
类型注解是一种轻量级的为函数或变量增加束缚的形式。
语法:变量名:数据类型

let fun = (str:string)=>{
    console.log(`Hello${str}`)
}
let num = 1; 
fun(num) //当参数的数据类型不是束缚的string类型时，编译会提醒谬误，但编译好的js文件仍然能够失常执行。

d、接口-Interfaces
接口对于面向对象语言来说是一个很重要的概念，它是对行为的形象。简略来说是一种对类的束缚。
例如:咱们定义一个人类，必须有名字和年龄，则能够定义一个接口，用来束缚每个被创立的人类都必须与接口放弃完全一致，属性不能多也不能少，属性值的类型也必须与接口保持一致。
语法:

//定义一个接口
interface Person {
    name: string,
    age: number
}

let introduce = (p: Person) {
    return `Hi,My name is ${p.name},I am ${p.age} years old!`
}

let p1: Person = {
    name: 'Liane', //name的值必须是string类型
    age: 18//age的值必须是number
}

console.log(introduce(p1))

四、应用webpack打包TypeScript
1、下载依赖包

npm install typescript -D

2、在webpack.config.js中配置如下代码

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            include: [resolve('src')]
        }
    ]
},
resolve: { //配置在我的项目中援用该类型的文件时不必写扩展名
    extensions: ['.ts','.tsx','.js']
}