[TOC]
1 前期准备工作
插件 fileheader korofileheader
https://www.cnblogs.com/wangj...
1.1 TypeScript的简介
- TypeScript是JavaScript类型的超集，可以搬移成纯JavaScript
- TypeScript可以在任何浏览器、任何计算机和操作系统上运行，由微软公司开发并开源
3、TypeScript 更像后端 jav、C#这样的面向对象语言，可以让 js 开发大型企业项目。
4、谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+就是基于 Typescript 语法。
5、最新的 Vue 、React 也可以集成 TypeScript。
6、Nodejs 框架 Nestj、midway 中用的就是 TypeScript 语法。
1.2 TypeScript与JavaScript的关系
- TypeScript是JavaScript的超集，遵循最新的 ES6、Es5 规范 是以JavaScript为基础构建的语言
- TypeScript对JS进行了扩展，向JS中引入了类型的概念，并添加了很多的新的特性
- TS代码不能直接运行，需要通过编译器编译成JS代码，然后交由JS解析器执行
- TS完全兼容JS，换而言之，任何JS代码都可以直接当TS使用
- 相对于JS，TS拥有静态类型，更严格的语法，更强大的功能
1.3 TypeScript的优点
- TS可以在代码执行前就完成代码的检查，减少了运行时异常出现的几率
- TS可以编译成任意版本的JS代码，可以有效地解决不同JS运行环境的兼容问题
- 同样的功能，TS的代码量要大于JS，但由与TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS要远远胜与JS、
1.4 TypeScript开发环境搭建
下载Node.js（建议用稳定版）
- 安装完在命令行输入node -v 查看node版本
如果出现版本信息，证明node安装成功 - 使用npm全局安装typescript
在命令行输入 npm i -g typescript / cnpm instal -g typescript
- 安装完在命令行输入node -v 查看node版本
yarn globald typescript
安装cnpm yarn
npm instal -g cnpm -registry=htps:/registry.npm.taobao.org
npm i yarn -g
2. 然后在命令行输入tsc，出现版本信息以及操作提示证明安装成功
3. 创建一个简单的ts文件，注意后缀名为.ts
4. 在命令行窗口进行编译
进到所在的目录，输入命令` tsc helloTS.ts `
完成后可以看到以及编译成功的js文件
至此TypeScript的环境搭建完毕
快捷方式：
全局安装ts-node 工具
npm i ts-node -g
ts-node xxx.ts
2 基本类型
2.1 类型声明/注解
- 类型声明是TS中非常重要的一个特点，也是TS对JS改造的最重要的点
- 通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合声明，符合则赋值，否则报错 但是不妨碍ts编译生成 js【js没类型检查 是符合js的语法的】
定义 a 的类型设置为了number，在以后的使用过程中a的值只能是数字 let a: number; a = 33; a = 'hello'; // 此行代码会报错，[不能将类型“string”分配给类型“number”].因为变量a的类型是number，不能把字符串赋值给数字简而言之，类型声明给变量设置了类型，使得变量存储某种类型的值.
一般我们会在声明变量的同时直接赋值。不会像前面那样后面赋值。 类型声明最大的用处是在函数的参数与返回值的类型 JS中的函数是不考虑参数的类型和个数的 function sum(a, b){ return a + b; } console.log(sum(123, 456)); // 579 console.log(sum(123, "456")); // "123456" function sum(a: number, b: number): number { return a + b; } // res的类型是自动判断的 let res = sum(123, 345); let res = sum(123, '456'); // 报错
typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验.写ts代码必须指定类型.在typescript中主要给我们提供了以下数据类型
2.2 基本类型种类
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1, -33, 2.5 | 任意数字 |
| string | 'hi', "hi", hi | 任意字符串 |
| boolean | true、false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值（undefined） | 没有值（或undefined） |
| never | 没有值 | 不能是任何值 |
| object | {name:'孙悟空'} | 任意的JS对象 |
| array | [1,2,3] | 任意JS数组 |
| tuple | [4,5] | 元素，TS新增类型，固定长度数组 |
| enum | enum{A, B} | 枚举，TS中新增类型 |
| function | let a: ()=>string = ()=>'123' | 函数 |
number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;boolean
let isDone: boolean = false;string
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} years old next month.`;字面量
使用字面量去指定变量的类型，通过字面量可以限制变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
// 下面的语句相当于定义了一个a3常量；
let a3: 10;
// a3 = 11; // 尝试将a3赋值为11，报错；
// 使用场景
let b4: "male" | "female";// b4只能是male或者female
b4 = "male";
b4 = "female";any
any 表示的是任意类型，可任意赋值。一个变量设置类型为any后相当于：对该变量关闭了TS的类型检测！使用TS时，强烈不建议使用any类型
let d: any = 4;
d = 'hello';
d = true;
// 隐式any 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）a61
let a61;
a61 = 10;
unknown
变量类型未知
let notSure: unknown = 4;
notSure = 'hello';
notSure=10- 区别
any可以赋值给其他类型的变量，TS也会同时关闭对那个赋值变量的类型检查！
unknown类型，它不能赋值给一个确定类型！unknown 实际上就是一个类型安全的any
let s: string = 'hello';
let m2;
m2 = 90;
s = m2; // 可以 s明明是一个字符串 结果值却是数字
let n2:unknown;
n2=‘90’;
s=n2 // 报错 unknown类型，它不能赋值给其他类型 注意是unknow
解决 unknown类型不可以赋值给其他类型
let cc:unknown;
cc = 'hello';
console.log(typeof cc ); // string 有意思
let ss:string;
// 1
if (typeof cc === "string") {
ss = cc;
console.log('00');
} else {
console.log('1');
}
// 2 cc就是string类型 编译器你大胆赋值
ss=cc as string;
// 3
ss=<string>cc
void
void 用来表示空，主要用于函数中 表示没有返回值的函数
/*
声明类型不为 "void" 或 "any" 的函数必须返回值
不声明函数的类型 会根据返回值类型自动判断
*/
// function a(): boolean
function a () {
return true
}
// function b(): void
function b () {
}
// function c(num: number): true | "123"
function c (num:number) {
return (num>0) ? true : '123'
}
// 声明了那你的return的返回值类型就必须是声明的
function d():void {
console.log('123');
// return 12 //不能将类型“number”分配给类型“void
/*解决方式 返回 void
1 不写return
2. return ;
3. return undefined;
4. return null; //不能将类型“null”分配给类型“void” 修改配置
*/
}
d()never
类似void void是空，never是没有值。是其他类型 （包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。
function error(message: string): never {
throw new Error(message);
}
// never 表示永远不会返回结果（连undefined都没有）[较少使用]
// 用于定义报错函数
// 下面的函数没有返回值（连undefined都没有），仅抛出error
function fn2(): never {
throw new Error('报错了！');
// 程序直接抛出错误 没有返回值 不处理不会往下进行的
}
function fn3(): never {
while(1) console.log(111)
// 死循环 没有返回值 不处理不会往下进行的
}
undefined null
let unusable: void = undefined;
不是所有时候可以赋值 看ts.config.json
object
let obj: object = {};
// {} 用来指定对象中可以包含哪些属性
// 在属性名后边加上?，表示属性是可选的
let xiaojiejie:{name:string,age?:number} ={name:'oo'}
class Person{};
let a:Person = new person()
// [propName: string]: any 表示任意类型的属性
// 所以下面定义了一个必须包含name属性，其他属性随意的类型
let c65: { name: string, [propName: string]: any };
c65 = {name: '猪八戒', age: 18, gender: '男'};array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let list: (number|string)[] = [1, 'hello', 3];
let list: { name:string,age?:number }[] = [{name: 'pp',age: 18}];
// 为什么空可以
let d:number[] =[];
// 类型有时候是被为字面量类型tuple
元组就是固定长度的数组 相比于数组，元组的性能更高一些
let x: [string, number];
x = ["hello", 10]; enum
随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。 在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。 如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值， 这种方法称为枚举方法，用这种方法定义的类型称枚举类型.
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
} ;
let person:{name:string, gender:string}
/*
对于性别来说，使用字字符来存储浪费空间，它的值无非就是几个之一
*/
let person2:{name: string, gender: 0 | 1}
person2 = {
name:'kkk',
gender: 0
}
if(person2.gender === 0 ){
console.log('男');
}
/*
使用数字存储来节省空间，但是别人用并不知道0 是啥 你自己判断可以定义
*/
enum Gender {
Male = 0,
Female
}
let person3:{name: string, gender: Gender}
person3={name:'xiaomin', gender: Gender.Male}
// 查看编译
https://www.typescriptlang.org/play/index.html
Color[Color["RED"] = 0] = "RED";
// Color["RED"] = 0 将red属性值设为0 返回值为0
// Color[Color["RED"] = 0] = "RED"; j索引 0的值为REDfunction
设置函数结构的类型声明：
* 语法：(形参:类型, 形参:类型 ...) => 返回值
let a: ()=>string = ()=>'123'
联合类型
|表示任意一个
let a:string|number
&表示同时满足的类型
let a:string&number
let a5: { name: string } & { age: number };
2.3 类型别名
使用关键字type
let k = 1 | 2 | 3 | 4 | 5;
let l = 1 | 2 | 3 | 4 | 5;
type myType = 1 | 2 | 3 | 4 | 5; 给 1 | 2 | 3 | 4 | 5 起别名
type myType1 = string 给string起别名
let k: myType;
let l: myType;
let m: myType;2.4 自动类型判断
TS拥有自动的类型判断机制。当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型。就是赋值时如果不写声明会自动判断。 所以当变量和声明自动进行时，可以省略掉类型声明
let c = false;
c = 123;
不能将类型“number”分配给类型“boolean”//声明一个变量a，同时指定它的类型为number
let a:number;
//a 的类型设置为number，在以后的使用过程中a的值只能时数字
a=22;
a=33;
// a="hello" //此行代码会报错，因为变量a的类型时number，不能赋值为字符串
//声明完变量直接赋值
let c:boolean = false;
// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let d = false;
// d="abc" //此行会报错
d = true;
const 推断
2.5 类型断言
帮助编译器判断变量的实际类型
有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;//可以直接使用字面量进行类型声明
let a:10
a = 10
//可以使用|来连接多个类型（联合类型）
let b:"male"|"female";
b = "male";
b = "female"
// b = "hello" //出错，因为hello不属于上面这两个值
let c: boolean | string;
c = true;
c = 'hello'
// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any;
// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）
let d;
d = 10;
d = 'hello';
d = true;
// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;
let s:string;
// d的类型是any，它可以赋值给任意变量
// s = d;
e = 'hello';
//s = e //报错 因为s的的类型是字符串，而e的类型是unknown,两者的类型不等
// unknown 实际上就是一个类型安全的any
// unknown类型的变量，不能直接赋值给其他变量
if(typeof e === "string"){ //只有类型是string是才能赋值
s = e;
}
// 类型断言，可以用来告诉解析器变量的实际类型
/*
* 语法：两种
* 变量 as 类型
* <类型>变量
* 两种用法的效果是一样的
* */
s = e as string;
s = <string>e
// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void{
}
// never 表示永远不会返回结果
function fn2(): never{
throw new Error('报错了！');
}//object表示一个js对象
let a :object;
a={}
a = function(){};
//{}用来指定对象种可以包含哪些属性
//语法：{属性名：属性值，属性名：属性值} 注意要与声明的类型和个数一致
//属性后面加一个？表示属性是可选的
let b:{name:string,age?:number};
b={name:'佩奇',age:18}
b={name:'孙悟空'}
//[xxx:类型]:any表示任意类型的属性
//这样写表示只要求拥有一个name的属性，类型是string，其他的我都不管
let c:{name:string,[proName:string]:any};
c={name:'猪八戒',a:1,c:'male'}
/**
* 利用箭头函数来设置函数结构的声明类型
* 语法：(形参：类型,形参：类型) => 返回值类型
*
*/
//限制d为一个函数，拥有两个number类型的形参，返回值为number
let d:(a:number,b:number) => number;
d = function(num1,num2):number{
return num1+num2
}
/*
* 数组的类型声明：
* 类型[]
* Array<类型>
* */
//string[] 表示字符串数组
let e:string[]
let f:number[]
let g:Array<number>
e=['ds','a']
g=[1,3,6,9,6]
/**
* tuple
* 元组：固定长度的数组
*/
let h:[string,string];
h=['hello','world']
//h=['hello','world','!'] 有且只能有两个
/**
* enum 枚举
* 把所有可能的情况列举出来
*
*/
//定义一个枚举型
enum Gender{
Male,
Female
}
let i:{name:string,gender:Gender}
i = {
name:'孙悟空',
gender:Gender.Male
}
// console.log(i.gender === Gender.Male);
//&表示同时
let j :{name:string}&{age:number}
//类型的别名,可以简化类型的使用
// type myType = string;
// let m :myType;
type myType = 1|2|3|4|5
let k : myType;
let l : myType
静态类型 定义后不可以变化，如果是接口的话，属性也是定下了
let count:number = 1 count是number类型不可以变化 除此之外这个值继承了Number类上的方法
3 编译选项
3.1 自动编译文件
- tsc --init 生成tsconfig.json （任务 - 运行任务 监视tsconfig.json）
- 编译文件时，使用 -w指令，TS编译器会自动监视文件的变化，并在文件发送变化时对文件进行重新编译 但是是整个文件夹都被编译了
- 指令：
tsc xxx.ts -w
3.2 自动编译整个项目
- 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
- tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
- tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译 此json文件中可以写注释
- 配置选项：
include
- 定义希望被编译文件所在的目录 也就是那些ts文件需要编译
默认：当前路径下所有文件, */
路径：** 表示任意目录
* 表示任意文件
示例
"include":["src/**/*", "tests/**/*"] //所有src目录和tests目录下的文件都会被编译，注意src的所在的路径
exclude
- 定义需要不需要编译的目录
- 默认值： ["node_modules", "bower_components", "jspm_packages", "./dist"]
示例
"exclude": ["./src/hello/**/*"] //src下hello目录下的文件都不会被编译
extends
- 定义继承的配置json文件
示例：
"extends": "./configs/base" //当前配置文件中会自动包含config目录下base.json中的所有配置信息
files（很少用）
- 定义需要编译文件的列表，只有需要编译的文件少时才会用到
示例
"files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ] //列表中的文件都会被TS编译器所编译
compilerOptions
编译器选项 决定编译如何对ts编译 . 编译选项是配置文件中非常重要也比较复杂的配置选项,在compilerOptions中包含多个子选项
target
设置ts代码编译后的目标js版本. 保证浏览器的兼容性 不同的浏览器可能支持的js版本不同
可选值：【当输入一个错误的值时，编译器会提示有哪些可以选择的选项】
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
示例：
//我们所编写的ts代码将会被编译为ES6版本的js代码 "compilerOptions": { "target": "ES6" }
lib
项目运行时所包含的库（宿主环境）【一般不需要设置]
除了js标准规范还有第三方库 ，你要是运行在node环境，就需要配置dom库
默认值： 浏览器运行环境
"lib": ["ES6", "DOM"],
module
设置编译后js代码使用的模块化系统
- 可选值：'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
示例：
"compilerOptions": { "module": "CommonJS" }
outDir
编译后文件的所在目录
- 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
示例：
//设置后编译后的js文件将会生成到dist目录 "compilerOptions": { "outDir": "dist" }
outFile
将所有的文件编译为一个js文件
- 默认会将所有的编写在全局作用域中的代码合并为一个js文件，就是使用了模块化这里会报错。需要设置module为None、System或AMD则会将使用模块编写的也一起合并到文件之中。这些配置实际上是打包工具做的
示例：
"compilerOptions": { "outFile": "dist/app.js" }
rootDir
指定代码的根目录
- 默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
示例：
"compilerOptions": { "rootDir": "./src" }
allowJs
是否对js文件编译，默认是false 值为true或false. 如果想要编译模块js文件使用true
dist文件中会有这个js
checkJs
是否对js文件进行检查 检查js文件是否符合ts语法规范 默认是false
示例：
"compilerOptions": { "allowJs": true, "checkJs": true }
其他
- removeComments：编译后的文件是否删除注释，默认值为false
- noEmit：不对代码进行编译，即生成编译后的文件，默认值为false 场景 只是使用ts的类型检查 不编译成js
- noEmitOnError 当有错误时不生成编译后的文件 避免错误代码注入进dist
- sourceMap：是否生成sourceMap，默认值：false
语法检查相关
严格检查 strict
- strict：启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查**
- alwaysStrict：用来设置编译后的文件是否使用严格模式，默认false 在ES6中的模块化会自动使用严格模式，也就是这种js文件你看不见use strict字样。而无需在文件开头添加`'use strict'
- noImplicitAny：禁止隐式的any类型
- noImplicitThis：禁止类型不明确的this this 值不确定 严格模式与非严格 以及调用方式的不同导致this类型不明确 你需要明确类型 this:any
- strictBindCallApply：严格检查bind、call和apply的参数列表
- strictFunctionTypes：严格检查函数的类型
strictNullChecks：严格的空值检查 你需要处理null
box1.addEventListener('click', function () { alert('hello'); }); //box1元素可能是不存在的，此时空指针报错！ // 解决方法1： if(box1 !== null){ box1.addEventListener('click', function (){ alert('hello'); }); } // 解决方法2： box1?.addEventListener('click', function () { alert('hello'); });
- strictPropertyInitialization：严格检查属性是否初始化
额外检查
- noFallthroughCasesInSwitch：检查switch语句包含正确的break
- noImplicitReturns：检查函数没有隐式的返回值
- noUnusedLocals：检查未使用的局部变量
- noUnusedParameters：检查未使用的参数
高级使用
allowUnreachableCode：检查不可达代码
可选值：true，忽略不可达的代码
false：不可达代码将引发错误
- noEmitOnError：有错误的情况下不进行编译，默认值：false
4 用webpack配置TS
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用
步骤
初始化项目
进入项目根目录，执行命令
npm init -y，创建package.json文件下载构建工具：
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin共安装 7 webpack依赖包：
- webpack：构建工具webpack
- webpack-cli：webpack的命令行工具
- webpack-dev-server：webpack的开发服务器 内置服务器 关联webpack
- typesript：ts编译器
- ts-loader：ts加载器，用于在webpack中编译ts文件
- html-webpack-plugin：webpack中html插件，用来自动创建html文件
- clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录
根目录下创建webpack的配置文件webpack.config.js
//引入一个包 const path = require("path"); //引入html 插件 const HTMLWebpackPlugin = require('html-webpack-plugin') //引入clean插件 const {CleanWebpackPlugin} = require('clean-webpack-plugin') //webpack中的所有配置信息都要写在module.exports中 module.exports = { //指定入口文件 entry:"./src/index.ts", //指定打包文件所在目录 output:{ //指定打包文件所在的目录 path:path.resolve(__dirname,'dist'), //打包后的文件名 filename:'bundle.js' }, //指定webpack打包时要使用的模块 ts如何编译为js module:{ //指定要loader加载的规则 rules:[ { //test指定规则生效的文件,写正则表达式 test:/\.ts$/, // 使用ts loader 进行处理以ts结尾的文件 use:'ts-loader', //要排除的文件 exclude:/node-modules/ } ] }, plugins:[ new CleanWebpackPlugin(), new HTMLWebpackPlugin({ // title:'只是一个自定义题目' template:'./src/index.html' }) ], //用来设置引用模块 resolve:{ extensions:['.ts','.js'] }, mode:'development',//开发模式 }根目录下创建tsconfig.json，配置可以根据自己需要
{ "compilerOptions": { "target": "ES2015", "module": "ES2015", "strict": true } }修改package.json添加如下配置
{ ...略... "scripts": { "build": "webpack", "start":"webpack server --open chrome.exe" }, ...略... }- 在src下创建ts文件，并在并命令行执行
npm run build对代码进行编译，或者执行npm start来启动开发服务器
5 Babel
经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。
安装依赖包：
- 命令：
npm i -D @babel/core @babel/preset-env babel-loader core-js 共安装了4个包，分别是：
1）@babel/core：babel的核心工具
2）@babel/preset-env：babel的预定义环境
3）@babel-loader ：babel在webpack中的加载器
4）core-js：core-js用来使老版本的浏览器支持新版ES语法
- 命令：
修改webpack.config.js配置文件
...略... //指定要加载的规则 rules:[ { //test指定规则生效的文件,写正则表达式 test:/\.ts$/, // 使用哪些 loader 进行处 use:[ //配置babel { //指定加载器 loader:"babel-loader", //设置babel options:{ //设置预定义的环境 presets:[ [ //指定环境的插件 "@babel/preset-env", //配置信息 { //要兼容的标准 targets: { //兼容的版本 "chrome":"58", "ie":"11"//ie11不支持Promise语法，所以在打包过程中corejs会自动转换promise }, //指定corejs的版本 "corejs":"3", //指定corejs的方式，"usage"表示按需加载 "useBuiltIns":"usage" } ] ] }, }, 'ts-loader' ], //要排除的文件 exclude:/node-modules/ } ] ...略...注意如果要兼容ie11，可能会出现箭头函数的问题，所以要在webpack的output中加上
// 告诉webpack不使用箭头 environment:{ arrowFunction: false },
- 配置好webpack后，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，也可以在配置选项的targets中指定要兼容的浏览器版本
6 函数
6.1 函数的定义
（1）函数声明法
function f1() {};
（2） 函数表达式
let f2 = function(){}
6.2 可选参数
es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
6.3 默认参数
es5里面没法设置默认参数，es6和ts中都可以设置默认参数
6.4 剩余参数
三点运算符 接受新参传过来的值 function sum(...result:number[]):number;
6.5 函数重载
java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的
6.6 箭头函数
7 面向对象
7.1 前言
<font color =red>面向对象这部分和es6差不多，只是加了类型的限制，就当复习了</font>
面向对象是程序中一个非常重要的思想，简而言之就是程序之中所有的操作都需要通过对象来完成。
举例说：
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台使用console对象
一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。
7.2 类（class）
要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。
es6中的类
1. constructor是构造函数，每个类的定义必须有constructor方法，没有写构造函数，它也会默认加上一个空的。
2. getPosition方法是创建在Point的原型对象上的
3. 多个方法之间可以用分号隔开，切记不要用逗号
4. constructor 也可以自己去返回一个对象自己定义了return的返回，那么创建的实例就不再是你的实例了，使用instanceof。返回的是false。
5. es6中的实例必须使用new 关键字去调用类
6. es6 新增了可以不在构造函数中定义实例属性 直接写
7. es6中对象加入了set和get关键字 把一个属性age拆开成两个存取值函数。
当我们去读取属性值的时候，就会调用get修饰的方法。
当我们给这个属性赋值的时候就会调用set修饰的方法，set修饰的方法有个参数newValue 就是新赋的值
8. 在es6中类也可以使用set和get 位置与constructor同级
9. 直接定义在类里面的方法都会被实例继承，如果不希望实例继承某个方法，只想这个方法被类本身调用的时候，就需要将方法标记为静态方法
es6 使用static关键字来标识一个静态方法 es6中只有静态方法，并没有静态属性
10.实例的私有方法、私有属性，需要使用一些技巧来实现
（1）约定 以_开头的函数就是类中的私有方法 #开头的是私有属性
(2) 定义在全局中，类中使用call调用，此时实例无法拥有
(3) 借助symbol属性
11. new.target
es6中新增的，一般用于构造函数中，返回new命令作用于的构造函数
12. es5 A.prototype = new B()
13. 继承了父类的子类创建的实例，既是子类的实例也是父类的实例， Object.getPrototypeOf():
子类会将父类的静态方法也都继承过来，相当于父类的静态方法在子类中又定义了一遍
14. super
super可以作为函数使用，也可以作为对象来使用 不能只使用super不做任何的操作
作为函数使用代表的是父类的constructor，也就是构造函数
作为对象, 在普通方法中，它指向的是父类的原型对象 在静态方法中，它指向的是父类
15. 在es5中原生构造函数是没法继承的 在es6中允许继承原生构造函数
function common () {
console.log('common:', new.target); // undefiend
}
class A {
z =9;
constructor (x,y) {
this.x = x ;
this.y = y;
console.log("class:", new.target === A)
}
getPosition () {
console.log(A);// A是全局的函数 CLASS
console.log(`(${this.x}, ${this.y})`);
}
static getClassName () {
console.log(A.name);
console.log('static:', this === A); // true
}
static age = 19
}
class B extends A {
constructor() {
console.log("class:", new.target === B)
super()
}
};
common()
let a = new A(1,2)
console.log(new B());Ts中的类
定义
class 类名 {
属性名: 类型;
constructor(参数: 类型){
this.属性名 = 参数;
}
方法名(){
....
}
}// 使用class关键字来定义一个类
/*
* 对象中主要包含了两个部分：
* 属性
* 方法
* */
class Person{
/**
* 直接定义的属性时实例的属性，需要通过对象的实例去访问
* const per = new Person();
*
* 使用static开头的属性都是静态属性（类属性),可以直接通过类徐访问
* Person.age
*
* readonly开头的属性表示一个只读的属性无法修改
*/
//定义实例属性
//readonly name:string = '孙悟空';
name = '孙悟空'
//在属性前使用static关键字可以定义类属性（静态属性）
static readonly age:number = 18
age = 18
//定义方法
//如果以static开头则该方法时类方法，可以通过类去调用
sayHello(){
console.log("Hello TS");
}
}
const per = new Person();
console.log(per);
console.log(per.name,per.age);
console.log(Person.age);
per.name = 'tom'
console.log(per.name);
per.sayHello()
构造函数
class Dog{ name:string; age:number; //构造函数constructor 在对象创建时调用 constructor(name:string,age:number){ //在实例方法中，this就是当前的实例 //在构造函数中当前对象就是当前新建的那个对象 //可以通过this向新建的对象中添加属性 this.name = name this.age = age; } bark(){ console.log(this.name); } } // es6中的class 必须使用new调用 const dog1 = new Dog('小黑',4); const dog2 = new Dog('小白',2) console.log(dog1); console.log(dog2); dog1.bark() dog2.bark() 我们可以在构造函数 constructor 中定义属性，这样就不用在类中声明属性了，可以简化代码量必须要在属性前加上 public、private、readonly等修饰符才有效 class User { constructor( public name: string, public age: number ) {} public info(): string { return `${this.name}的年龄是 ${this.age}` } } const hd = new User('后盾人', 12);
继承
- 使用extends继承后，子类将会拥有父类所有的方法和属性
- 通过继承可以将多个类中共有的代码写在一个父类，这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
- 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法。这种子类覆盖掉父类方法的形式，我们称为重写
- 在类的方法中，super表示当前类的父类（也称为超类）如果在子类中写了构造函数，则在子类构造函数中必须对父类的构造函数进行调用
类里面的修饰符
类中的属性前添加属性的修饰符
public 修饰的属性可以在任意位置访问（修改）默认值. 默认情况下属性是 public （公开的），即可以在类的内部与外部修改和访问
private 私有属性, 私有属性只能在类内部进行访问（修改）不允许在子类与类的外部使用 ；但可以通过在类中添加方法使得私有属性可以被外部访问
protected 受保护的属性,只能在当前类和当前类的子类中访问(修改)
readonly 将属性定义为只读，不允许在类的内部与外部进行修改
限制
子类不能访问父类的 private 属性或方法
子类更改父类方法或属性的访问修饰符有些限制的
- 父类的 private 不允许子类修改
- 父类的 protected 子类可以修改为 protected 或 public
- 父类的 public 子类只能设置为 public
js和ts封装属性的区别
由于属性是在对象中设置的，属性可以任意的被修改，将会导致对象中的数据变得非常不安全。因此需要对属性进行封装。
js封装的属性存取器使用时需要调用相应的getter和setter方法；而ts封装的属性存取器使用时可直接当作变量来用就行。
加getter和setter方法只是为了对属性的值做判断，如果不需做判断则没必要使用。
readonly 在类里面可以适应readonly修饰符设置属性为只读的。设置只读的属性只能读取，但是不能修改
可选类属性
静态属性 静态方法
抽象类 多态
抽象 通常被其他类继承，而不直接创建实例，抽象类和内部定义的抽象方法都是用abstract关键字构造函数什么也不写在使用abstract构造一个抽象方法，方法需要修饰符。抽象类创建实例就会报错。无法创建抽象类的实例
- 以abstract 开头的类是抽象类
- 抽象类和其他类区别不大，只是不能用来创建对象
- 抽象类就是专门用来被继承的类
- 抽象类中可以添加抽象方法
抽象方法：抽象方法使用abstract开头，没有方法体；抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
下面是抽象类与接口的结合使用
interface AnimationInterface {
name: string
move(): void
}
abstract class Animation {
protected getPos(): { x: number; y: number } {
return { x: 100, y: 300 }
}
}
class Tank extends Animation implements AnimationInterface {
name: string = '敌方坦克'
public move(): void {
console.log(`${this.name}移动`)
}
}
class Player extends Animation {
name: string = '玩家'
public move(): void {
console.log(`${this.name}坦克移动`)
}
}
const hd = new Tank()
const play = new Player()
hd.move()
play.move()7.3 面向对象的特点
- 封装
- 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
- 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置
- 只读属性（readonly）：如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
TS中属性具有三种修饰符：
- public（默认值），可以在类、子类和对象中修改
- protected ，可以在类、子类中修改
- private ，可以在类中修改
示例：
public
class Person{ public name: string; // 写或什么都不写都是public public age: number; constructor(name: string, age: number){ this.name = name; // 可以在类中修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中可以修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 可以通过对象修改
protectd
class Person{ protected name: string; protected age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中可以修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改protect
class Person{ private name: string; private age: number; constructor(name: string, age: number){ this.name = name; // 可以修改 this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } class Employee extends Person{ constructor(name: string, age: number){ super(name, age); this.name = name; //子类中不能修改 } } const p = new Person('孙悟空', 18); p.name = '猪八戒';// 不能修改
属性存取器
- 对于一些不希望被任意修改的属性，可以将其设置为private
- 但直接将其设置为private将导致无法再通过对象修改其中的属性
- 因此我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
- 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
示例：
(function (){ //定义一个表示人的类 class Person{ //TS可以在属性前添加属性的修饰符 /** * public:修饰的属性可以在任意位置访问（修改）默认值 * private:私有属性，私有属性只能在类内部进行访问（修改） * ——通过在类中添加方法使得私有属性可以被外部访问 * protected:受保护属性。只能在当前类和当前类的子类中访问（修改） */ private name:string; private age:number; constructor(name:string , age:number){ this.name = name; this.age =age } /* * * getter 方法用来读取属性 * setter 方法用来设置属性 * ——它们被称为属性的存取器 */ //定义方法，用来获取name属性 /* getName(){ return this.name; } //定义方法，用来设置name属性 setName(value:string){ this.name = value; } //定义方法，用来获取age属性 getAge(){ return this.age; } //定义方法，用来设置age的值 setAge(value:number){ //判断年龄是否合法 if(value >= 0){ this.age = value } } */ //TS中设置getter和setter的方法，这种方法，就不用写per.getName了，直接写per.name即可 get Name(){ console.log("get name()执行了"); return this.name } set Name(value){ this.name = value } get Age(){ return this.age; } set Age(value:number){ //判断年龄是否合法 if(value >= 0){ this.age = value } } } const per = new Person("孙悟空",18) // console.log(per.getName()); console.log(per.Name);//实际上调用了get方法 console.log(per.Age); per.Name = '猪八戒' console.log(per.Name); per.Age = -33 console.log(per.Age);//改不了 class A{ protected num: number; constructor(num: number) { this.num = num; } } class B extends A{ test(){ console.log(this.num); } } const b = new B(123); console.log(b); // b.num = 33;//不能访问 /* class C{ name: string; age: number // 可以直接将属性定义在构造函数中 constructor(name: string, age: number) { this.name = name; this.age = age; } }*/ class C{ // 可以直接将属性定义在构造函数中 constructor(public name: string, public age: number) { } } const c = new C('xxx', 111); console.log(c); })()
静态属性
- 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
- 静态属性（方法）使用static开头
示例：
class Tools{ static PI = 3.1415926; static sum(num1: number, num2: number){ return num1 + num2 } } console.log(Tools.PI); console.log(Tools.sum(123, 456));
继承
- 继承是面向对象中的一个特性
- 通过继承可以将其他类中的属性和方法引入到当前类中
示例：
(function(){ //定义一个Animal类 class Animal{ name:string; age:number; constructor(name:string,age:number){ this.name= name; this.age= age; } sayHello(){ console.log('动物在叫'); } } class Dog extends Animal{ run(){ console.log(`${this.name}在跑~~~`); } sayHello() { console.log('汪汪汪汪！'); } } // 定义一个表示猫的类 // 使Cat类继承Animal类 class Cat extends Animal{ sayHello() { console.log('喵喵喵喵！'); } } const dog = new Dog('旺财', 5); const cat = new Cat('咪咪', 3); console.log(dog); dog.sayHello(); dog.run(); console.log(cat); cat.sayHello(); })()- 通过继承可以在不修改类的情况下完成对类的扩展
重写
- 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写
示例：
(function(){ class Animal{ name:string; constructor(name:string){ this.name = name; } sayHello(){ console.log("动物在叫"); } } class Dog extends Animal{ age:number; constructor(name:string,age:number){ //如果在子类中写了构造函数，在子类的构造方法中必须要对父类的的构造函数进行调用 super(name); this.age= age } sayHello(){ // 在类的方法中 super就表示当前类的父类 // super.sayHello(); //输出动物在叫 console.log('汪汪汪汪！'); //重写父方法 } } const dog = new Dog('旺财', 3); dog.sayHello(); })();- 在子类中可以使用super来完成对父类的引用
抽象类（abstract class）
- 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例
示例
(function(){ /** * 以abstract开头的类就是抽象类 * 抽象类和其他类区别不大，只是不能用来创建对象 * 抽象类就是专门用来被继承的 * * 抽象类里可以添加抽象方法 */ abstract class Animal{ name:string; constructor(name:string){ this.name = name; } //定义一个抽象方法 //抽象方法：abstract开头，没有方法体 //抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写 abstract sayHello():void; } class Dog extends Animal{ sayHello(){ console.log("汪汪汪"); } } class Cat extends Animal{ sayHello(){ console.log("喵喵喵"); } } const dog = new Dog('旺财'); dog.sayHello() const cat = new Cat("小刀") cat.sayHello() })()- 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现，即子类必须对抽象方法进行重写
- 多态:父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现
注意：使用多态基础是类的继承或者接口实现
举例子说：多态 ，一种事物的不同表现形态。例如在代码中先声明变量f是Animal类型，具体是Dog还是Cat，在new对象时才知道
如果是Dog，则f.eat()调用的是Dog类中的eat方法；如果是Cat，则f.eat()调用的是Cat类中的eat方法，这就是多态！！！
7.4 接口
接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。
接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。
同时，可以让一个类去实现接口，实现接口时类中要包含接口中的所有属性。
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。
接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，
也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，
- 接口可以在定义类的时候去限制类的结构
- 接口中所有的属性都不能有实际的值
- 接口只定义对象的结构，而不考虑实际值
- 在接口中所有的方法都是抽象类
接口与抽象类类似，区别在于
- 抽象类可以有抽象方法也可以有普通方法；但接口只能有抽象方法
- 抽象类使用extends继承；接口使用implements实现
示例：
(function(){
//描述一个对象的类型
type myType = {
name:string,
age:number
};
/**
* 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
* 同时接口也可以当成类型声明来使用
*/
interface myInterface{
name:string;
age:number;
}
interface myInterface{
gender:string
}
const obj:myInterface = {
name:'sss',
age:11,
gender:'男'
}
/**
* 接口可以在定义类的时候去限制类的结构
* 接口中的所有属性都不能有实际的值
* 接口只定义对象的结构，而不考虑实际值
* 在接口中所有方法都是抽象方法
*/
interface myInter{
name:string;
sayHello():void
}
/**
* 定义类时，可以使类去实现一个接口
* 实现接口就是使类满足接口的要求
*/
class MyClass implements myInter{
//必须要有name和sayHello方法
name:string;
constructor(name:string){
this.name = name;
}
sayHello(){
console.log("Hello World");
}
sayHi(){
console.log("大家好~~~");
}
}
const test = new MyClass("peiqi")
console.log(test.name);
test.sayHello();
test.sayHi();
})();属性类接口
作用:对json的约束
函数类型接口
作用对方法传入的参数 以及返回值进行约束
interface ConfigFn{
(value1:string,value2:string):string;
}
可索引接口
数组、对象的约束 （不常用）\
interface UserArr{
}
interface UserObj{
}
类类型接口
对类的约束
class Dog implements Animal
泛型接口
interface ConfigFn{
<T>(value:T):T;
}
var getData:ConfigFn=function<T>(value:T):T{
return value;
}
接口扩展
接口可以继承接口
interface PlayEndInterface {
end(): void
}
interface AnimationInterface extends PlayEndInterface {
name: string
move(): void
}
class Animation {
protected getPos(): { x: number; y: number } {
return { x: 100, y: 300 }
}
}
class Tank extends Animation implements AnimationInterface {
name: string = '敌方坦克'
public move(): void {
console.log(`${this.name}移动`)
}
end() {
console.log('游戏结束');
}
}
class Player extends Animation implements AnimationInterface {
name: string = '玩家'
public move(): void {
console.log(`${this.name}坦克移动`)
}
end() {
console.log('游戏结束');
}
}
const hd = new Tank()
const play = new Player()
hd.move()
play.move()对象可以使用实现多个接口，多个接口用逗号连接
interface PlayEndInterface {
end(): void
}
interface AnimationInterface {
name: string
move(): void
}
class Animation {
protected getPos(): { x: number; y: number } {
return { x: 100, y: 300 }
}
}
class Tank extends Animation implements AnimationInterface, PlayEndInterface {
name: string = '敌方坦克'
public move(): void {
console.log(`${this.name}移动`)
}
end() {
console.log('游戏结束');
}
}
class Player extends Animation implements AnimationInterface, PlayEndInterface {
name: string = '玩家'
public move(): void {
console.log(`${this.name}坦克移动`)
}
end() {
console.log('游戏结束');
}
}
const hd = new Tank()
const play = new Player()
hd.move()
play.move()7.5 泛型（Generic）
定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。
泛型就是不确定的类型（定义时不确定，执行了才确定）。在定义函数或是类时,如果遇到类型不明确就可以使用泛型
/**
* function fn(a:any):any{
* return a;
* }
*/
// 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
function fn<T>(a:T):T{
return a;
}
//可以直接调用具有泛型的函数
let result = fn(10);//不指定泛型
let result2 = fn<string>("hello"); //指定泛型
//泛型可以同时指定多个
function fn2<T,K>(a:T,b:K):T{
console.log(b);
return a;
}
fn2<number,string>(123,"hello"); //调用
console.log(fn2<number,string>(123,"hello")); //hello 123
interface Inter{
length:number;
}
//T extends Inter 表示泛型T必须使Inter实现类（子类）
function fn3<T extends Inter>(a:T):number{
return a.length;
}
class MyClass<T>{
name:T;
constructor(name:T){
this.name =name;
}
}
const mc = new MyClass(18)
const mc2 = new MyClass<strig>('孙悟空')
console.log(mc);
console.log(mc2);泛型：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
通俗理解：泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)
同时返回 string类型 和number类型
1）写多个函数 【冗余】（2）借助any【any放弃了类型检查】 (3) 泛型【可以支持不特定的数据类型 】function getData<T>(value:T):T泛型可以写多个
function getData<T, K>(value:T, age:K):T泛型约束function getData<T extends myInterface>(value:T):T
此外，还能对泛型的类型进行限制
interface Inter{
length: number;}
// T extends Inter 表示泛型T必须是Inter实现类(子类)
// 这里用的话即调用该函数的参数必须具有length属性，可以是数组，字符串...
function fn3<T extends Inter>(a:T): number {return a.length}
fn3('124');
// fn3(1243);
fn3({length: 10});
7.7 装饰器
装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。 通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器分类：普通装饰器（无法传参） 、 装饰器工厂（可传参）
装饰器是过去几年中js最大的成就之一，已是Es7的标准特性之一。编译时就已经运行了
装饰器执行顺序 属性》方法》方法参数》类
如果有多个同样的装饰器，它会先执行后面的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。