类型声明
给变量设置类型，使得变量只能存储某种类型的值
- 声明一个变量 ，同时指定它的类型
// 声明一个变量 a，同时指定它的类型为 number let a: number // a 的类型设置为了number，在以后的使用过程中a的值只能是数字 a = 10 // a = 'hello' // 此行代码会报错，因为变量a的类型是number，不能赋值字符串
- 声明完变量直接进行赋值
// 声明完变量 b 后，直接赋值为 false let b: boolean = false
- 变量的声明和赋值是同时进行，TS自动对变量进行类型检测
let c = false c = true // c = '123' // 自动检测为boolean类型，此行代码会报错
- 函数声明，指定参数和返回值的类型
// 指定参数的类型，指定返回值的类型 function sum(e: number, f: number): number{ return e + f } let result = sum(10, 2) console.log(result) // 12
TS 中的类型
类型总览：
TS 中的类型（一）
- 直接使用字面量对类型声明
// 直接使用字面量对类型声明，可以使用 | 来连接多个类型（联合类型） let a: 'male' | 'female' a = 'male' a = 'female' // a = 'hello' // 报错
- any 任意类型（尽量避免使用）
let b: any b = 2 b = 'hello'
- unknown 表示未知类型的值
let c: unknown c = 10 c = 'hello'
- 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 }
- 类型断言，用来告诉解析器变量的实际类型（两种写法）
let c: unknown let s: string s = c as string or s = <string> c
- void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void { }
- never 表示永远不会返回结果
function fn2(): never{ throw new Error('报错了！') }
TS 中的类型（二）
- object 表示一个 js 对象
let a: object a = {} a = function (){}
- {} 用来指定对象中可以包含哪些属性，语法：{ 属性名: 属性值 }，在属性名后面加上 ?，表示属性是可选的
let b: {name: string, age?: number} b = {name: '张三', age: 20}
- [propName: string]: any 表示任意类型的属性
let c: {name: string, [propName: string]: any} c = {name: '李四', age: 21, gender: '男'}
- 设置函数结构的类型声明：(形参: 类型, 形参: 类型...) => 返回值
let d: (a: number, b: number) => number d = function(n1: number, n2: number): number { return n1 + n2 }
- 数组的类型声明（两种方式）
// string[] 表示字符串数组 let e: string[] e = ['a', 'b', 'c']
// number[] 表示数值数组 let f: number[] or let g: Array<number> g = [1, 2, 3]
- 元组：固定长度的数组
let h: [string, string] h = ['hello', 'abc']
- 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
- & 与
let j: {name: string} & {age: number} j = {name: '大白', age: 18}
- 类型的别名
type myType = 1 | 2 | 3 | 4 let k: myType let l: myType
TS 编译选项
创建 tsconfig.json 文件：tsconfig.json 是 ts 编译器的配置文件，ts 编译器可以根据它的信息来对代码进行编译
TS 编译选项（一）
- "include" 用来指定哪些 ts 文件需要被编译
// ** 表示任意目录 * 表示任意文件 "include": ["./src/**/*"]
- "exclude" 不需要被编译的文件目录，默认值：[“node_modules”, “bower_components”, “jspm_packages”]
// 不需要编译 src下的 hello文件里的内容 "exclude": ["./src/hello/**/*"]
extends" 定义被继承的配置文件
// 当前配置文件中会自动包含 config目录下 base.json中的所有配置信息 "extends": "./configs/base"
- "files" 指定被编译文件的列表，只有需要编译的文件少时才会用到
// 列表中的文件都会被 TS编译器所编译 "files": [ "hello.ts", "index.ts" ]
TS 编译选项（二）
compilerOptions 编译选项是配置文件中非常重要也比较复杂的配置选项
在 compilerOptions 中包含多个子选项，用来完成对编译的配置
- "strict" 所有严格检查的总开关
"strict": true
"target" 用来指定 ts 被编译为的 js 版本
可选值：
'es3'， 'es5'， 'es6'， 'es2015'， 'es2016'， 'es2017'， 'es2018'， 'es2019'， 'es2020'， 'es2021'， 'es2022'， 'esnext’.
示例：
"compilerOptions": { "target": "ES6" // ts代码将会被编译为 ES6版本的 js代码 }
"module" 用来指定要使用的模块化的规范
可选项：
'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es6'， 'es2015'， 'es2020'， 'es2022'， 'esnext'， 'node16'， 'nodenext'.
示例：
"compilerOptions": { "module": "es6", // ts代码将会被编译为 ES6版本的模块化规范 }
- "lib" 用来指定项目中要使用的库
通过终端键入 tsc 可查看可选项
示例：
"compilerOptions": { "lib": ["dom"] }
- "outDir" 用来指定编译后文件所在的目录
示例：
"compilerOptions": { "outDir": "./dist" // 编译后的js文件都会放到 dist文件夹下 }
编译后的文件放在 dist中：
- "outFile" 将代码合并为一个文件。设置 outFile 后，所有的全局作用域中的代码会合并到同一个文件
示例：
"compilerOptions": { "outDir": "./dist", "outFile": "./dist/app.js" }
合并到app.js 中：
TS 编译选项（三）
- "allowJs" 是否对 js 文件进行编译，默认是 false
"compilerOptions": { "allowJs": true, // 会对 js文件进行编译 }
- "checkJs" 是否检查 js 代码是否符合语法规范，默认是 false（allowJs 与 checkJs 一般一块使用）
"compilerOptions": { "checkJs": true // 会对 js代码检查语法规范 }
- "removeComments" 是否移出注释
"compilerOptions": { "removeComments": true // 编译后没有注释 }
- "noEmit" 是否生成编译后的文件（一般用来检查文件是否有错误并不想生成文件时使用）
"compilerOptions": { "noEmit": true // 不生成编译后的文件 }
- "noEmitOnError" 当有错误时是否生成编译后的文件
"compilerOptions": { "noEmitOnError": true // 当有错误时不生成编译后的文件 }
TS 编译选项（四）
- "alwaysStrict" 用来设置编译后的文件是否使用严格模式，默认为 false
"compilerOptions": { "alwaysStrict": true // 编译后的文件使用严格模式 }
- "noImplicitAny" 不允许隐式的 any 类型
"compilerOptions": { "noImplicitAny": true // 不允许使用隐式 any类型 }
以下代码会报错：
//参数“a”隐式具有“any”类型 function fn(a, b: number){ return a + b }
解决办法：指定 a 的类型
- "noImplicitThis" 不允许不明确类型的 this
"compilerOptions": { "noImplicitThis": true, }
以下代码会报错：
// 报错：参数 “this” 隐式具有 “any” 类型。 function fn2(this){ alert(this) }
解决方法：可以给 this 指定指向的值
function fn2(this: Window){ alert(this) // this指向 window }
- "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 代码（一）
- 终端键入：npm init -y，初始化项目，生成
package.json文件 
- 安装依赖：npm i -D webpack webpack-cli typescript ts-loader，生成node_modules 配置文件
- 编写 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/ } ] } }
- 编写 tsconfig 的配置文件 tsconfig.json
{ "compilerOptions": { "module": "ES2015", "target": "ES2015", "strict": true } }
修改 package.json，加上 build 命令
- 终端键入：npm run build，生成 dist 文件
总的文件如下：
- 在 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 代码（二）
- 终端键入：npm i -D html-webpack-plugin，帮助我们自动的生成 html 文件
可以发现，package.json 中多了如下代码，说明安装成功
修改 webpack.config.js 文件代码，引入并使用 html 插件
终端键入：npm run build，在 dist 下自动生成 index.html、
可以为生成的 dist 文件下的 index.html 配置模板
终端键入：npm run build 后，在 dist 下的 index.html 中自动生成模板内容
- 终端键入：npm i -D webpack-dev-server，安装 webpack 的开发服务器，在 package.json 中添加如下代码
- 终端键入：npm start，自动打开浏览器
- 终端键入：npm i -D clean-webpack-plugin，用于清除打包之后 dist 目录下的其他多余或者无用的代码。在 webpack.config.js 文件中添加以下代码
- 设置引用模块
m1.ts 代码：
index.ts 代码
需要在 webpack.config.js 中进行如下配置才可以成功运行：
终端键入 npm run build 后生成的文件：
使用 webpack 打包 ts 代码（三）
- 终端键入：npm i -D @babel/core @babel/preset-env babel-loader core-js， 安装 babel 和 core-js 配置，添加如下内容
- index.ts（使用 const 声明）
- 终端键入：npm run build，得到的 js 文件如下（使用 var 声明）
- 不积跬步无以至千里 不积小流无以成江海
