# 70. TypeScript中的类型（上)

### JS中有哪些数据类型

`null`, `undefined`

`string`,`number`, `boolean`

`bigint`, `symbol`

`object`(含`Array`, `Function`,`Date`)

### TS中有哪些数据类型

以上JS中的所有，外加

`void`, `never`, `enum`, `unknown`, `any`

再加上`自定义类型type`，`interface`

### 如何理解TS的数据类型

type number：所有数字的集合，包括整数，小数

type string:

type boolean: true | false(这里的｜是和而不是或)

type Object：{?} | Array | Function | String | Number | Boolean | RegExp |......

### 为什么会有两个number，string，boolean

`number` vs `Number`

区别就是number是用二进制的方式表示数字，new Number(42)是用对象创建数字，其中还包括原型。Number很少用，只有在使用某些函数的时候才会用。

```
let num = 42
num.tofix(2)// 42.00
//既然42是用二进制表示的数字，为什么num.tofix(2)=> 42.00?
//这里明显是使用了new Number
let temp = new Number(42)
value = temp.toFixed(2)
删除temp
value

```

JS中的`Number`， `String`，`Boolean`只用于包装对象，正常开发者不用它们，在TS里也不用

大写的`Object`也不要用，因为表示的范围太大了。所以我们在TS里一般不用`Object`

### 如何在TS里描述对象的数据类型？

1. 用class/constructor描述
2. 用type或interface描述

![截屏2023-05-30 下午11.52.51](https://raw.githubusercontent.com/clairyitinggu/images/main/imgimg202305302353606.png)

```typescript
type A = {
  [k: string]: number //A表示key为string，value为number的所有对象，k可以换成任意单词，如果不是范型用小k，如果是范型用大K，但是一旦到了js，key最后都会变成string，所以上面这样设定没有意义
}
const a: A = {
  age: 18
} 
```

思考题： key的类型可以不是string吗？

答案： 可以，可以换成number， symbol

```typescript
type A = {
 [k: string] : number
}

const a: A = {
	age: 18
}

type A = Record<string, number>

const a: A = {
  age: 18
}
```

结论：由于object太不精确，所以TS开发者一般使用**索引签名**或**Record范型**来描述普通对象。

### 数组对象该怎么描述？

```typescript
type A = string[]  <=> type A = Array<string>
const a: A = ['h', 'i']

type B = number[] <=> type B = Array<number>
const b: B = [42, 0.8]
```

```typescript
type D = [string, string, string]//三元组
const noError: D = ['我','爱','你']//这个是正确的
const error: D = ['h', 'i']//这个是错误的，因为少了一个string
```

```typescript
type E = [string, number]
const e: E = ['小明', 100]
```

```typescript
type F = [string[], number[]]
const f: F = [['柴','米','油','盐'], [1,2,3]]
```

结论：由于Array太不精确，所以TS开发一般用Array\<?>或string\[ ]， 或者\[string, number]来描述数组。

思考题：

```typescript
type A = [1, 2, 3]
const a: A = ?????
```

答案是`[1, 2, 3]`

### 函数对象该怎么描述？

```typescript
type FnA = (a: number, b: number) => number
type FnB = (x: string, y: string) => string
```

⚠️注意，写type的时候可以用 `=>`, 但是写interface的时候不可以。

```typescript
const a: FnA = () =>{
	return 123
}
```

这里没有写参数，为什么可以通过？

答：因为类型兼容。

或者也可以写成

```typescript
const a: FnA = (x, y)=>{
 return 123
}
```

为什么这里不用写type？

答：类型推导

也可以这样写

```typescript
const a: FnA = (x: number, y:number)=>{
	return 123
}
```

上面这个也对，但是多余

```typescript
const a: FnA = (x: number)=>{
	return 123
}
```

上面这个少传一个参数，但是也可以通过。

```typescript
a(1,2)✅
a(1,2,3)❌
```

```typescript
type FnReturnVoid = (s: string) => void//没有返回值
type FnReturnUndefined = (s: string) = undefined//不会有人写这个

const v: FnReturnVoid = (s: string) => {
  console.log(s)
}

const u: FnReturnUndefined = (s: string) => {
  console.log(s)
  return undefined
}
```

箭头函数的缺点： 不支持this

方方老师关于`this`的文章：<https://zhuanlan.zhihu.com/p/23804247>

```typescript
type Person = {name: string, age: number}
type FnWithThis = (this: Person, name: string) => void
const sayHi: FnWithThis = function(name){
	console.log("hi" + this.name)
}
sayHi("Jack")
//The 'this' context of type 'void'
//is not assignable to method's 'this'
//of type 'Person'
```

结论：

由于Function太不精确，所以TS开发者一般用`( )=>?`来描述函数

其他对象一般直接用class描述

### any, unknown，never是什么？


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yitinggu.gitbook.io/ts/ts-quan-jie/70.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.