Typescript

一、TS 环境安装

1.安装与运行

npm install -g tsx
或者
cnpm install -g tsx
或者
yarn global add tsx

tsx 文件名称.ts

tsx --watch

2.js 缺陷的演示

/* 
  1.没有对类型进行检测
  2.没有对是否传参进行检测
*/
function test(msg) {
  console.log(msg.length);
}

test("邱淑贞"); // 可以正常使用
test(666); // undefine
test(); // error
console.log("往后余生,风雪是你, 平淡是你,敲每一行代码想的都是你。");
console.log("你是CSS,我是DIV,就算我的布局再好,没了你也就没了色彩。");

采用 TS 书写同样的代码，我们可以看到，编译器非常友好的对我们进行了提示

function test(msg) {
  console.log(msg.length);
}

test("邱淑贞"); // 可以正常使用
test(666); // undefine
test(); // error
console.log("往后余生,风雪是你, 平淡是你,敲每一行代码想的都是你。");
console.log("你是CSS,我是DIV,就算我的布局再好,没了你也就没了色彩。");

二、TS 中的数据类型

1.基础数据类型

• number 类型： 双精度 64 位浮点值。它可以用来表示整数和分数。

• boolean 类型：表示逻辑值：true 和 false。

• string 类型：一个字符系列，使用单引号（‘）或双引号（“）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式

export default {}

// 数值类型 number
let money:number; // 定义了一个名称叫做money的变量, 这个变量中将来只能存储数值类型的数据
money = 20;
// money = "200000"; // 会报错
// 注意点: 其它的用法和JS一样
// money = 0x00;
// money = 0o00;
// money = 0b00;
console.log(money);

// 布尔类型 boolean
let flag:boolean;
flag = true;
// flag = 1; // 会报错  c语言
console.log(flag);

// 字符串类型 string
let beauty:string;
beauty = "李一桐";
let dream = `我的女神是${beauty},为了她，我想月入${money}k`;
console.log(dream);


// 总结：
数值，字符串和布尔值是我们开发中最常使用的基础数据类型，与js中的数值，字符串和布尔完全一致，
在ts中我们主要做类型校验使用

2.数组

数组：声明变量的一组集合称之为数组。

export default {};

// 数组类型
// 方式一
// 表示定义了一个名称叫做 beautyList 的数组, 这个数组中将来只能够存储字符串类型的数据
let beautyList: string[];
beautyList = ["李嘉欣", "王祖贤", "邱淑贞"];
// arr2 = ['李嘉欣', '王祖贤', '邱淑贞', 200000]; // 报错
console.log(beautyList);

// 方式二
// 表示定义了一个名称叫做 moneyList 的数组, 这个数组中将来只能够存储数值类型的数据
let moneyList: Array<number>;
moneyList = [10, 30, 500];
// moneyList = ['a', 30, 500]; // 报错
console.log(moneyList);

// 方式三 联合类型
// 表示定义了一个名称叫做 dream 的数组, 这个数组中将来既可以存储数值类型的数据, 也可以存储字符串类型的数据
let dream: (number | string)[];
dream = [10, 30, 500, "李一桐", "赵露思", "白鹿"];
// dream = [10, 30, 500, "李一桐", "赵露思", "白鹿", false]; // 报错
console.log(dream);

// 方式四 任意类型
// 表示定义了一个名称叫做 arbitrarily 的数组, 这个数组中将来可以存储任意类型的数据
let arbitrarily: any[];
arbitrarily = [100, "关之琳", true];
console.log(arbitrarily);

/* 
  数组是我们前端开发过程中，最常用的引用类型之一,在发送请求获取响应时，我们往往会使用到数组类型，
  因此我们务必要掌握好数组的几种定义方式
*/

3.元组

• 元祖类型 Tuple
• TS 中的元祖类型其实就是数组类型的扩展
• 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

export default {}

// 元祖类型 Tuple
// TS中的元祖类型其实就是数组类型的扩展
// 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

// 表示定义了一个名称叫做 tup1 的元祖, 这个元祖中将来可以存储3个元素,
// 第一个元素必须是字符串类型, 第二个元素必须是数字类型, 第三个元素必须是布尔类型
let tup1:[string, number, boolean];
tup1 = ['宋祖儿', 100, false];
// tup1 = ['宋祖儿', 100, true, 200]; // 超过指定的长度会报错
// tup1 = [100,"宋祖儿", true];
// tup1 = ['杨超越', 100, true];
console.log(tup1);

/*
  总结:
  定义: ['', '', ...]
  作用:元祖用于保存定长定数据类型的数据
*/

4.any 与 void

• any: 表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用 any

• void: 当一个函数没有返回值时，你通常会见到其返回值类型是 void

export default {};

// any类型
// any表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用any
// 在TS中任何数据类型的值都可以负责给any类型

// 使用场景一
// 变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查
let salary: any = 1800; // 数字类型
salary = "my salary is 18k"; // 字符串类型
salary = false; // 布尔类型

// 使用场景二
// 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
let x: any = 4;
x.ifItExists(); // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed(); // 正确

// 使用场景三
// 定义存储各种类型数据的数组时
let beautyList: any[] = [1, false, "fine"];
beautyList[1] = 100;

// void类型
// 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。
// 当一个函数没有返回值时，你通常会见到其返回值类型是 void
// 在TS中只有null和undefined可以赋值给void类型
function makeMoney(): void {
  console.log("I want to make much money and marry a wife!!!");
  // return "100K beauty" // 报错
}

makeMoney();

let value: void;
// 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined
// value = 100; // 报错
// value = "杨紫";// 报错
// value = true;// 报错
// 注意点: null和undefined是所有类型的子类型, 所以我们可以将null和undefined赋值给任意类型
// 严格模式下会null报错
// value = null; // 不会报错
value = undefined; // 不会报错

5.null 与 undefined

• TypeScript 里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大
• 非严格模式下，可以把 null 和 undefined 赋值给 number 类型的变量。

export default {};

// TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。
// 和 void相似，它们的本身的类型用处不是很大

let x: undefined = undefined;
let y: null = null;

let money: number = 100;

// 非严格模式下，可以把 null和undefined赋值给number类型的变量。
money = y;
money = x;

6.never 与 object

never 类型:

表示的是那些永不存在的值的类型;

never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;

变量也可能是 never 类型，当它们被永不为真的类型保护所约束

object 类型：

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型

定义了一个只能保存对象的变量

我们后面更常用的是 接口 与 类型别名

// Never类型
// never类型表示的是那些永不存在的值的类型
// 例如: never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
//      变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

// 注意点:never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。
//  即使 any也不可以赋值给never

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

error("鞠婧祎");

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

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

// Object类型
// 表示一个对象
// 定义了一个只能保存对象的变量
let goddess: object;
// goddess = 1;
// goddess = "123";
// goddess = true;
goddess = { name: "白鹿", age: 27 };
console.log(goddess);

7.枚举

• enum类型是对 JavaScript 标准数据类型的一个补充。 像 C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

// 枚举用于表示固定的几个取值
// 例如: 人的性别只能是男或者女

enum Gender {
  Male,
  Femal,
}

// 定义了一个名称叫做val的变量, 这个变量中只能保存Male或者Femal
let val: Gender;
val = Gender.Male;
val = Gender.Femal;
// val = 'nan'; // 报错
// val  = false;// 报错

// 注意点: TS中的枚举底层实现的本质其实就是数值类型, 所以赋值一个数值不会报错
val = 666; // 不会报错
console.log(Gender.Male); // 0
console.log(Gender.Femal); // 1

// 注意点: TS中的枚举类型的取值, 默认是从上至下从0开始递增的
//         虽然默认是从0开始递增的, 但是我们也可以手动的指定枚举的取值的值
// 注意点: 如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来递增
enum Gender2 {
  Male = 5,
  Femal,
}
console.log(Gender2.Male); // 5
console.log(Gender2.Femal); // 6

// 注意点: 如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响
enum Gender3 {
  Male,
  Femal = 10,
}
console.log(Gender3.Male); // 0
console.log(Gender3.Femal); // 10

// 注意点: 我们还可以同时修改多个枚举值的取值, 如果同时修改了多个, 那么修改的是什么最后就是什么
enum Gender4 {
  Male = 100,
  Femal = 200,
}
console.log(Gender4.Male); // 100
console.log(Gender4.Femal); // 200

// 我们可以通过枚举值拿到它对应的数字
console.log(Gender.Male); // 0
// 我们还可以通过它对应的数据拿到它的枚举值
console.log(Gender[0]); // Male

8.bight 与 symbol

export default {};

// bight类型: 表示非常大的数
// symbol类型: 表示全局唯一引用
// ES2020可用

// const Hundred1: bigint = BigInt(100)
// const Hundred2: bigint = 100n

// const firstName = Symbol("name")
// const secondName = Symbol("name")

// if (firstName === secondName) {
//   console.log('ok')
// }

9.变量声明与解构

• 与 js 中完全一致，我们简单复习一下解构
• ‘数组解构与对象解构

// 变量声明的方式
// var | let | const

// 数组解构
let goddess = ["邱淑贞", "赵雅芝"];
let [first, second] = goddess;
console.log(first); // 邱淑贞
console.log(second); // 李紫婷

let [third, ...rest] = ["赵今麦", "蒋依依", "欧阳娜娜", "李庚希"];
console.log(third); //  赵今麦
console.log(rest); // ["蒋依依", "欧阳娜娜", "李庚希"];

let [, fourth, , fifth] = [1, 2, 3, 4];
console.log(fourth); // 2
console.log(fifth); // 4

// 对象解构
let beauty = {
  uname: "杨超越",
  age: 20,
  sex: "女",
};

let { uname, age } = beauty;
console.log(uname);
console.log(age);

10.类型断言

• 什么是类型断言?

  类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

  通俗的说就是我相信我自己在定义什么类型

• 语法格式

  <类型>值

  值 as 类型

/*
  1.什么是类型断言?

  类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
  通俗的说就是我相信我自己在定义什么类型

  2.语法格式
    2.1 <类型>值
    2.2 值 as 类型
*/

let str = "世界上最遥远的距离就是,你是if而我是else, 似乎一直相伴但又永远相离";

// 方式一
// let len = (<string>str).length;
// console.log(len);

// 方式二
// let len = (str as string).length;
// console.log(len);

// function TypeAs(x: number | string){
//   console.log(x.length);

// }

// TypeAs("世界上最痴心的等待,是我当case你当switch,或许永远都选不上自己")

function TypeAs(x: number | string) {
  let len = (x as string).length;
  // let len = (<string>x).length;
  console.log(len);
}
TypeAs("世界上最痴心的等待,是我当case而你当switch,或许永远都选不上自己");

11.type 别名

• 类型别名就是给一个类型起个新名字, 但是它们都代表同一个类型

例如: 你的女神叫邱淑贞, 她的外号叫女神, 女神就是邱淑贞的别名, 邱淑贞和女神都表示同一个人

export default {};

// 第一种
type beautys = "邱淑贞" | "赵雅芝" | "王祖贤" | "朱茵";
let one: beautys;

one = "邱淑贞";
// one = 100 // 报错

// 第二种
type myfun = (a: number, b: number) => number;

let fun: myfun = (a: number, b: number) => a + b;
fun(10, 20);

// 第三种
type myGoddass = {
  name: string;
  age: number;
  sex: string;
  actor?: boolean;
};

let shuzhen: myGoddass = {
  name: "邱淑贞",
  age: 18,
  sex: "女",
};

三、接口

1.接口的基本使用

• 什么是接口？

  接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，

  然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

• 格式:

interface interface_name {}

type 名称 = {}

/* 
接口是什么？
  接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，
  然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法 

  接口也是一种数据类型

格式：
  interface interface_name { 
  }
*/

interface IFullName {
  firstName: string;
  lastName: string;
}

let goddassName: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
};

console.log(goddassName.firstName);
console.log(goddassName.lastName);

function say({ firstName, lastName }: IFullName): void {
  console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(goddassName);

2.可选属性与只读属性

• 可选属性使用： ？
• 只读属性使用: readonly
• readonly 与 const 的区别: 做为变量使用的话用 const，若做为属性则使用 readonly

export default {};

// 可选属性   使用?来进行修饰
interface IFullName {
  firstName: string;
  lastName: string;
  age?: number;
}

let goddassName: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
};

console.log(goddassName.firstName);
console.log(goddassName.lastName);

// 只读属性  readonly
interface IInfo {
  readonly uname: string;
  readonly uage: number;
}

let beauty: IInfo = {
  uname: "邱淑贞",
  uage: 18,
};

// beauty.uname = "赵丽颖";  // 报错

/* 
  总结: readyonly 与 const 区别:
    最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 
    做为变量使用的话用 const，
    若做为属性则使用readonly
*/

3.索引签名

• 定义: 索引签名用于描述那些“通过索引得到”的类型
• 格式: 如[props: string]:any
• 应用场景: 解决参数问题

export default {};

interface IFullName {
  firstName: string;
  lastName: string;
  age?: number;
  singName?: string;
  [props: string]: any;
}

// 注意点: 如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候,多一个或者少一个都不行
// 实际开发中往往会出现多或者少的情况，怎么解决？

// 少一个或者少多个属性
// 解决方案: 可选属性
let goddass1: IFullName = { firstName: "邱", lastName: "淑贞" };
let goddass2: IFullName = { firstName: "邱", lastName: "淑贞", age: 18 };

// 多一个或者多多个属性
// 方案一：使用变量
let info = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "芭蕾",
};
let goddass3: IFullName = info;

// 方案二: 使用类型断言
let goddass4: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "芭蕾",
} as IFullName;

// 索引签名？
// 索引签名用于描述那些“通过索引得到”的类型
// 注意点: 对象中的键，会被转化为字符串
interface Ibeauty {
  [props: string]: string;
}

let name: Ibeauty = { name1: "邱淑贞", name2: "李嘉欣", name3: "周慧敏" };

interface Iage {
  [props: string]: number;
}

let afe: Iage = { age1: 18, age2: 20 };

// 方案三: 索引签名
let goddass5: IFullName = {
  firstName: "邱",
  lastName: "淑贞",
  age: 18,
  singName: "赌王",
  dance: "芭蕾",
};

4.函数接口

• 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

​ 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

export default {};

// 函数接口
/* 
  为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 
  它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型
*/

interface ImakeMoney {
  (salary: number, reward: number): number;
  name: string;
}

let sum: ImakeMoney = function (x: number, y: number): number {
  return x + y;
};
sum.name = "sum函数";
let res = sum(10, 20);
console.log(res);

// 接口与数组
// 我们定义了StringArray接口，它具有索引签名。
// 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值
interface IStringArray {
  [index: number]: string;
}

let myArray: IStringArray;
myArray = ["邱淑贞", "赵今麦"];

let myStr: string = myArray[1];
console.log(myStr);

5.接口的继承

• 接口继承就是说接口可以通过其他接口来扩展自己。
• Typescript 允许接口继承多个接口。
• 继承使用关键字 extends。

// 单继承
interface IPerson {
  age: number;
}
interface IName extends IPerson {
  name: string;
}

let lady: IName = {
  name: "邱淑贞",
  age: 18,
};

// 多继承
interface IFatherMoney {
  m1: number;
}
interface IMotherMoney {
  m2: number;
}

interface ISon extends IFatherMoney, IMotherMoney {
  s: number;
}

let money: ISon = {
  m1: 100,
  m2: 100,
  s: 100,
};

console.log(`儿子一共有${money.m1 + money.m2 + money.s}万元`);

6.接口的混合类型

• 接口的混合类型就是调用接口的时候，同时包含多种不同的类型
• 应用场景: 闭包

export default {};

// 在接口中有多种类型进行混合
interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = <Counter>function (start: number) {};
  counter.interval = 123;
  counter.reset = function () {};

  return counter;
}

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

7.接口与类型别名的异同

1.相同点:

• 都可以描述属性或方法

• 都允许拓展

  2.不同点:

• type 可以声明基本数据类型，联合类型，数组等; interface 只能声明变量

• 当出现使用 type 和 interface 声明同名的数据时;type 会直接报错;interface 会进行组合

• type 不会自动合并；interface 会

export default {};

// 相同点:
// 1.都可以描述属性或方法
type womenStar = {
  name: string;
  age: number;
  perform(): any;
};
interface IWStar {
  name: string;
  age: number;
  perform(): any;
}

let star1 = {
  name: "邱淑贞",
  age: 18,
  perform() {
    return "倚天屠龙记";
  },
};
let star2 = {
  name: "李一桐",
  age: 18,
  perform() {
    return "射雕英雄传";
  },
};

// 2.都允许拓展
type money = {
  y1: number;
};
type money2 = money & {
  y2: number;
};

let salary: money2 = {
  y1: 10,
  y2: 20,
};

interface Istar1 {
  name: string;
}
interface Istar2 extends Istar1 {
  age: number;
}

let starInfo: Istar2 = {
  name: "邱淑贞",
  age: 18,
};

// 不同点：
// 1.type可以声明基本数据类型，联合类型，数组等
//   interface只能声明变量
type age = number;
type info = string | number | boolean;
type beautyList = [string | number];
// interface Iage = number; // 报错

// 2.当出现使用type和interface声明同名的数据时
//   type会直接报错
//   interface会进行组合
// type mygoddassName = {
//   name: string
// }

// type mygoddassName = {
//   name: number
// }

interface mygoddassName {
  name: string;
}
interface mygoddassName {
  name: string;
  age: number;
}

let goddass: mygoddassName = {
  name: "赵丽颖",
  age: 20,
};

四、函数

1.函数的基本使用

• 介绍

  函数是 JavaScript 应用程序的基础。 它帮助你实现抽象层，模拟类，信息隐藏和模块。 在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。 TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用

• 函数定义的方式

export default {};

// 匿名函数
const makeMoney = function (salary: number, reward: number): number {
  return salary + reward;
};

// 有名函数 | 命名函数 | 普通函数
function writeCode(hour: number, sleep: number) {
  return hour;
}

// 箭头函数
const seeMeiMei = (time: number): void => {
  console.log(`我每天要看${time}个小时MeiMei`);
};

seeMeiMei(8);

// 接口函数
type myFunc = (x: number, y: number) => number;

const myfunc: myFunc = (a: number, b: number) => a + b;

2.函数参数的处理

• 可选参数:

  在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？

• 默认参数:

  我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为 “

  function function_name(param1[:type],param2[:type] = default_value) {
  }

• 剩余参数:

  有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

  剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。...args:any[]

export default {};

// 可选参数
const func1: (x: number, y?: number) => number = function (a, b) {
  return a;
};

const func2 = function (a: number, b?: number): number {
  return a;
};

func2(10);
func2(10, 20);
func2(10, undefined);

// 函数的默认值
const func3 = function (a: number = 1, b: number = 2, c: number = 3) {
  return a + b + c;
};

func3();
func3(10);
func3(10, 20);
func3(10, 20, 30);

// 函数的剩余参数
const func4 = function (...args: any[]) {
  console.log(args);
};

func4(10, 20, 30, "邱淑贞");

const func5 = function (a: number, b: number, ...args: any[]) {
  console.log(a);
  console.log(b);
  console.log(args);
};

func5(10, 20, 30, "邱淑贞", "邢菲");

3.构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数：

语法格式如下：

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数说明：

• arg1, arg2, … argN：参数列表
• functionBody：一个含有包括函数定义的 JavaScript 语句的字符串。

export default {};

// 构造函数
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

// 递归函数
function sum(arr: number[], n: number): number {
  if (n <= 0) {
    return 0;
  } else {
    return sum(arr, n - 1) + arr[n - 1];
  }
}

sum([2, 3, 4, 5], 3);

4.函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

参数类型不同：

function disp(string):void;
function disp(number):void;

参数数量不同：

function disp(n1:number):void;
function disp(x:number,y:number):void;

参数类型顺序不同：

function disp(n1:number,s1:string):void;
function disp(s:string,n:number):void;

如果参数类型不同，则参数类型应设置为 any。

参数数量不同你可以将不同的参数设置为可选。

export default {};

// 不使用函数重载的问题
function add(a: number, b: number) {
  return a + b;
}

add(10, 20);

function add2(a: string, b: string) {
  return a + b;
}

add2("我的女神是: ", "邱淑贞");

function add3(a: string | number, b: string | number) {
  // return a + b;
  if (typeof a == "number" && typeof b == "number") {
    return a + b;
  }
  if (typeof a == "string" && typeof b == "string") {
    return a + b;
  }
  if (typeof a == "string" && typeof b == "number") {
    return a + b;
  }
  if (typeof a == "number" && typeof b == "string") {
    return a + b;
  }
}

add3("我的女神是: ", "邱淑贞");
add3(10, 20);
add3("邱淑贞", 20);

// 定义函数重载
function addFunc(a: number, b: number): number;
function addFunc(a: string, b: string): string;
function addFunc(a: number, b: string): string;
function addFunc(a: string, b: number): string;

// 使用函数重载
function addFunc(a: any, b: any): any {
  return a + b;
}
addFunc(10, 20);
addFunc("谭松韵", "金晨");
addFunc(27, "白鹿");
addFunc("赵今麦", 19);

// 定义参数类型与参数数量不同
function star(s1: string): void;
function star(n1: number, s1: string): void;

function star(x: any, y?: any): void {
  console.log(x);
  console.log(y);
}
star("王心凌");
star(1, "爱你");

5.this 的使用

• JavaScript 里，this的值在函数被调用的时候才会指定。 这是个既强大又灵活的特点，但是你需要花点时间弄清楚函数调用的上下文是什么。 但众所周知，这不是一件很简单的事，尤其是在返回一个函数或将函数当做参数传递的时候。
• 从 TypeScript 2.0 开始，在函数和方法中我们可以声明 this 的类型，实际使用起来也很简单
  • 使用 this 参数，改变指向
  • 传入 this 参数，禁止调用 this

export default {};

let userInfo = {
  name: "邱淑贞",
  age: 18,
  song: "恨你太无情",
  marry: true,
  show: function () {
    this.marry = false;
  },
};

class Rectangle1 {
  private w: number;
  private h: number;

  constructor(w: number, h: number) {
    this.w = w;
    this.h = h;
  }

  getArea() {
    return () => {
      return this.w * this.h;
    };
  }
}

class Rectangle2 {
  private w: number;
  private h: number;

  constructor(w: number, h: number) {
    this.w = w;
    this.h = h;
  }

  getArea(this: Rectangle2) {
    return () => {
      return this.w * this.h;
    };
  }
}

// class Rectangle3 {
//   private w: number;
//   private h: number;

//   constructor(w: number, h: number) {
//     this.w = w;
//     this.h = h;
//   }

//   getArea(this: void) {
//     return () => {
//       return this.w * this.h;
//     };
//   }
// }

6.特殊的函数返回值

• 如果使用类型别名，定义了一个返回值为 void 的类型, 我们在函数使用的时候，并非一定不能有返回值。

  相反，如果我们在函数中写了返回值，我们的返回值是有效的。

• 如果我们定义函数的时候明确指出，返回值为 void，那么我们将除 undefined 和 null 以外的值进行返回都会进行报错

export default {};

type voidFunc = () => void;

let func1: voidFunc = function () {
  return true;
};

let func2: voidFunc = () => {
  return false;
};

let f1 = func1();
let f2 = func2();
console.log("f1: ", f1);
console.log("f2: ", f2);

// 注意点: 如果我们定义函数的时候明确指出，返回值为void，
// 那么我们将除undefined 和 null 以外的值进行返回

function func3(): void {
  // return 123 // 报错
}

五、类

1.类的基本使用

• 定义

  TypeScript 是面向对象的 JavaScript。

  类描述了所创建的对象共同的属性和方法。

  TypeScript 支持面向对象的所有特性，比如 类、接口等。

  TypeScript 类定义方式如下:

class class_name {
 // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
• 构造函数 − 类实例化时调用，可以为类的对象分配内存。
• 方法 − 方法为对象要执行的操作。

class Person {
  // 注意点: 需要先定义实例属性，才能够使用
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello(): void {
    console.log(
      `我的女神是${this.name}, 她今年${this.age}岁了, 但是在我心里她永远18岁!`
    );
  }
}

let p = new Person("邱淑贞", 54);
p.sayHello();

2.类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：class child_class_name extends parent_class_name

export default {};

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  say(): void {
    console.log(`我是${this.name}, 今年${this.age}岁`);
  }
}

class Student extends Person {
  score: string;

  constructor(name: string, age: number, score: string) {
    super(name, age);
    this.score = score;
  }

  say(): void {
    // 调用父类的函数
    super.say();
    console.log(
      `我是重写之后的say方法, 我是学生${this.name}, 今年${this.age}岁了, 我的成绩为${this.score}`
    );
  }
}

let s = new Student("蒋依依", 18, "A");
s.say();

3.static 与 instanceof

• static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

• instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

export default {};

// static关键字
// static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
class StaticTest {
  static salary: string;

  static say(): void {
    console.log("我们想要的工资是: " + StaticTest.salary);
  }
}

StaticTest.salary = "18k";
StaticTest.say();

// instanceof运算符
// instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。
class Person {}
let p = new Person();
let isPerson = p instanceof Person;
console.log("p 对象是 Person 类实例化来的吗？ " + isPerson); // true

class Student extends Person {}
let s = new Person();
let isPerson2 = s instanceof Person;
console.log("s 对象是 Person 类实例化来的吗？ " + isPerson2); // true

4.类中的修饰符

• public(默认)：公有，可以在任何地方被访问
• protected: 受保护，可以被其自身以及其子类访问
• private: 私有，只能被其定义所在的类访问。
• readonly: 可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。

export default {};

class Person {
  public name: string;
  protected age: number;
  private sex: string;

  constructor(name: string, age: number, sex: string) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }

  say(): void {
    console.log(
      `我的名字是${this.name},性别为${this.sex}, 今年${this.age}岁了,`
    );
  }
}

class Student extends Person {
  score: string;
  constructor(name: string, age: number, sex: string, score: string) {
    super(name, age, sex);
    this.score = score;
  }
  show(): void {
    console.log(this.name);
    console.log(this.age);
    // console.log(this.sex);
    console.log(this.score);
  }
}

let p = new Person("邱淑贞", 18, "女");
p.say();

let s = new Student("王心凌", 18, "女", "A");
s.show();

// 思考题: 如果我们给 constructor 加上 protected 会出现什么情况？

// readonly: 字段的前缀可以是 readonly 修饰符。这可以防止在构造函数之外对该字段进行赋值。
class PrintConsole {
  readonly str1: string = "HTML, CSS, JS, VUE REACT, NODE";
  readonly str2: string;
  readonly str3: string;
  readonly str4: string;

  constructor(str2: string, str3: string, str4: string) {
    this.str2 = str2;
    this.str3 = str3;
    this.str4 = str4;
  }
  // show():void {
  //   this.str2 = "123"
  // }
}

let pc = new PrintConsole(
  "我的头发去哪了, 颈椎康复指南",
  "35岁失业该怎么办, 外卖月入一万也挺好",
  "活着"
);

5.getter 与 setter

官方的另外一个名字: 存取器

通过 getters/setters 来截取对对象成员的访问

注意点:

如果存在 get ，但没有 set ，则该属性自动是只读的 如果没有指定 setter 参数的类型，它将从 getter 的返回类型中推断出来 访问器和设置器必须有相同的成员可见性

export default {};

class GetNameClass {
  private _fullName: string = "倪妮";

  get fullName(): string {
    console.log("我是get方法");
    return this._fullName;
  }

  set fullName(newName: string) {
    console.log("我是set方法");
    this._fullName = newName;
  }
}

let starname = new GetNameClass();
starname.fullName = "袁冰妍";

console.log(starname);

console.log(starname.fullName);

6.抽象类

• 定义

  抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化

  抽象类是专门用于定义哪些不希望被外界直接创建的类的

  抽象类和接口一样用于约束子类

• 抽象类和接口区别

  抽象方法必须包含 abstract关键字并且可以包含访问修饰符

  接口中只能定义约束, 不能定义具体实现。而抽象类中既可以定义约束, 又可以定义具体实现

export default {};

abstract class Person {
  abstract name: string;
  abstract show(): string;

  showName() {
    console.log(this.show());
  }
}

class Student extends Person {
  name: string = "孟子义";
  show(): string {
    return "陈情令";
  }
}

// let p = new Person();
let s = new Student();
let res = s.show();
console.log(res);

7.implements 子句

• 类可以实现接口，使用关键字 implements
• 可以使用一个 implements 子句来检查一个类，是否满足了一个特定的接口。如果一个类不能正确地 实现它，就会发出一个错误

注意点:

​ 实现一个带有可选属性的接口并不能创建该属性

​ 只要一个接口继承了某个类, 那么就会继承这个类中所有的属性和方法,但是只会继承属性和方法的声明, 不会继承属 性和方法实现

与extends的区别

extends: 继承某个类，继承之后可以使用父类的方法，也可以重写父类的方法

implements:继承某个类，必须重写才可以使用

export default {};

/* 
  extend: 继承某个类，继承之后可以使用父类的方法，也可以重写父类的方法
  implements:继承某个类，必须重写才可以使用
*/

interface IPersonInfo {
  name: string;
  age: number;
  sex?: string;
  show(): void;
}

interface IMusic {
  music: string;
}

class Person implements IPersonInfo, IMusic {
  name: string = "吴谨言";
  age: number = 32;
  music: string = "雪落下的声音";
  show() {
    console.log(`${this.name}是'延禧攻略'的主演，她今年${this.age}岁了`);
    console.log(`${this.name}唱了一首歌叫 ${this.music}`);
  }
}
let p = new Person();
p.show();
// p.name = "周冬雨"
// p.sex = "女" // 报错

// 注意点: 只要一个接口继承了某个类, 那么就会继承这个类中所有的属性和方法
// 但是只会继承属性和方法的声明, 不会继承属性和方法实现

interface ITest extends Person {
  salary: number;
}

class Star extends Person implements ITest {
  salary: number = 50;
  name: string = "关晓彤";
  age: number = 18;
}

let s = new Star();
console.log(s.salary);
console.log(s.name);

8.类的初始化顺序

• 基类的字段被初始化
• 基类构造函数运行
• 子类的字段被初始化
• 子类构造函数运行

export default {};

/* 
  1.基类的字段被初始化
  2.基类构造函数运行
  3.子类的字段被初始化
  4.子类构造函数运行
*/

class Old {
  name: string = "林青霞";
  constructor() {
    console.log("我的名字是：" + this.name);
  }
}

class Young extends Old {
  name: string = "李子璇";
  constructor() {
    super();
    // console.log(this.name);
  }
}

let y = new Young();

六、泛型

1.泛型的基本使用

• 泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型
• 泛型不仅可以让我们的代码变得更加健壮, 还能让我们的代码在变得健壮的同时保持灵活性和可重用性
• 通过用 <T>来表示，放在参数的前面

export default {};

// 不使用泛型
// let getArray = (value:number, items:number):number[]=>{
//     return new Array(items).fill(value);
// };
// let arr = getArray(8, 3);
// // let arr = getArray("abc", 3); // 报错
// console.log(arr);

// let getArray = (value:any, items:number):any[]=>{
//     return new Array(items).fill(value);
// };

// let arr = getArray("刘亦菲", 10)
// // let arr = getArray(10, 10)
// console.log(arr);
// let res = arr.map(item=>item.length);
// console.log(res);

// 使用泛型
let getArray = <T>(value: T, items: number): T[] => {
  return new Array(items).fill(value);
};

let arr = getArray<string>("刘亦菲", 3);
// let arr = getArray<number>(10, 3)

let res = arr.map((item) => item.length);
console.log(res);

// 回顾
const techArr1: string[] = ["HTML", "CSS", "JS"];
const techArr2: Array<String> = ["VUE", "REACT", "ANGULAR"];

2.泛型约束

• 在 TS 中，我们需要严格的设置各种类型，我们使用泛型之后，将会变得更加灵活，但同时也将会存在一些问题
• 我们需要对泛型进行约束来解决这些问题

export default {};

// 演示可能出现的问题
// function getLength<T>(arr: T): T{
//   console.log(arr.length);
//   return arr;
// }

// 通用的方法
// function getLength<T>(arr: Array<T>): Array<T> {
//   console.log(arr.length);
//   return arr;
//  }

// 泛型接口
interface ILength {
  length: number;
}

function getLength<T extends ILength>(arr: T): number {
  return arr.length;
}

getLength("孟子义");
getLength([1, 2, 3]);
getLength({ length: 20 });

3.泛型接口

• 将泛型与接口结合起来使用，可以大大简化我们的代码，增加我们的代码可读性
• 泛型也可以使用默认值

export default {};

// interface IPerson {
//   name: string
//   sex: string
// }

// let p: IPerson = {
//   name: "于文文",
//   sex: "女"
// }

// interface IPerson<T1, T2> {
//   name: T1
//   sex: T2
// }

// let p: IPerson<String, number> = {
//   name: "于文文",
//   sex: 0
// }

interface IPerson<T1 = String, T2 = number> {
  name: T1;
  sex: T2;
}

let p: IPerson = {
  name: "于文文",
  sex: 0,
};

4.泛型类

• 泛型类看上去与泛型接口差不多。 泛型类使用（ <>）括起泛型类型，跟在类名后面。

export default {};

class Person<T1, T2> {
  name: T1;
  age: T2;
  sex: T1;

  constructor(name: T1, age: T2, sex: T1) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
}

const p1 = new Person("刘诗诗", 18, "女");
const p2 = new Person<String, number>("虞书欣", 18, "女");
const p3: Person<String, number> = new Person("刘诗诗", 18, "女");

5.使用类型参数进行约束

• 一个泛型被另一个泛型约束, 就叫做泛型约束中使用类型参数
• 你可以声明一个类型参数，且它被另一个类型参数所约束。 比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 obj 上，因此我们需要在这两个类型之间使用约束

export default {};

// 在泛型约束中使用类型参数
// 你可以声明一个类型参数，且它被另一个类型参数所约束。 比如，现在我们想要用属性名从对象里获取这个属性。
// 并且我们想要确保这个属性存在于对象 obj上，因此我们需要在这两个类型之间使用约束

// interface IkeyInterface {
//   [key: string]: any
// }

// let getProps = (obj:IkeyInterface, key:string): any => {
//   return obj[key]
// }

// let x ={ a: 1, b:2 };
// let res = getProps(x, "a");
// // let res = getProps(x, "c"); // 没报错
// console.log(res);

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let x = { a: 1, b: 2 };
getProperty(x, "a");
// getProperty(x, "c");  // 报错

七、一些补充

1.unknown 类型

• unknown 类型代表任何值。这与 any 类型类似，但更安全，因为对未知 unknown 值做任何事情都是不合法的。
• unknown 类型被称作安全的 any

export default {};

// unknown 类型代表任何值。这与 any 类型类似，但更安全，因为对未知 unknown 值做任何事情都是不合法的。
// unknown 类型被称作安全的any

// 1.任何类型都可以赋值给unknown类型
let str: unknown;
str = 18;
str = "张馨予";
str = false;

// 2.不能将unknown类型赋值给其它类型
let val: unknown = 18;
let num: number;
// num = val; // 报错
// 使用类型断言
num = val as number;
// 使用类型缩小
if (typeof val == "number") {
  num = val;
}

// 3.unknown与其它任何类型组成的交叉类型最后都是其它类型
type MyType1 = number & unknown;
type MyType2 = unknown & boolean;
let a: MyType1 = 18;
let b: MyType2 = true;

// 4.unknown除了与any以外, 与其它任何类型组成的联合类型最后都是unknown类型
type MyType3 = unknown | any;
type MyType4 = unknown | number;
type MyType5 = unknown | string | boolean;

// 5.never类型是unknown类型的子类型
type MyType6 = never extends unknown ? true : false;

2.map 类型

Map 对象保存键值对，并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

Map 是 ES6 中引入的一种新的数据结构

可以使用 for of 进行迭代

创建 map:

let myMap = new Map();

Map 相关的函数与属性：

• map.clear() – 移除 Map 对象的所有键/值对 。
• map.set() – 设置键值对，返回该 Map 对象。
• map.get() – 返回键对应的值，如果不存在，则返回 undefined。
• map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
• map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
• map.size – 返回 Map 对象键/值对的数量。
• map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
• map.values() – 返回一个新的 Iterator 对象，包含了 Map 对象中每个元素的值 。

let nameSiteMapping = new Map();

// 设置 Map 对象
nameSiteMapping.set("邱淑贞", 1);
nameSiteMapping.set("宋茜", 2);
nameSiteMapping.set("景甜", 3);

// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); // 2

// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); // true
console.log(nameSiteMapping.has("Zhihu")); // false

// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); // 3

// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear(); // 清除 Map
console.log(nameSiteMapping);

// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
  console.log(key);
}
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
  console.log(value);
}
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
  console.log(entry[0], entry[1]);
}
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
  console.log(key, value);
}

3.索引类型

• 我们可以使用一个索引访问类型来查询另一个类型上的特定属性
• 格式: [ key]
• 注意点: 不会返回 null/undefined/never 类型

export default {};

// 我们可以使用一个索引访问类型来查询另一个类型上的特定属性
// 格式: []

class Person {
  name: string;
  age: number;
}

type MyIndex = Person["name"];
let a: MyIndex = "赵韩樱子";
console.log(a);

//  获取指定对象, 部分属性的值, 放到数组中返回
let obj = {
  name: "吴倩",
  age: 18,
  gender: true,
};
function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
  let arr = [] as T[K][];
  keys.forEach((key) => {
    arr.push(obj[key]);
  });
  return arr;
}
let res = getValues(obj, ["name", "age"]);
console.log(res);

// 不会返回null/undefined/never类型
interface TestInterface {
  a: string;
  b: number;
  c: boolean;
  d: symbol;
  e: null;
  f: undefined;
  g: never;
}
type MyType = TestInterface[keyof TestInterface];

4.条件类型

• 条件类型的形式看起来有点像 JavaScript 中的条件表达式
• T extends U ? TrueType : FalseType
• 应用场景: 解决函数重载问题

export default {}

// 1.条件类型
// 条件类型的形式看起来有点像JavaScript中的条件表达式
// T extends U ? TrueType : FalseType

interface IName {
  name: string
}

interface IAge {
  age: number
}

// function reLoad(name: string): IName;
// function reLoad(age: number): IAge;
// function reLoad(nameOrAge: string | number): IName | IAge;
// function reLoad(nameOrAge: string | number): IName | IAge {
//   throw ""
// }

// 条件类型
type MyType<T> = T extends string ?: string : any
type res = MyType<string>


// 2.应用场景：解决函数重载问题
type Condition<T> = T extends string ? IName : IAge


function reLoad<T extends number | string>(idOrName: T): Condition<T> {
  throw ""
}

let res1 = reLoad("王丽坤")
let res2 = reLoad(100)

5.分布式条件类型

• 当条件类型作用于一个通用类型时，当给定一个联合类型时，它们就变成了分布式的
• 通常情况下，分布性是需要的行为。为了避免这种行为，你可以用方括号包围 extends 关键字的每一 边。

export default {};

// 定义：被检测类型是一个联合类型的时候, 该条件类型就被称之为分布式条件类型

// type MyType<T> = T extends any ? T : never;
// type res = MyType<string | number | boolean>;

// 从T中剔除可以赋值给U的类型。 Exclude
// type res = Exclude<string | number | boolean, number>

// 提取T中可以赋值给U的类型。 Extract
// type res = Extract<string | number | boolean, number>

// 从T中剔除null和undefined。 NonNullable
// type res = NonNullable<string | boolean | null | undefined>

// 获取函数返回值类型。 ReturnType
// type res = ReturnType<()=>number>

// 获取一个类的构造函数参数组成的元组类型。 ConstructorParameters
// class Person {
//     constructor(name:string, age:number){}
// }
// type res = ConstructorParameters<typeof Person>;

// 获得函数的参数类型组成的元组类型。 Parameters
// function say(name:string, age:number, gender:boolean) {
// }
// type res = Parameters<typeof say>;

6.infer 关键字推断

• 条件类型为我们提供了一种方法来推断我们在真实分支中使用 infer 关键字进行对比的类型
• 我们可以使用 infer 关键字编写一些有用的辅助类型别名

export default {};

// 假如想获取数组里的元素类型，如果是数组则返回数组中元素的类型，否则返回这个类型本身
type Id = number[];
type IName = string[];

type Unpacked<T> = T extends IName ? string : T extends Id ? number : T;

type idType = Unpacked<Id>; // idType 类型为 number
type nameType = Unpacked<IName>; // nameType 类型为string

// 使用infer简化操作
type ElementOf<T> = T extends Array<infer E> ? E : T;
type res1 = ElementOf<string[]>; // string
type res2 = ElementOf<boolean>; // boolean

// infer可以推断出联合类型
type Foo<T> = T extends { a: infer U; b: infer U } ? U : never;
type T11 = Foo<{ a: string; b: number }>; // T11类型为 string | number

7.映射类型

• 当你不想重复定义类型，一个类型可以以另一个类型为基础创建新类型。通俗的说就是，以一个类型为基础，根据它推断出新的类型
• Readonly / Partial 关键字
• Record / Pick 映射类型
• Readonly， Partial 和 Pick 是同态的，但 Record 不是。 因为 Record 并不需要输入类型来拷贝属性，所以它不属于同态

export default {};

// 当你不想重复定义类型，一个类型可以以另一个类型为基础创建新类型。
// 通俗的说就是，以一个类型为基础，根据它推断出新的类型

interface IPerson {
  name: string;
  age: number;
}

// 只读
type Readonly1<T> = {
  readonly [P in keyof T]: T[P];
};

type ReadonlyRes = Readonly1<IPerson>;

// 可选
type Partial1<T> = {
  [P in keyof T]?: T[P];
};

type PartialRes = Partial1<IPerson>;

// 通过 + - 指定添加或者删除
interface IPerson2 {
  readonly name?: string;
  readonly age?: number;
}

type ReadonlyPartial<T> = {
  -readonly [P in keyof T]-?: T[P];
};

type res = ReadonlyPartial<IPerson2>;

// Readonly/Partial 关键字
interface IPerson3 {
  name: string;
  age: number;
}

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
type Partial<T> = {
  [P in keyof T]?: T[P];
};

type res1 = Readonly<IPerson3>;
type res2 = Partial<IPerson3>;

export default {};

// Record映射类型
// 他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型
type Name = "person" | "animal";
type Person = {
  name: string;
  age: number;
};
// interface IPerson  {
//   name: string
//   age: number
// }

type NewType = Record<Name, Person>;
let res: NewType = {
  person: {
    name: "唐艺昕",
    age: 18,
  },
  animal: {
    name: "云梦",
    age: 0.3,
  },
};
console.log(res);

// Pick映射类型
// 将原有类型中的部分内容映射到新类型中
// type Info = {
//   name: string
//   age: number
// }
interface IInfo {
  name: string;
  age: number;
}

type PartProp = Pick<IInfo, "name">;
let res2: PartProp = {
  name: "韩雪",
};

8.其他公共类型

• Required

  构建一个由 Type 的所有属性组成的类型，设置为必填。与 Partial 相反

• Omit<Type, Keys>

  通过从 Type 中选取所有属性，然后删除 Keys （属性名或属性名的联合）来构造一个类型。

• OmitThisParameter

  从类型 T 中剔除 this 参数类型，并构造一个新类型

export default {};

// Required<Type>
// 构建一个由 Type 的所有属性组成的类型，设置为必填。与 Partial 相反
interface IPerson {
  name?: string;
  age?: number;
}

let res: IPerson = {
  name: "舒畅",
};

let res2: Required<IPerson> = {
  name: "舒畅",
  age: 18,
};

// Omit<Type, Keys>
// 通过从 Type 中选取所有属性，然后删除 Keys （属性名或属性名的联合）来构造一个类型。
interface Student {
  name: string;
  age: number;
  score: number;
  sex: boolean;
}

type SProps = Omit<Student, "name">;

let res3: SProps = {
  age: 18,
  score: 100,
  sex: false,
};

// OmitThisParameter
// 从类型T中剔除this参数类型，并构造一个新类型

function add(x: number): void {
  console.log(x);
}

function f0(this: object, x: number) {}
function f1(x: number) {}

// (x: number) => void
type T0 = OmitThisParameter<typeof f0>;

// (x: number) => void
type T1 = OmitThisParameter<typeof f1>;

// string
type T2 = OmitThisParameter<string>;

const x: T0 = add;
const y: T1 = add;
const z: T2 = "江疏影";

console.log(x);
console.log(y);
console.log(z);

八、TS 中的兼容性

1.自动类型推论

• 根据初始值进行类型推论

  不用明确告诉编译器具体是什么类型, 编译器就知道是什么类型

  根据初始化值自动推断

  注意点： 如果是先定义在初始化, 那么是无法自动推断的

• 上下文类型推论

  TypeScript 类型推论也可能按照相反的方向进行。 这被叫做“按上下文归类”。按上下文归类会发生在表达式的类型与所处的位置相关时

export default {};

// 最佳类型推断
// 等价于 let uanme: string = "陈乔恩";
let uname = "陈乔恩";
uname = "徐璐";
// uname = 123;  // 报错
// uname = true; // 报错

let uage;
uage = 123;
uage = true;

// 等价于 let x: (number | null)[] = [0, 1, null];
let x = [0, 1, null];
// x = [18, 28, 38, null, true];

// 上下文类型推断
window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button);
};