【TS】常用类型概述

一、JS 数据类型

TS中常用的基本类型可以细分为两类：1. js已有类型，2.ts新增类型。

• JS 已有类型（原始类型）：

原始类型	例子	描述
number	1,-22,1.3	任意数字
string	“af”，“JF”	任意字符串
boolean	true, false	布尔值
null	null	空值
undefined	undefined	未定义
symbol	symbol	symbol

let a: number = 18;
let b: string = '字符串';
let c: boolean = true;
let d: null = null;
let e: undefined = undefined;
let f: symbol = Symbol();

• JS 已有类型（对象类型）：

对象类型	例子	描述
object	{age: 45}	任意的js对象
array	[1,2,3]	任意的js数组
function	(a,b)=>a+b	函数类型

1.1、数组类型

// 写法 1 ：类型[]
let arr1: number[] = [1, 2, 3];	// number[] 表示数值数组
// 写法 2：Array<类型>
let arr2: Array<string> = ['a', 'b', 'c'];	// Array<string> 表示字符串数组
// 多个类型写法：
let arr3: (number | string)[] = [1, 'a', 2, 'b']; 	// | （竖线）在TS中叫做联合类型，表示或的意思

1.2、对象类型

• 用于描述对象的结构

/*
	1. 直接使用 {} 来描述对象结构
		属性采用 属性名:类型 的形式；
		方法采用 方法名(参数:类型): 返回值类型 的形式。
	2. 在一行代码中指定对象的多个属性类型时，使用 ; （分号）分隔
	3. 如果一行代码只指定一个属性类型，可以去掉 ; （分号），比如：let name:{name: string} = {name: 'jack'}
	4. 方法的类型也可以使用箭头函数形式，比如：sayHi:(name:string): void;
*/ 
let person: {
	name: string;
	age: number;
	sayHi(name:string): void;
} = {
	name: 'jack',
	age: 19,
	sayHi(name){
		console.log(name);
	},
}
/*
	对象的属性或方法，也可以是可选的，此时就用到可选属性了。
	可选属性的语法与函数可选参数的语法一致，都使用 ? （问号）来表示。
	比如要实现一个，name是必须存在的，age可有可无。
*/
let obj: {
	name: string;
	age?: number;
};
// 只存在name
obj = {
	name: 'jack',
}
// name 和 age 都存在
obj = {
	name: 'jack',
	age: 19,
}

1.3、函数类型

由于篇幅过大，详细讲解可以参考博主另一篇文章：
https://blog.youkuaiyun.com/qq_45677671/article/details/125394849

• 函数类型就是函数参数和返回值的类型

// (形参1: 类型, 形参2: 类型) => 返回值
let i: (a: number,b: number)=>number;

// (无参) => 无返回值
let u: ()=>void;

二、TS 新增类型

• TS 新增类型：

类型	描述
字面量	限制变量的值就是该字面量的值
any	任意类型
unknown	类型安全的any
void	没有值
never	不能是任何值
tuple	元组，固定长度数组
enum	枚举
type	类型别名
interface	接口

2.1、联合类型（|）

• 由两个或多个其他类型组成的类型，表示可以是这些类型中的然后一种。

// 可以使用 | 来连接多个类型（联合类型）
let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = "hello";

2.2、交叉类型（&）

• 类似于接口继承（extends），用于组合多个类型为应该类型（常用于对象类型）

interface Person {name: string};
interface Contact {phone: string};
type PersonDetail = Person & Contact
let obj: PersonDetail = {
	name: 'jack',
	phone: '15698324'
}
// 使用交叉类型后，新的类型PersonDetail就同时具备了Person和Contact的所有属性类型。
// 相当于：
type PersonDetail = {name: string; phone: string;}

2.3、索引签名类型（[key: type]: type）

• 使得对象中可以出现任意多个属性

// [propName: string]: any 表示任意类型的属性
let h: {name: string, [propName: string]: any};
h  = {name: "张三", age: 13, gender: "男"};


/*
	1.  使用[key: string]来约束该接口中允许出现的属性名称。
	2. 表示只要是string类型的属性名称，都可以出现在对象中。
	3. 这样，对象 obj 中就可以出现任意多个属性
	4. key 只是一个占位符，可以换成任意合法的变量名称。
	5. 须知：js中对象的键是 string 类型的。
*/
interface AnyObject {
	[key: string]: number;
}
let obj: AnyObject = {
	a: 1,
	b: 2,
}

2.4、任意类型（any）

• any 表示任意类型，一个变量设置类型为 any 后相当于对该变量关闭了TS的类型检查（使用TS时，不建议使用 any 类型）
• 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为 any

let d;			// 隐式的any
let d: any;		// 显式的any
d = 10;
d = "hello";
d = true;
let dd: string;
dd = d; // d的类型是any，它可以赋值给任意变量，并改变dd的类型

2.5、未知的值（unknown）

• unknown 表示未知的值， 实际上就是一个类型安全的any

// unknown 类型的变量，不能直接赋值给其他变量
let e: unknown;
e = 10;
e = "hello";
e = true;
let ee: string;
ee = e; // d的类型是unknown，赋值给ee会报错
// 如果需要赋值并不报错，可以先进行类型判断
if(typeof ee === "string"){
	ee = e; // 不会报错
}

2.6、空值（void）

• void 表示没有任何类型
• 当一个函数返回空值时，它的返回值为 void 类型。

// 以函数为例，就表示没有返回值的函数
function fn(): void{
	console.log('仅打印');
}

2.7、无值（never）

• never 表示永远不存在的值的类型
• 但是，当一个函数永不返回时（或者总是抛出错误），它的返回值为 never 类型。

function fun(): never{}

let foo: never = 123; // Error: number 类型不能赋值给 never 类型

// ok, 作为函数返回类型的 never
let bar: never = (() => {
  throw new Error('Throw my hands in the air like I just dont care');
})();

2.8、元组（tuple）

• 元组：固定长度的数组

// 语法：[类型，类型，类型]
let l: [string, number];
l = ["hello", 123]

2.9、类型别名（type）

由于篇幅过大，详细讲解可以参考博主TS专栏该专篇文章：
https://blog.youkuaiyun.com/qq_45677671/category_11127697.html

// 类型的别名
type myType = 1 | 2 | 3;
let o1: myType;
let o2: myType;
let o3: myType;

2.10、枚举（enum）

由于篇幅过大，详细讲解可以参考博主TS专栏该专篇文章：
https://blog.youkuaiyun.com/qq_45677671/category_11127697.html

// enum 枚举
enum Gender{
	Male = 0,
	Female = 1
}
let m: {name: string, gender: Gender};
m = {
	name: "王五",
	gender: Gender.Male	// 0
}
console.log(m.gender === Gender.Male);

2.11、接口（interface ）

由于篇幅过大，详细讲解可以参考博主TS专栏该专篇文章：
https://blog.youkuaiyun.com/qq_45677671/category_11127697.html

// 接口: 主要为了实现对象的复用。
// {} 用来指定对象中可以包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
// 在属性名后面加上？，表示属性是可选的
interface  PeosonType = {name: string, age?: number}
let g: PeosonType;
g = {name: "张三", age: 13};
g = {name: "张三"};		// 没有？号就会报错

2.12、泛型

由于篇幅过大，详细讲解可以参考博主TS专栏该专篇文章：
https://blog.youkuaiyun.com/qq_45677671/category_11127697.html

2.13、字面量类型

字面量是 JavaScript 本身提供的一个准确变量。

• 你可以使用一个字符串字面量作为一个类型：

let foo: 'Hello';
foo = 'Bar'; // Error: 'bar' 不能赋值给类型 'Hello'

// 通常在联合类型中使用
type CardinalDirection = 'North' | 'East' | 'South' | 'West';

function move(distance: number, direction: CardinalDirection) {
  // ...
}

move(1, 'North'); // ok
move(1, 'Nurth'); // Error

• 其他字面量类型：

type OneToFive = 1 | 2 | 3 | 4 | 5;
type Bools = true | false;