[JavaScript知识库]TypeScript 详解

1、TypeScript是什么？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

2、TS和JS的区别

2.1、TS的优点

1. 静态输入
   静态类型化是一种功能，可以在进行编写脚本时检测错误。查找并修复错误，对于编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

2. 大型的开发项目
   有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。而使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作
   当发开大型项目时，进行开发的过程当中乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。

3、TS开发环境的搭建

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

在这里的安装基本上我们都采用node进行安装，首先我们需要下载nodeJs，之后我们直接执行命令进行安装TS。

npm install -g typescript

安装完成之后我们可以使用以下命令查看TS的版本

tsc -v

之后我们新建一个项目，在项目当中我们新建一个ts文件，我们在ts文件当中我们先使用js的代码内容：

console.log("hello TS")

然后我们的ts文件是不能够在浏览器当中进行解析的，我们的ts文件首先需要通过编译，编译之后才能够被浏览器进行解析，我们直接使用命令

// tsc + 文件名
tsc demo.ts

编译之后我们的目录下面会产生一个和ts文件同名的js文件，之后我们就可以直接使用这个编译得到的js即可。我们安装好了node，就可以直接使用node命令对js文件进行解析了，使用node命令：

// node + 文件名
node demo.js

4、TS变量的声明和赋值

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。在这里我们也就不对var、let、const做详细的解释了，相信了解js的小伙伴也是可以区分开来的。

// 声明一个变量a 并且a的数据类型为number
let a : number ;
// 所以对a的值赋为字符串就会出现报错
// a = "hello"
a = 10;

let b : string ;
b = "hello"
b = 3

// 可以看到我们这里的let会编译成var，在这里我们编译后的js是ES3的版本

// 声明变量直接赋值
let c : boolean = true

// 变量的声明和赋值时同时进行，会自动对变量进行制定数据类型
let d = true;
d = "123"

// js不考虑参数的数据类型和个数
function sum(a,b){
	return a+b
}

console.log(sum(41,"41"))

// 其中这里的类型也可以进行给到参数，返回值
function sum1(a:number,b:number){
	return a+b
}

console.log(sum1(41,"”47"))
// 并且对参数的个数进行限制
console.log(sum1(41,41,100))

// 返回值指定类型
function sum2(a:number,b:number):number{
	return a+"hello"
}
console.log(sum2(1,2))

5、TS类型

类型选择

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

// 可以直接使用字面量进行声明,就好像是一个常量，声明之后的值是不可改变的
let a: 10;
a = 12;

// | 表示 或 ，也就是说 b 的值 可以是 men 也可以是 women
let b: 'man' | 'women'
b = 'menwomen'

// 既可以是字符串也可以是布尔值
let c: string | boolean
c = 'hello'
c = true

// any 表示任意类型
let d: any
d = true

// unknow 表示未知类型
let e: unknown
e = 'hello'

let s: string

// any 可以赋值给任意对象 ,这时的s就会被any盖掉
s = d
// 而使用 unknow 进行赋值就会报错
// s = e
// 而我们需要将e的值赋给s，我们需要进行类型判断
if (typeof e === "string") {
	s = e
}

// 或者使用类型断言，将e强行表示为string类型
s = e as string
s = <string>e

// void 表示函数没有返回值 可以不return，但是可以return null underfind
function fn(num): void {
	console.log("void")
}

// 而使用 nerve 表示没有返回值 返回为null和underfind也会报错
function fun(): never {
	return null
}

// 对象
let f: Object
f = {}

// 而使用 {} 就可以对对象的属性进行限制，并且对象的属性也必须相同，而我们在对属性名后面加上一个？ 表示属性可选
let g: { name: string, age?: number }
g = { name: "a" }
g = { sex: "men" }
g = { name: "b", age: 18 }

// 通过【abb:string】:any 表示我们的后续属性可以有任意属性
let h: { name: string, [abb: string]: any }
h = { name: 'yueyue', age: 18, sex: "man" }

let i: (a: number, b: number) => number

i = function (n1, n2): number {
	return n1 + n2
}

// arr 数组 字符串数组
let j: string[]
j = ['a', 'b', 'c']
let k: Array<number>
k = [1, 2, 4, 5]

// 元组表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let l：[string, number]
l = ['12', 5]


// 枚举
enum sex {
	men = 1,
	women = 0,
}

let m: { name: string, sex: sex }

m = { name: 'yueyue', sex: sex.women }
console.log(m)

6、TS编译设置

在每一次的ts文件进行修改之后我们都需要使用tsc命令进行编译成js，还是比较麻烦的，我们这里可以使用如下命令对ts文件进行侦听，当侦听的文件内容发生改变之后，会自动进行编译ts。

tsc XXX.ts -w

但是这里的话我们只能对单个ts文件进行侦听编译。当我们的项目当中有很多的ts文件，我们要怎么对所有的ts文件全部侦听呢？我们在我们的项目下新建一个tsconfig.json文件，这就是ts编译的配置文件，当我们先给上一个{}之后，我们在项目下直接执行如下命令就可以对整个项目的ts文件进行侦听了。

tsc -w

之后我们可以对这个tsconfig.json文件进行一些设置。

{
    /**
     * 用来指定哪些ts需要被编译 ** 表示任意目录 * 表示任意文件
     */
    "include": [
        "./"
    ],
    "exclude": [
        "./demo.ts"
    ],
    "compilerOptions": {
        // 编译的js版本目标
        "target": "ES6",
        // 模块化版本
        "module": "system",
        // 指定项目中要使用到的库
        "lib": ["esnext"],
        // 编译后所在目录
        "outDir": "./dist",
        // 将编译的js合并到一起
        "outFile": "./dist/app.js",
        // 是否对js进行编译，false表示不对js进行编译
        "allowJs": false,
        // 是否对js文件进行检验，false表示不检验
        "checkJs": false,
        // 是否移除注释，false表示不去掉注释
        "removeComments": false,
        // 不生成编译文件，
        "noEmit": false,
        // 当编译出错时不生成编译文件
        "noEmitOnError": false,
        // 所有严格模式的总开关
        "strict": false,
        // 是否开启严格模式，false表示不开启
        "alwaysStrict": false,
        // 当一个变量不指定类型时，默认使用any，设置为true时，表示不允许使用隐式any
        "noImplicitAny": false,
        // 设置为true，表示不允许使用隐式this
        "noImplicitThis": false,
    }
}

7、使用webpack进行打包

7.1、webpack基本打包

首先我们使用 npm init 对我们的项目进行初始化。之后我们直接安装webpack，执行命令：

// webpack 相关包
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
// ts-loader包
npm install ts-loader --save-dev

之后我们需要对webpack的配置文件进行配置，先创建一个webpack.config.js文件。这里对于webpack的配置就不做详细解释了。

const {
    resolve
} = require('path')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 路径
        path: resolve(__dirname, 'build')
    },
    // loader
    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [],
}

之后我们再对tsconfig.json进行设置，我们就给上几个简单的设置，

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "strict": true
  }
}

并且我们可以再package.json文件当中进行设置执行命令。添加如下代码：之后我们直接执行命令：npm run build就可以进行打包了

7.2、打包Html文件

进行html文件的打包，我们首先需要安装对应的依赖，html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。使用命令安装：

npm i -D html-webpack-plugin 

之后我们在webpack的配置文件当中对这个依赖进行导入：

const {
    resolve
} = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 路径
        path: resolve(__dirname, 'build')
    },
    // loader
    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        // 1、默认的html文件
        // new HtmlWebpackPlugin(),
        // 2、自定义内容
        // new HtmlWebpackPlugin({
        //     title:"this is title"
        // })
        // 3、使用模板
         new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模式 （开发、生产）
    mode: 'development'
}

之后我们进行webpack打包，我们可以看到在打包生成的文件当中会生成一个html文件，也就是我们在这里进行定义的文件（默认、自定义、模板）

7.3、打包后的文件监听

我们还可以给webpack安装一个内置服务器，用来对打包后的文件进行实时监听变化，执行命令进行安装：

npm i -D webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：

1. 为静态文件提供web服务

2. 自动刷新和热替换(HMR)
   自动刷新指当修改代码时webpack会进行自动编译，更新网页内容
   热替换指运行时更新各种模块，即局部刷新

之后我们在上面说的webpack的配置文件当中，配置命令，加上一个start命令，表示启动服务并且使用chrome浏览器打开

"start": "webpack serve --open chrome.exe"

之后我们就可以直接使用npm start命令进行执行了，
还有一个工具

npm i -D clean-webpack-plugin

7.4、关于模块化的打包

关于模块化，在进行开发的过程当中，我们基本上会引入多个其他的js、ts等等文件，这里就涉及到了模块化的问题，也很好处理，我们只需要在配置文件当中添加如下代码，表示可以对指定文件作为模块进行导入。

    // 表示哪些文件可以作为模块进行导入
    resolve: {
        extensions: ['.js', '.ts']
    },

7.5、babel版本控制打包

打包后的ES版本和浏览器兼容问题，这里我们可以使用babel对打包时控制js的版本，以及对浏览器版本的支持，先安装babel以及相关包。

npm i -D @babel/core @babel/preset-env babel-loader core-js

而我们对babel打包的配置，简单配置就是我们直接添加一个babel-loader进去，这样我们就可以进行babel打包，降低ES版本，当然了，我们也可以通过详细的配置对babel进行设置：

    module: {
        rules: [{
            // 匹配哪些文件
            test: /\.ts$/,
            // 使用哪些loader进行处理
            use: [{
                    //指定加载器
                    loader: "babel-loader",
                    // 设置babel
                    options: {
                        //设置预定义的环境
                        presets: [
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器及版本
                                    targets: {
                                        "chrome": "88",
                                        "ie": "8"
                                    },
                                    //指定corejs的版本
                                    "corejs": "3",
                                    //使用corejs的方式 "usage"  表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                // 'babel-loader',
                'ts-loader'
            ],
            exclude: /node_modules/
        }]
    },

通过这个配置进行打包之后我们可以看一下打包生成的js文件，

比如说，我们的ts文件当中定义一个Promise对象，而这是ES6当中才出现的对象，而对于IE很多都是不支持的，我们看一下打包之后这个Promise对象变成了什么。

8、TS的面向对象

8.1、类