# 函数 
## 说明 
TS为函数新增了以下功能 
- 函数类型
- 可选参数
- 默认参数
- 剩余参数
- 函数重载



## 函数类型 
在TS中编写函数，需要给形参和返回值指定类型 
TS可以根据返回语句自动推断出返回值类型，所以通常可以省略返回值类型 

### 完整函数类型 
```
let myTest: (input1: number, input2: number) => string = function (input1: number, input2: number): string {
 return (input1 + input2).toString()
}
```

![完整函数类型](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E5%AE%8C%E6%95%B4%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B.jpg) 

根据类型推论的一种按上下文归类得知若在赋值语句一边指定类型，另一边没有指定类型，那么TS会自动识别类型 
```
let myTest= function (input1: number, input2: number): string {
 return (input1 + input2).toString()
}
//或者 
let myTest: (input1: number, input2: number) => string = function (input1,input2) {
 return (input1 + input2).toString()
}
```



## 定义函数的方式 
### 使用带有调用签名的对象字面量来定义函数
```
let fn1:{():number}=function():number{return 1}
```

### 常规方式
```
let fn2:()=>number=function():number{return 1}
```

### 通过接口 
```
// 通过接口约束函数
interface myTtest {
 (x:number,y:number):number
}

let myFunction:myTtest= function(x,y){return x+y}

console.log(myFunction(1,2))
```


### 使用类型别名 
```
type myTtest= (x:number,y:number)=>number
 
let myFunction:myTtest= function(x,y){return x+y}

console.log(myFunction(1,2))
```




## 函数参数
### 可选参数 
#### 说明 
TS中传递给一个函数的参数个数必须与函数期望的参数个数一致，JS中函数参数可选。可以通过可选参数实现TS中函数参数可选 
#### 注意 
- 添加可选的参数必须在必须参数的后面，否则报错 
- 在严格模式下会报错“对象可能未定义” 

#### Eg 
通过?实现 

![完整函数类型-可选参数](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E5%AE%8C%E6%95%B4%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B-%E5%8F%AF%E9%80%89%E5%8F%82%E6%95%B0.jpg) 


### 默认参数 
在TS中可以设置默认参数，当没有传值或者值为undefined时，则使用默认参数
#### 特点 
- 在所有必须参数后面带默认初始化的参数都是可选的，在函数调用时可以省略
- 与可选参数不同，带有初始化的默认参数不是必须放在必须参数之后 
- 若带默认值的参数出现在必须参数前，则函数调用时必须传入undefined的值来获取默认值 


#### Eg 
- 默认参数 
```
// 函数 
let myTest = function (input1: number,input2=1): string {
 return (input1 + input2).toString()
}
let a: string = myTest(11,10)
let b:string= myTest(20)
console.log(a, typeof a) // 21 string
console.log(b,typeof b) // 21 string
```

- 默认值参数放在必须参数前，函数调用时必须传入undefined的值来获取默认值 
```
// 函数 
let myTest = function (input2=1,input1: number): string {
 return (input1 + input2).toString()
}
let a: string = myTest(11,10)
let b:string= myTest(undefined,20)
console.log(a, typeof a) // 21 string
console.log(b,typeof b) // 21 string
```

![完整函数类型-默认参数在可选参数前.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E5%AE%8C%E6%95%B4%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B-%E9%BB%98%E8%AE%A4%E5%8F%82%E6%95%B0%E5%9C%A8%E5%8F%AF%E9%80%89%E5%8F%82%E6%95%B0%E5%89%8D.jpg) 




### 剩余参数 
#### 说明 
通过rest参数(形式为 ...变量名)来获取函数的剩余参数，即扩展运算符使用 
#### Eg 
```
let myTest = function (input1:number, ...input2:number[]) {
 return (input1+input2.reduce(function(prev, next, index, array) {
 return prev + next;
 },0)).toString()

}
let a: string = myTest(11,10,1,2,3)
console.log(a, typeof a) // 27 string
```




### this 
#### 前置
tsconfig.json配置中，编译选项compilerOptions的属性noImplicitThis为false 
#### 说明
```
let middle = {
 a: 10,
 b: 15,
 c: 20,
 area: function () {
 return () => {
 // this 为 any 类型
 return (this.a + this.b + this.c) / 3
 }
 }
}

const myArea = middle.area()
console.log(myArea())
```
this为any类型，可以添加任意属性到any上，编译和运行都不会报错容易造成问题 
![函数this为any类型时](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E5%87%BD%E6%95%B0this.jpg) 


## 明确this指向的方法 
### 方法一 noImplicitThis设置为true
tsconfig.json配置中，编译选项compilerOptions的属性noImplicitThis设置为true后，TS会自动进行正确的判断 

![明确函数this-1.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E6%98%8E%E7%A1%AE%E5%87%BD%E6%95%B0this-1.jpg) 

### 方法二 this参数 
通过this参数这种形式来解决this为any类型这一问题它出现在参数列表的最前面 

```ts
interface Triangle {
 a: number;
 b: number;
 c: number;
 area: (this:Triangle) => () => number;
}

let triangle: Triangle = {
 a: 10,
 b: 15,
 c: 20,
 area: function (this: Triangle) {
 return () => {
 const p = (this.a + this.b + this.c) / 2
 return Math.sqrt(p * (p - this.a) * (p - this.b) * (p - this.c))
 }
 }
}

const myArea = triangle.area()
console.log(myArea().toFixed(2))
```



## 函数重载 
### 说明 
函数根据传入不同的参数，返回不同类型的数据 
定义重载时，一定要把最精确的定义放在最前面 


### 常见使用场景 
当编译器不知道传入参数的类型，返回值的类型时 
#### Eg
此时则可以采用函数重载 
```
function myTest(target:number|string) {
 if(typeof target ==="number"){
 return target
 }
 if (typeof target ==="string") {
 return "test"
 }
}

console.log(myTest(1),myTest("10"))
```

### 函数重载具体使用
#### 具体方法 
同一个函数提供多个函数类型定义来进行函数重载，译器会根据这个列表去处理函数的调用 
#### 注意点 
定义重载时，一定要把最精确的定义放在最前面 

![函数重载](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/function/%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD.jpg) 



## 使用函数时注意事项 
1. 如果一个函数没有使用return语句，则它默认返回undefined 

2. arguments对象是所有（非箭头）函数中都可用的局部变量。可以使用arguments对象在函数中引用函数的参数 
```
/*
S 此代码块称之为函数重载列表 列表中的函数称之为目标函数
*/
function myTest(x: string): number
function myTest(x: number): number
//E 函数重载列表

/*
S 函数的具体实现
具体实现中的函数称之为原函数
*/
function myTest(target: string | number) {
 if (typeof target === "number") {
 return target
 }
 if (typeof target === "string") {
 console.log(arguments[0])//"123"
 return "test"
 }
}
// E 函数的具体实现
console.log(myTest("123"))//"test"
```

TS-函数

# 思维导图 
![interface](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/MindMap/interface/interface.jpg) 


# 基本的 
## 接口的定义 
接口是一系列抽象方法的声明，是一些抽象的方法特征的集合，这些方法都需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法 




## 接口的应用场景 
- 在声明一个对象、函数或者类时，先定义接口，确保其数据结构的一致性 
- 约束对象、函数、以及类的结构和类型 

## 接口定义的语法 
```ts
interface interface_name { 

}
```

## 注意 
接口并不会转换为js，它只是ts的一部分 
- 定义接口要首字母大写 
- 只需要关注值的外形，并不像其他语言一样，定义接口是为了实现
- 如果没有特殊声明，定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致

### Eg 
```ts
 // 接口
 interface users {
 name: string
 age: number
 deposit: string
 motto: () => string
 }

 var customerList: users = {
 name: "Li",
 age: 20,
 deposit: "20 million",
 motto: () => {
 return "Too little time"
 }
 }

 console.log(customerList.name)
 console.log(customerList.age)
 console.log(customerList.deposit)
 console.log(customerList.motto)
 
//编译过后 
 var customerList = {
 name: "Li",
 age: 20,
 deposit: "20 million",
 motto: function () {
 return "Too little time";
 }
 };
 console.log(customerList.name);
 console.log(customerList.age);
 console.log(customerList.deposit);
 console.log(customerList.motto);
```



## 接口的属性 
### 可选属性 
#### 说明 
有时候接口中的属性不是必须的，有些是只在某些条件下存在，或者根本不存在 
通过?形式告诉编译器此变量可选 
#### 用途 
- 可以对可能存在的属性进行预定义
- 可以捕获引用了不存在的属性时的错误

#### Eg 
![可选属性](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/interface/%E5%8F%AF%E9%80%89%E5%B1%9E%E6%80%A7.jpg) 


### 只读属性 
#### 说明 
通过属性名前加上readonly设置对象属性在对象刚创建时修改其值，在此之后便无法在此修改 
#### Eg 
```ts
interface users {
 readonly name: string
 readonly age: number
 readonly deposit: string
 motto?: () => string
 }
......
``` 

![只读属性](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/interface/%E5%8F%AA%E8%AF%BB%E5%B1%9E%E6%80%A7.jpg) 



### 任意属性 
#### 说明 
可以允许接口允许有任意的属性，使用中括号[属性名:类型]包裹属性名 
#### Eg 
```
interface close{
 a:number,
 b:number,
 [c:string]:number,
}

let myClose:close={
 a:1,
 b:2,
 d:4,
 h:5,
 g:9
}

console.log(myClose)
```



# 接口的分类与继承
## 接口的分类

### 对象类型接口
#### 说明 
常见的接口类型 
#### Eg 
```ts
interface users {
 name: string
 age: number
 deposit: string
 motto: () => string
}
```


### 函数类型接口 
#### 说明 
通过接口表示函数类型需要定义一个调用签名,类似于只有参数列表和返回值 
#### 语法 
```
interface interface_name {
 (valueName:type):returnValueType
}
```

#### Eg 
以下两种写法等价 
```
interface Calculate {
 add(x: number, y: number): number
 multiply: (x: number, y: number) => number
}
```



### 可索引类型接口 
#### 说明 
描述“通过索引得到”的类型，可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型 
#### 用途 
不确定接口内的参数有哪些 
#### 按索引签名分类 
常见的有字符串类型索引和数字类型索引 
##### 数字类型签名 

![数字索引类型.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/interface/%E6%95%B0%E5%AD%97%E7%B4%A2%E5%BC%95%E7%B1%BB%E5%9E%8B.jpg) 


##### 字符串类型签名 
Eg 
```
interface strInterface {
 [index:string]:string
}
```

同时使用两种类型时，数字索引签名的返回值必须是字符串索引签名返回值类型的子类型 
```ts
//字符串类型 
//动物类
class Animal {
 "name": string
}
//狗类是动物类的子类 
class Dog extends Animal {
 "breed": string
}

// 同时出现字符串类型和数字类型 
interface NotOkay {
 [x: number]: Dog
 [x: string]: Animal
}
```


### 类类型接口 
使用implements关键字来确保兼容性,接口只能含有抽象方法和成员属性，实现类中必须实现接口中所有的抽象方法和成员属性 
接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员 

```
interface AnimalInterface {
 name: string

 eat(m: number): string
}

class Dog implements AnimalInterface {
 name: string;

 constructor(name: string){
 this.name = name
 }

 eat(m: number) {
 return `${this.name}吃肉${m}分钟`
 }
}
 
```



### 混合类型接口 
一个对象具有多种类型 

```ts
//声明一个接口，如果只有 (start: number): string 
//一个成员，那么这个接口就是函数接口，同时还具有其他两个成员，可以用来描述对象的属性和方法，这样就构成了一个混合接口
interface Counter {
 (start: number): string;
 interval: number;
 reset: ()=>number;
}

//创建一个 getCounter() 函数，它的返回值是 Counter 类型的
function getCounter(): Counter {
 let counter = function (start: number) {} as Counter;
 /*
 通过类型断言，将函数对象转换为 Counter 类型，转换后的对象不但实现了函数接口的描述
 ，使之成为一个函数，还具有interval属性和reset()方法。断言成功的条件是，
 两个数据类型只要有一方可以赋值给另一方，这里函数类型数据不能赋值给接口类型的变量，
 因为它不具有interval属性和reset()方法 
 */ 
 counter.interval = 123;
 counter.reset = ()=>3;
 return counter;
}

let c = getCounter();
c(10);
console.log(c(10))
console.log(c.reset())
c.interval = 5.0
console.log(c.interval)
```




## 接口的继承 
一个接口可以继承多个接口，创建出多个接口的合成接口 

通过extends继承，若需要继承多个接口，只需要继承时使用逗号分隔开接口名称 

```ts
interface Shape {
 color: string;
}

// Square继承Shape
interface Square extends Shape {
 sideLength: number;
}
// 继承多个接口 
interface user entends user,age {
 
}
let square = {} as Square;
square.color = "blue";// 继承了 Shape 的属性
square.sideLength = 10;
console.log(square.color, square.sideLength)
```




## 接口使用场景举例 
### Eg 
```
//定义List接口 规定对应包含哪些参数以及参数类型
interface List {id: number;name: string;age: number;}
//定义Result接口 规定其中包含data参数，参数类型为List构成的数组
interface Result { data: List[]// data类型为List构成的数组
}

function render(result: Result) {
 result.data.forEach((value) => {
 console.log(value.id, value.name)
 })
}
//假设将返回值赋值给result 
let result = {
 data: [
 {id: 1, name: 'A', age: 18,sex:0},
 {id: 2, name: 'B', age: 18}
 ]
}
render(result)
```
### 情况-返回值含有未定义的字段 
![使用注意点1](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/interface/interfaceUseingNotice.jpg) 
#### 解决方案 
1. 将返回值直接赋值给一个变量，然后使用变量，此时TS就允许包含接口中未定义的值 

2. 通过类型断言 
尖括号方式的类型断言在React中会产生歧义，推荐采用as方式的类型断言 

```
// render(<Result>{
// data: [
// { id: 1, name: "A", age: 18, sex: 0 },
// { id: 2, name: "B", age: 18 },
// ],
// });

render({
 data: [
 { id: 1, name: "A", age: 18, sex: 0 },
 { id: 2, name: "B", age: 18 },
 ],
} as Result);
```

3. 在接口中添加字符串索引类型签名 
在上述Eg中的List接口添加字符串所以类型签名且设置返回值为any 
```
interface List {
 id: number;
 name: string;
 age: number;
 [index:string]:any
}

...

render({
 data: [
 { id: 1, name: "A", age: 18, sex: 0 },
 { id: 2, name: "B", age: 18 },
 ],
});
```

TS-接口

# 对象类型 
## 规定对象类型
### 不常用写法 
```
let varName:object
```



### 常用写法
#### 说明 
规定varName类型为object，且object属性包含一个类型为string的属性和一个类型为number的属性，后续赋值时少了属性或多了属性都会报错 
```
let varName:{name:string,age:number}
```

#### 说明 
规定varName的类型为object，且object属性必须包含一个string类型的属性和任意多个属性名为字符串属性值为any类型的属性 

```
let varName:{name:string,[propName:string]:any}
```

### 某些写法区别 
```
let obj1: object 
let obj2: Object
let obj3:{} 
```

### 注意点
#### object
`object`表示非原始类型(非`string、boolean、number、symbol、null、undefined`)

```ts
let obj: object 
```

#### Object
`Object`TypeScript定义的标准JavaScript Object接口

```ts
let obj: Object 
```

#### 字面量空对象
字面量空对象表示一个空对象类型, 指代排除了**null**和**undefined**以外的任何类型

```ts
let obj: {} 
```

TS-十三种基础数据类型_对象类型

# TS新增数据类型或方法

- TS新增数据类型 
 * array
 * tuple
 * enum
 * any
 * void
 * never 
 



# array类型
## 说明 
JS中操作数组的方法TS中同样有，但是TS新增两种定义数组的方法 
## 两种定义数组的方法 
### 类型后加[] 
在元素类型后面接上[]，表示由[]前的元素组成的一个数组 
```
 // 方法一：元素类型后加[]
 let arr1:number[]=[1,2,3]
 console.log(arr1,arr1.constructor === Array)
 let arr2:string[]=["a","b","c"]
 console.log(arr2,arr2.constructor === Array)
 let arr3:object[] = [{a:"1"},{b:"2"},{c:"3"}]
 console.log(arr3,arr3.constructor === Array)
 //联合类型声明数组
 let arr4:(number | string | object)[] = ["sj",2,{c:"3"}]
```
### 数组泛型 
使用数组泛型Array<元素类型>
```
 // 方法二：数组泛型
 let arr4:Array<number> = [1,2,3]
 console.log(arr4,arr4.constructor === Array)
 let arr5:Array<string> = ["a","b","c"]
 console.log(arr5,arr5.constructor === Array)
 let arr6:Array<object> = [{a:"1"},{b:"2"},{c:"3"}]
 console.log(arr6,arr6.constructor === Array)
 //泛型中使用联合类型声明数组
 let arr8:Array<number | string | object> = ["sj",2,{c:"3"}]
```

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/array/dataType-array.jpg)


# 只读数组 
## 说明 
ReadyonlyArray<元素类型>和Array<元素类型>相似,只是把所有可变方法去掉，以此确保数组创建后不会被修改 

![只读数组](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/array/%E5%8F%AA%E8%AF%BB%E6%95%B0%E7%BB%84.jpg) 

将整个只读数组赋值到一个数组也无法实现，可以采用类型断言重写 
```
a = ro as number[]
```


# tuple元组 
## 说明 
元祖指的是一个已知数量和类型的数组，各元素的类型不必相同 
## Eg 
```ts
let tuple1:[string,number];
 tuple1=["1",10]
 console.log(tuple1,tuple1.constructor)
``` 

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/tuple/dataType-tuple-normal.jpg) 

## 注意点
1. 必须严格按照声明的顺序，否则会报错 
```
let tuple1:[string,number];
 tuple1=["1",10]
 console.log(tuple1,tuple1.constructor)
 tuple1=[1,10]
```
![dataType-tuple-errorEg.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/tuple/dataType-tuple-errorEg.jpg) 

2. 元组越界 
元组同样具有数组的push方法，但是push不会报错，push后访问会报错 
![元祖越界](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/tuple/tupleError.jpg) 



# 枚举类型 
## 说明 
使用enum关键字声明，enum关键字后紧邻枚举名称，其后的花括号中为枚举成员，枚举成员可以有多个 
枚举名称、成员名称首个字母大写，多个成员之间用逗号隔开 
```ts
enum 枚举名称 {枚举成员1，枚举成员2...}
```

## 用法 
### 1. 枚举是一种类型，可以作为变量的类型注解 
```ts
enum ColorList {Red,Green,Blue}
let UserColorList:ColorList
```
#### 三种情况 
- 枚举成员没有初始值 
- 所有枚举成员都是数字枚举 
- 所有枚举成员都是字符串枚举 

```
// 枚举类型 
enum enum1 {a,b}
enum enum2 {a=0,b=1}
enum enum3 {a="user",b="name"}

let age:enum1 = 3 //任意数字赋值
let age2:enum2 = 10//任意数字赋值
let age3:enum3 = enum3.a //字符串枚举类型只能采用枚举中的
let age4:enum3 = "user"
console.log(age,age2,age3)

```

### 2. 访问枚举的成员，作为变量的值 
```
UserColorList = ColorList.Green
console.log(UserColorList)// 1
```

### 3. 枚举成员只能访问(只读属性)，无法赋值修改 
```ts
enum ColorList {Red,Green,Blue}
ColorList.Blue = 1 
```

![enum-onlyRead](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-onlyRead.jpg) 

### 4. 默认情况下，成员的值从0开始/也可以手动的指定成员的数值 
常将枚举成员为数字类型的枚举称为数字枚举 

- 枚举成员的值默认从零开始自增 
```ts
enum ColorList {Red,Green,Blue}
console.log(ColorList)
console.log(ColorList[0],ColorList[1],ColorList[2])
console.log(ColorList.Red,ColorList.Green,ColorList.Blue)
``` 

![consoleResult](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-consoleResult.jpg) 

- 手动指定成员的值 
```ts
enum ColorList {Red=1,Green=2,Blue}
console.log(ColorList)
```

![assignment](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-assignment.jpg) 


常将枚举成员为字符串类型的称为字符串枚举 
字符串枚举没有自增长的值，所以必须指定初始值 

```ts
enum ColorList {Red="red",Green="Green",Blue="Blue"}
console.log(ColorList)
console.log(ColorList.Red,ColorList.Green,ColorList.Blue)
``` 

![dataType-enum-StringAssignment](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-StringAssignment.jpg) 

## 枚举编译为JS后解读
### Eg
#### Code
- TS 
```ts
//常量枚举 
enum constList {
 a,
 b,
 c
}
```

- 编译为js后
```
"use strict";
//常量枚举 
var constList;
(function (constList) {
 constList[constList["a"] = 0] = "a";
 constList[constList["b"] = 1] = "b";
 constList[constList["c"] = 2] = "c";
})(constList || (constList = {}));
```

#### 说明 
- 声明一个变量constList
```
var constList;
```
- 一个立即执行函数
```
constList["a"] = 0 //作为表达式返回结果为0
```


## 常见枚举类型 
### 数字枚举 
```
/* 
数字枚举 成员索引默认从零自增(若指定索引，则从指定索引开始自增) 
存在反向映射导致可以通过枚举成员名称获取索引，索引获取枚举成员名称 
*/
enum ColorList {Red,Green,Blue}
console.log(ColorList)
console.log(ColorList.Red)
console.log(ColorList[0])
``` 

![数字枚举和字符串枚举区别](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-numberEnumAndstringEnum.jpg) 

### 字符串枚举 
```
// 字符串枚举 不存在自增长的值，必须指定初始值 不存在反向映射
enum ColorLists {Reds="red",Greens="Green",Blues="Blue"}
console.log(ColorLists)
console.log(ColorLists.Reds)
console.log(ColorLists[0])//报错
```

### 异构枚举 
数字枚举和字符串枚举混用 
不建议混用 

```
enum putOff {
 red
 blue="blue"
}
```


### 常量枚举 
#### 说明 
使用const关键字，编译时会舍弃 
#### 用途 
需要一个对象，但是不需要对象的值时
#### Eg 
```
//常量枚举 
const enum constList {
 a,
 b,
 c
}
```
![常量枚举](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-enumMemberType-constEnum.jpg) 

## 常见枚举成员 
### 常量枚举成员
const 
会在编译时计算出结果，以常量形式出现在运行时的环境 
computed 
一些表达式等，编译时不会计算，程序执行时才会计算 

```
// 枚举成员类型 
enum username {
 //const
 a,
 b = username.a,
 c = 1+3,
 // computed 需要计算的 
 d = Math.random(),
 e = [1,2,3].length
}
```
![枚举成员类型](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/enum/dataType-enum-enumMemberType.jpg) 





# any类型 
## 说明 
any表示任意值类型，用于为一个不清楚类型的变量指定一个类型。 
相当于ts中对该变量关闭了ts类型检查，可以被赋值或赋值给任意类型的变量，且不会报错 
## 常见使用情况 
### 1. 变量的值会动态改变时 
如用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查 
```ts
let condition:any = 10
console.log(condition,condition.constructor)//10 ƒ Number() { [native code] }

condition = "1"
console.log(condition,condition.constructor)//1 ƒ String() { [native code] }

condition = true
console.log(condition,condition.constructor)//true ƒ Boolean() { [native code] }
```
### 2. 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
- 更改现有代码，普通类型 
![dataType-any类型code.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/any/dataType-any%E7%B1%BB%E5%9E%8Bcode.jpg) 

- 更改现有类型，任意类型 
![dataType-any类型code2.jpg](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/any/dataType-any%E7%B1%BB%E5%9E%8Bcode2.jpg) 




# unknown类型 
## 说明 
可以把任何值赋值给unknown，但是在对unknown类型的值执行大多数操作之前，必须进行某种形式的检查 
## 注意点
any和unknown都是顶级类型，但是unknown更加严格，不像any那样不做类型检查，反而unknown因为未知性质，不允许访问属性，不允许赋值给其他有明确类型的变量 

若是要访问熟悉和方法，需要采用类型断言和类型保护 

如果联合类型中有unknown，那么最终得到的都是unknown类型 

## Eg 
```
let value:unknown;
value = 'hello';
(value as string).length

....

let value:unknown;
value = 'hello';
if (typeof value === 'string') {
 value.length
}
```




# void类型 
## 说明 
空值，表示没有任何类型； 
当一个函数没有返回值，通常会见到其返回值类型是void 

## Eg 
```ts
// void类型 
function alertmsg():void {
 alert("this is msg")
}
```

声明一个void类型的变量后，只能为其赋予undefined和null 
```
let unusable: void = undefined
```




# never 
## 说明 
never是任何类型的子类型，也可以赋值给任意类型；表示那些永不存在的值的类型 
意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环） 

```
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
 throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
 return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
 while (true) {
 }
}
```

TS-十三种数据类型_TS新增数据类型及方法

# 数据类型概览

* 原始数据类型
 * string
 * number
 * boolean
 * null
 * undefined
 * symbol
 * bigint



# 相关名词解释

### 类型注解

类型注解是TS中一种轻量的为函数或变量添加约束的方式

# string类型

## 说明

和JS一样使用一对双引号或单引号包裹，也可以使用模板字符串

### 常规

```ts
// 字符串类型约束
 let str:string = "a"
 str='b'
 console.log(str,typeof(str))
```

### 模板字符串

```ts
// 字符串类型约束
 let age:number = 18
 let str:string = `小明今年${age}`
 console.log(str,typeof(str))
```

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/string/dataType-string.jpg)

# number类型

## 说明

和JS一样，TS中的数字类型也是全部由浮点数表示，且TS支持十进制字面量dec、十六进制字面量hex、二进制字面量bin和八进制字面量oct

## Eg
```ts
 // 数字类型约束
 let del: number = 13 //十进制字面量
 console.log(del, typeof (del))
 let hex:number = 0xD //十六进制字面量
 console.log(hex, typeof (hex))
 let bin:number = 0b1101 //二进制字面量
 console.log(bin, typeof (bin))
 let oct:number = 0o15 //八进制字面量
 console.log(oct, typeof (oct))
```

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/number/dataType-number.png)

# boolean类型

## 说明

采用以下方式声明变量类型

```js
let 变量名:boolean = true
```

## Eg

### 静态类型检查Eg

```ts
 let a: boolean = true
 console.log(a, typeof (a))//true 'boolean'
```

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/boolean/dataType-Boolean-1.png)

### 自动的类型判断机制

```ts
 let a = true
 console.log(a, typeof (a))
 a="s"
```

![image](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/boolean/dataType-Boolean-2.png)

# null和undefined

## 说明

默认情况下，null和undefined是所有类型的子类型，即可以将null和undefined赋值给number类型等

 let a1:undefined=undefined
 let a2:null=null
 console.log(a1,a2)

在TS中启用严格的空校验（--strictNullChecks）特性，就可以使得null和undefined只能被赋值给void或本身对应的类型

默认启用，需要将注释去掉，然后设为false表示不启用 

![严格](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/nullAndundefined/dataType-null%E5%92%8Cundefined-%E4%B8%A5%E6%A0%BC.jpg)

将TS中严格的空校验（--strictNullChecks）设为关闭，就可以将null和undefined赋值给其它类型，如数字类型。赋值后的类型会变成null或undefined

# symbol(ES6引入)

## 说明

ES6引入的新数据类型，表示独一无二的值

## 语法

symbol值由Symbol函数生成

```ts
 let sym:symbol = Symbol()
```

Symbol函数可以接受一个字符串、对象或数值(TS中不能是对象，若为对象则报错)作为参数，表示对Symbol实例的描述\
主要是为了在控制台显示，或者转为字符串时，比较容易区分

```ts
 let sym:symbol = Symbol("1")
```

若该参数是一个对象，则会调用该对象的toString方法，将其转为一个字符串然后生成一个Symbol值\
JS中才支持传入对象，TS中不支持

```js
const obj = {
 toString() {
 return 'abc';
 }
 };
const sym = Symbol(obj); 
// 在ts 不允许的传入对象，js中可以
sym // Symbol(abc) 
```

Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的

对象的属性名有两种类型：

* 原本的字符串类型
* symbol类型，只要采用symbol类型就是独一无二的，此时应使用中括号包裹，否则会被识别为字符串

## tsconfig配置

使用es6语法需要加入ES6，使用DOM则需要引入DOM

```ts
 "lib": ["ES6","DOM"], 
```

## 注意

* Symbol函数前不能使用new命令，否则会报错
* Symbol值不能与其它类型值运算，会报错
* Symbol值可以显示通过toString转为字符串
* Symbol 值也可以转为布尔值，但是不能转为数值

## 相关方法

### 获取Symbol的描述

* Symbol.prototype.description

```ts
let sym:symbol = Symbol("1")
console.log(sym.description) // 1
```

* Symbol.keyFor
 必须接受Symbol.for()创建的symbol值

```ts
const namesSub = Symbol.for("namesSub")
console.log(Symbol.keyFor(namesSub)) // 返回标识符"namesSub"
```

### 当symbol作为对象的属性值时

#### 普通方法遍历

都无法获取symbol属性

```ts
const names:symbol = Symbol("name") 

const info = {
 [names]:"小名",
 age:12,
 hobby:"hack"
}

//普通方法无法取到symbol作为的属性名
for (const key in info){
 console.log(key)//age hobby
}
console.log(Object.keys(info)) // ['age', 'hobby']
console.log(Object.getOwnPropertyNames(info)) // ['age', 'hobby']
console.log(JSON.stringify(info)) // {"age":12,"hobby":"hack"}
```

#### 有效的方法

* Reflect.ownKeys

```ts
console.log(Reflect.ownKeys(info)) //['age', 'hobby', Symbol(name)]
```

* Object.getOwnPropertySymbols(info)

```ts
console.log(Object.getOwnPropertySymbols(info)) //[Symbol(name)]
```

* Symbol.for("name")
 Symbol.for()方法会首先全局搜索判断是否有对应的symbol值，如果有则返回对应的值，没有则重新创建

```ts
console.log(Symbol.for("name")) //Symbol(name)
```

# BigInt(ES10引入)

## 说明

BigInt可以表示任意大的整数

## 特点

* 不能使用Math对象的方法
* 不能和任何Number实例混合运算，二者必须处于同一类型才可以运算
* Bigint变量在转换为Number变量时可能会丢失精度，转换时要注意
* 当使用BigInt运算时，带小数的运算会被取整
* BigInt类型和number类型不同

## 语法

* 在一个整数字面量后面加n的方式定义一个BigInt

```ts
直接在数字字面量后面加n在ts中会报错 
```

![Bigint报错](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/DataType/BigInt/bigint-error.jpg)

* 调用函数BigInt()\
 将数值大的字面量使用引号包裹

```ts
 let bin:BigInt = BigInt("90071992547409910")
```

## 在JSON中使用

对任何BigInt值使用JSON.stringify()都会引发TypeError，默认情况下BigInt值不会在JSON中序列化