1.typescript 数据类型的总结
一、前言
没写ts之前看
知识这种东西，学了还是要总结下，梳理清楚自己对当前知识的掌握程度。偷懒了一段时间，接下来要好好发力了。
首发博客：
二、ts的优缺点
1、优点
-
代码的可读性和可维护性：举个??看后端某个接口返回值，一般需要去network看or去看接口文档，才知道返回数据结构，而正确用了ts后，编辑器会提醒接口返回值的类型，这点相当实用。 -
在
编译阶段就发现大部分错误，避免了很多线上bug -
增强了编辑器和 IDE 的功能，包括
代码补全、接口提示、跳转到定义、重构等
2、缺点
-
有一定的
学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念 -
会增加一些
开发成本，当然这是前期的，后期维护更简单了 -
一些JavaScript库需要
兼容，提供声明文件，像vue2，底层对ts的兼容就不是很好。 -
ts编译是需要
时间的，这就意味着项目大了以后，开发环境启动和生产环境打包的速度就成了考验 -
可以看看
或多或少，听到过的开发体验最好的架构：React Hooks + TypeScript。目前也在用，还在学习中，至于到底好不好，我还是对vue 情有独钟。前端还在快速发展中，后面再出来个xxxScript，谁也说不好。所以一个字：学！
三、anyScript
可能因为业务场景或者业务紧张，or某个跑路的大哥省了点功夫，用了typeScript的项目也可能会变成anyScript。以下是几种救急的方式（大哥们还没有其他办法）：
-
// @ts-nocheck 禁用整个文件的ts校验
-
// @ts-ignore 禁用单行ts校验
-
any和unknown
不建议多用，但也不是不能用，有些场景确实不好写ts定义。这个时候就不要硬憋自己了，写个备注any下。
抛个面试题：
你知道any和unknown的区别吗？
回归正题，开始学习，总结一些项目中使用较多的，一些TS高级特性这里就不说了。
四、ts类型
本篇所有demo都可在
1、基础类型
-
常用：boolean、number、string、array、enum、any、void
-
const count: number = 20210701;
复制代码
2、对象类型
简单理解interface 和 type 的区别：type 更强大，interface 可以进行声明合并，type 不行；
看个人习惯，一般声明都用interface，需要用到其他变量类型，type多一些。有没有interface或type一把梭的??？
interface Hero {
name: string;
age: number;
skill: string;
skinNum?: number;
say(): string; // say函数返回值为string
[propname: string]: any; // 当前Hero可定义任意字符串类型的key
}
// 继承
interface littleSoldier extends Hero {
rush(): string;
}
// 任意类型
interface IAnyObject {
[key: string]: any;
}
?
type Hero = {
name: string,
age: number,
skill: string,
skinNum?: number,
};
复制代码
3、数组类型
项目中常见的写法，需要声明列表数据类型：
interface IItem {
id: number;
name: string;
isDad: boolean;
}
const objectArr: IItem[] = [{ id: 1, name: '俊劫', isGod: true }];
// or
const objectArr: Array<IItem> = [{ id: 1, name: '俊劫', isGod: true }];
?
const numberArr: number[] = [1, 2, 3];
?
const arr: (number | string)[] = [1, "string", 2];
复制代码
4、元组 tuple
元组和数组类似，但是类型注解时会不一样
赋值的类型、位置、个数需要和定义（生明）的类型、位置、个数一致。
暂时没用过，感觉用处不大~~~
// 数组 某个位置的值可以是注解中的任何一个
const LOL: (string | number)[] = ["zed", 25, "darts"];
?
// 元祖 每一项数据类型必须一致
const LOL: [string, string, number] = ["zed", "darts", 25];
复制代码
5、联合| or 交叉&类型
-
联合类型：某个变量可能是多个 interface 中的其中一个，用
|分割 -
交叉类型：由多个类型组成，用
&连接
// anjiao 某胖博主爱好
interface Waiter {
anjiao: boolean;
say: () => {};
}
?
interface Teacher {
anjiao: boolean;
skill: () => {};
}
?
// 联合类型
function judgeWho(animal: Waiter | Teacher) {}
// 交叉类型
// 同名类型会进行合并，同名基础类型属性的合并返回：never
// 同名非基础类型属性可以正常合并
function judgeWho(jishi: Waiter & Teacher) {}
复制代码
6、enum枚举
提高代码可维护性，统一维护某些枚举值，避免 JiShi === 1这种魔法数字。JiShi === JiShiEnum.BLUEJ这样写，老板一眼就知道我想找谁。
// 初始值默认为 0
enum JiShiEnum {
REDJ,
BLUEJ,
GREENJ,
}
// 设置初始值
enum JiShiEnum {
REDJ = 8,
BLUEJ,
GREENJ,
}
const jishi: JiShiEnum = JiShiENUM.BLUE
console.log(jishi) // 9
// 字符串枚举，每个都需要声明
enum JiShiEnum {
REDJ = "8号",
BLUEJ = "9号",
GREENJ = "10号",
}
复制代码
7、泛型 T（Type）
简单说就是：泛指的类型，不确定的类型，可以理解为一个占位符（使用T只是习惯，使用任何字母都行）
-
K（Key）：表示对象中的键类型；
-
V（Value）：表示对象中的值类型；
-
E（Element）：表示元素类型。
// T 自定义名称
function myFun<T>(params: T[]) {
return params;
}
myFun <string> (["123", "456"]);
?
// 定义多个泛型
function join<T, P>(first: T, second: P) {
return `${first}${second}`;
}
join <number, string> (1, "2");
复制代码
8、断言
断言用来手动指定一个值的类型。值 as 类型 or <类型>值
注意在 tsx 语法中必须使用前者，即 值 as 类型。
function judgeWho(animal: Waiter | Teacher) {
if (animal.anjiao) {
(animal as Teacher).skill();
}else{
(animal as Waiter).say();
}
}
复制代码
9、in
在做类型保护时间，类似于数组和字符串的 includes 方法
也有遍历的作用，拿到ts类型定义的Key，获取Key还有个方法：keyof是取类型的key的联合类型 , in是遍历类型的key
function judgeWhoTwo(animal: Waiter | Teacher) {
if ("skill" in animal) {
animal.skill();
} else {
animal.say();
}
}
复制代码
10、类型注解
显式的告诉代码，我们的 count 变量就是一个数字类型，这就叫做类型注解
let count: number; // 类型注解
count = 123;
复制代码
11、类型推断
-
如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
-
如果 TS 无法分析变量类型的话， 我们就需要使用类型注解
// ts可以推断出count 为number类型
let count = 123;
复制代码
12、void和never
返回值类型，也算是基础类型。没有返回值的函数: void
function sayHello(): void {
console.log("hello world");
}
复制代码
如果一个函数是永远也执行不完的，就可以定义返回值为 never
function errorFuntion(): never {
throw new Error();
console.log("Hello World");
}
复制代码
一个函数有入参，也有出参，项目中的常规写法：
// 定义一个小姐姐
interface IGirl {
name: string,
age: number,
skill: string,
isAnMo: boolean;
number: JiShiEnum;
};
// 定义搜索小姐姐的入参
interface ISearchParams extends IGirl{
serviceTime: string;
}
interface IGetGirls {
data: IGirl[];
}
// 函数主体
export function getGirls(data: ISearchParams): Promise<IGetGirls> {
return axios({
url: `/dabaojian/getGirls`,
method: 'GET',
data,
});
}
复制代码
13、类型检测
1、typeof
typeof 操作符可以用来获取一个变量或对象的类型
interface Hero {
name: string;
skill: string;
}
?
const zed: Hero = { name: "影流之主", skill: "影子" };
type LOL = typeof zed; // type LOL = Hero
复制代码
在上面代码中，我们通过 typeof 操作符获取 zed 变量的类型并赋值给 LOL 类型变量，之后我们就可以使用 LOL 类型
const ahri: LOL = { name: "阿狸", skill: "魅惑" };
复制代码
2、instanceof
class NumberObj {
count: number;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
if (first instanceof NumberObj && second instanceof NumberObj) {
return first.count + second.count;
}
return 0;
}
复制代码
3、keyof
keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键
interface Point {
x: number;
y: number;
}
?
// type keys = "x" | "y"
type keys = keyof Point;
?
复制代码
用 keyof 可以更好的定义数据类型
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
return o[name]
}
复制代码
14、ts类里的关键字
了解ts关键字的作用，在写base类的时候可能会用到，个人用的不多。
-
public
-
private 类的外部不可用，继承也不行
-
protected 类的外部不可用，继承可以
-
public readOnly xxx 只读属性
-
static funcXXX 静态方法，不需要 new 就可以调用
-