TypeScript（一） —— 进阶（TypeScript 中的类型、编译选项及使用 webpack 打包 ts 代码）

系列文章目录

---

---

类型声明

给变量设置类型，使得变量只能存储某种类型的值

1. 声明一个变量 ，同时指定它的类型

	// 声明一个变量 a，同时指定它的类型为 number
	let a: number
	// a 的类型设置为了number，在以后的使用过程中a的值只能是数字
	a = 10
	// a = 'hello'  // 此行代码会报错，因为变量a的类型是number，不能赋值字符串

2. 声明完变量直接进行赋值

	// 声明完变量 b 后，直接赋值为 false
	let b: boolean = false

3. 变量的声明和赋值是同时进行，TS自动对变量进行类型检测

	let c = false
	c = true
	// c = '123' // 自动检测为boolean类型，此行代码会报错

4. 函数声明，指定参数和返回值的类型

	// 指定参数的类型，指定返回值的类型
	function sum(e: number, f: number): number{
    
    
	    return e + f
	}
	
	let result = sum(10, 2)
	console.log(result) // 12

TS 中的类型

类型总览：

TS 中的类型（一）

1. 直接使用字面量对类型声明

	// 直接使用字面量对类型声明，可以使用 | 来连接多个类型（联合类型）
	let a: 'male' | 'female'
	a = 'male'
	a = 'female'
	// a = 'hello' // 报错

2. any 任意类型（尽量避免使用）

	let b: any
	b = 2
	b = 'hello'

3. unknown 表示未知类型的值

	let c: unknown
	c = 10
	c = 'hello'

4. any 和 unknown 的区别

	let b: any
	let s: string
	// b 的类型是 any，它可以赋值给任意变量
	let s: string
	s = b

	let c: unknown
	let s: string
	// c 的类型是 unknown，不能直接赋值给其它变量
	// s = c // 报错
	
	// 可以这样使用
	if(typeof c === 'string'){
    
    
	    s = c
	}

5. 类型断言，用来告诉解析器变量的实际类型（两种写法）

	let c: unknown
	let s: string
	s = c as string
	or
	s = <string> c

6. void 用来表示空，以函数为例，就表示没有返回值的函数

	function fn(): void {
    
    
	    
	}

7. never 表示永远不会返回结果

	function fn2(): never{
    
    
	    throw new Error('报错了！')
	}

TS 中的类型（二）

1. object 表示一个 js 对象

	let a: object
	a = {
    
    }
	a = function (){
    
    }

2. {} 用来指定对象中可以包含哪些属性，语法：{ 属性名: 属性值 }，在属性名后面加上 ?，表示属性是可选的

	let b: {
    
    name: string, age?: number}
	b = {
    
    name: '张三', age: 20}

3. [propName: string]: any 表示任意类型的属性

	let c: {
    
    name: string, [propName: string]: any}
	c = {
    
    name: '李四', age: 21, gender: '男'}

4. 设置函数结构的类型声明：(形参: 类型, 形参: 类型...) => 返回值

	let d: (a: number, b: number) => number
	d = function(n1: number, n2: number): number {
    
    
	    return n1 + n2
	}

5. 数组的类型声明（两种方式）

	// string[] 表示字符串数组
	let e: string[]
	e = ['a', 'b', 'c']

	// number[] 表示数值数组
	let f: number[]
	or
	let g: Array<number>
	g = [1, 2, 3]

6. 元组：固定长度的数组

	let h: [string, string]
	h = ['hello', 'abc']

7. enum 枚举

	enum Gender {
    
    
	    Male = 1,
	    Female = 0
	}
	
	let i: {
    
    name: string, gender: 0 | 1}
	i = {
    
    
	    name: '小宏',
	    gender: Gender.Male
	}
	
	console.log(i.gender === Gender.Male) // true

8. & 与

	let j: {
    
    name: string} & {
    
    age: number}
	j = {
    
    name: '大白', age: 18}

9. 类型的别名

	type myType = 1 | 2 | 3 | 4
	let k: myType
	let l: myType

TS 编译选项

创建 tsconfig.json 文件：tsconfig.json 是 ts 编译器的配置文件，ts 编译器可以根据它的信息来对代码进行编译

TS 编译选项（一）

1. "include" 用来指定哪些 ts 文件需要被编译

	// ** 表示任意目录  * 表示任意文件
	"include": ["./src/**/*"]

2. "exclude" 不需要被编译的文件目录，默认值：[“node_modules”, “bower_components”, “jspm_packages”]

	// 不需要编译 src下的 hello文件里的内容
	"exclude": ["./src/hello/**/*"]

3. "extends" 定义被继承的配置文件

    // 当前配置文件中会自动包含 config目录下 base.json中的所有配置信息
    "extends": "./configs/base"

4. "files" 指定被编译文件的列表，只有需要编译的文件少时才会用到

	// 列表中的文件都会被 TS编译器所编译
    "files": [
        "hello.ts",
        "index.ts"
    ]

TS 编译选项（二）

compilerOptions 编译选项是配置文件中非常重要也比较复杂的配置选项
在 compilerOptions 中包含多个子选项，用来完成对编译的配置

0. "strict" 所有严格检查的总开关

	"strict": true

1. "target" 用来指定 ts 被编译为的 js 版本

可选值：

'es3'， 'es5'， 'es6'， 'es2015'， 'es2016'， 'es2017'， 'es2018'， 'es2019'， 'es2020'， 'es2021'， 'es2022'， 'esnext’.

示例：

	"compilerOptions": {
    
    
		"target": "ES6" // ts代码将会被编译为 ES6版本的 js代码 
	}

2. "module" 用来指定要使用的模块化的规范

可选项：

'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es6'， 'es2015'， 'es2020'， 'es2022'， 'esnext'， 'node16'， 'nodenext'.

示例：

	"compilerOptions": {
    
    
		"module": "es6", // ts代码将会被编译为 ES6版本的模块化规范 
	}

3. "lib" 用来指定项目中要使用的库

通过终端键入 tsc 可查看可选项

示例：

	"compilerOptions": {
    
    
		"lib": ["dom"]  
	}

4. "outDir" 用来指定编译后文件所在的目录

示例：

	"compilerOptions": {
    
    
		"outDir": "./dist" // 编译后的js文件都会放到 dist文件夹下
	}

编译后的文件放在 dist中：

5. "outFile" 将代码合并为一个文件。设置 outFile 后，所有的全局作用域中的代码会合并到同一个文件

示例：

	"compilerOptions": {
    
    
		"outDir": "./dist",
		"outFile": "./dist/app.js"
	}

合并到app.js 中：

TS 编译选项（三）

1. "allowJs" 是否对 js 文件进行编译，默认是 false

	"compilerOptions": {
    
    
		"allowJs": true, // 会对 js文件进行编译
	}

2. "checkJs" 是否检查 js 代码是否符合语法规范，默认是 false（allowJs 与 checkJs 一般一块使用）

	"compilerOptions": {
    
    
		"checkJs": true // 会对 js代码检查语法规范
	}

3. "removeComments" 是否移出注释

	"compilerOptions": {
    
    
		"removeComments": true // 编译后没有注释
	}

4. "noEmit" 是否生成编译后的文件（一般用来检查文件是否有错误并不想生成文件时使用）

	"compilerOptions": {
    
    
		"noEmit": true // 不生成编译后的文件
	}

5. "noEmitOnError" 当有错误时是否生成编译后的文件

	"compilerOptions": {
    
    
		"noEmitOnError": true // 当有错误时不生成编译后的文件
	}

TS 编译选项（四）

1. "alwaysStrict" 用来设置编译后的文件是否使用严格模式，默认为 false

	"compilerOptions": {
    
    
		"alwaysStrict": true // 编译后的文件使用严格模式
	}

2. "noImplicitAny" 不允许隐式的 any 类型

	"compilerOptions": {
    
    
		"noImplicitAny": true // 不允许使用隐式 any类型
	}

以下代码会报错：

	//参数“a”隐式具有“any”类型
	function fn(a, b: number){
    
    
	    return a + b
	}

解决办法：指定 a 的类型

3. "noImplicitThis" 不允许不明确类型的 this

	"compilerOptions": {
    
    
		"noImplicitThis": true,
	}

以下代码会报错：

	// 报错：参数 “this” 隐式具有 “any” 类型。
	function fn2(this){
    
    
	    alert(this)
	}

解决方法：可以给 this 指定指向的值

	function fn2(this: Window){
    
    
	    alert(this)  // this指向 window
	}

4. "strictNullChecks" 严格的检查空值

	"compilerOptions": {
    
    
		"strictNullChecks": true
	}

以下代码会报错：

	// 报错：对象可能为 null
	let box = document.getElementById('box')
	box.addEventListener('click', function(){
    
    
	    alert('hello')
	})

解决方法：给 box后面加 ?

	let box = document.getElementById('box')
	box?.addEventListener('click', function(){
    
    
	    alert('hello')
	})

相当于：

	if(box !== null) {
    
    
	    box.addEventListener('click', function() {
    
    
	        alert('hello')
	    })
	}

使用 webpack 打包 ts 代码

使用 webpack 打包 ts 代码（一）

1. 终端键入：npm init -y，初始化项目，生成 package.json 文件
   
2. 安装依赖：npm i -D webpack webpack-cli typescript ts-loader，生成node_modules 配置文件
   
3. 编写 webpack 的配置文件 webpack.config.js

	// 引入一个包
	const path = require('path')
	
	// webpack中的所有的配置信息都应该写在module.exports中
	module.exports = {
    
    
	    // 指定入口文件
	    entry: "./src/index.ts",
	
	    // 指定打包文件所在目录
	    output: {
    
    
	        // 指定打包文件的目录
	        path: path.resolve(__dirname, 'dist'),
	        // 打包后文件的文件
	        filename: "bundle.js"
	    },
	
	    // 指定webpack打包时要使用的模块
	    module: {
    
    
	        // 指定要加载的规则
	        rules: [
	            {
    
    
	                // test指定的是规则生效的文件
	                test: /\.ts$/,
	                // 要使用的loader
	                use: 'ts-loader',
	                // 要排除的文件
	                exclude: /node_modules/
	            }
	        ]
	    }
	}

4. 编写 tsconfig 的配置文件 tsconfig.json

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

5. 修改 package.json，加上 build 命令
   
6. 终端键入：npm run build，生成 dist 文件

总的文件如下：

7. 在 index.ts 中写入以下代码

	function sum(a: number, b: number): number{
    
    
	    return a + b
	}
	
	console.log(sum(10, 2))

执行 npm run build 命令后，在 dist 下的 bundle.js 中生成如下代码

使用 webpack 打包 ts 代码（二）

1. 终端键入：npm i -D html-webpack-plugin，帮助我们自动的生成 html 文件

可以发现，package.json 中多了如下代码，说明安装成功

2. 修改 webpack.config.js 文件代码，引入并使用 html 插件
   
   
   终端键入：npm run build，在 dist 下自动生成 index.html
   
3. 可以为生成的 dist 文件下的 index.html 配置模板
   
   终端键入：npm run build 后，在 dist 下的 index.html 中自动生成模板内容
   
4. 终端键入：npm i -D webpack-dev-server，安装 webpack 的开发服务器，在 package.json 中添加如下代码

终端键入：npm start，自动打开浏览器

5. 终端键入：npm i -D clean-webpack-plugin，用于清除打包之后 dist 目录下的其他多余或者无用的代码。在 webpack.config.js 文件中添加以下代码

6. 设置引用模块

m1.ts 代码：

index.ts 代码

需要在 webpack.config.js 中进行如下配置才可以成功运行：

终端键入 npm run build 后生成的文件：

使用 webpack 打包 ts 代码（三）

1. 终端键入：npm i -D @babel/core @babel/preset-env babel-loader core-js， 安装 babel 和 core-js 配置，添加如下内容
   

index.ts（使用 const 声明）

终端键入：npm run build，得到的 js 文件如下（使用 var 声明）

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…