乐趣区

关于前端:TypeScript快速入门

jiezi

一、简介
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']
}
退出移动版