ts之进阶 协变(鸭子类型)、逆变、proxy 和 Reflect 定义对象、Partial & Pick、readonly、Record来限制对象的key和value

ts之进阶

• ts-node XXX.ts 执行XXX.ts文件

01：ts之进阶 之 协变(鸭子类型)与逆变

• 协变
  • 子类型 可以 协变为主类型 （ 子类型，必须都包含主类型key ）
• 逆变
  • 子类型 可以 协变为主类型 （ 子类型，必须都包含主类型key ）

// 01：协变
interface A {
    
    
  name: string;
  age: number;
}
interface B {
    
    
  name: string;
  age: number;
  sex: string;
}

let a: A = {
    
    
  name: "菜鸡",
  age: 20,
};
let b: B = {
    
    
  name: "小菜鸡",
  age: 21,
  sex: "男",
};
// 协变 类型B 为子类型 - A为主类型
// 子类型可以多，但是主类型下的参数等必须得包含
a = b;

// 02：逆变  A为主类型 B为子类型
let fnA = (params: A) => {
    
    };
let fnB = (params: B) => {
    
    };
fnB = fnA; // 最好执行的 是 fnA函数 依旧是 A为主类型 B为子类型

02：ts之进阶 之 proxy 和 Reflect 定义对象

• proxy 和 Reflect 定义对象
  • Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

02-1 proxy 和 Reflect 类型做限制

// 01：proxy 和 Reflect 类型做限制
type Person = {
    
    
  name: string;
  age: number;
  text: string;
};
let proxy = (obj: any, key: any) => {
    
    
  return new Proxy(obj, {
    
    
    get(target, prop, receiver) {
    
    
      // console.log("get", prop);:
      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
    
    
      // console.log("set", prop);
      return Reflect.set(target, prop, value, receiver);
    },
  });
};
// 有限制的
let logAccess = (person: Person, key: "name" | "age" | "text") => {
    
    
  // console.log("person", person, "key", key);
  return proxy(person, key);
};
// 有限制的
let p: Person = logAccess(
  {
    
    
    name: "ppp",
    age: 20,
    text: "我是菜鸡",
  },
  "name"
);
p.age = 100;
console.log("p", p); // p { name: 'ppp', age: 100, text: '我是菜鸡' }

02-2 proxy 和 Reflect 泛型

//  02：proxy 和 Reflect 泛型
type Person = {
    
    
  name: string;
  age: number;
  text: string;
};
let proxy = (obj: any, key: any) => {
    
    
  return new Proxy(obj, {
    
    
    get(target, prop, receiver) {
    
    
      // console.log("get", prop);

      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
    
    
      // console.log("set", prop);
      return Reflect.set(target, prop, value, receiver);
    },
  });
};
// 泛型
let logAccess = <T>(person: T, key: keyof T): T => {
    
    
  // console.log("person", person, "key", key);
  return proxy(person, key);
};

// 泛型
let p2 = logAccess(
  {
    
    
    name: "ppp22",
    text: "菜菜",
  },
  "name"
);
p2.text = "我就是说啊";
console.log("p2", p2); // p2 { name: 'ppp22', text: '我就是说啊' }

let p3 = logAccess(
  {
    
    
    name: "ppp22",
    text: "菜菜",
    id: 1,
  },
  "id"
);

03：ts之进阶 之 Partial & Pick

• Partial 设置 type定义的类型，可以重新设置为可选类型
• Pick 提取type类型上的某些key值的做限制

// Partial & Pick
// 01：Partial定义的 type类型为可选的类型
type Person1 = {
    
    
  name: string;
  age: number;
  sex: string;
};
type P1 = Partial<Person1>;
// Partial 定义后的 type类型的数据，都是设置为可选类型
// type p1 = {
    
    
//   name?: string | undefined;
//   age?: number | undefined;
//   sex?: string | undefined;
// }
let p1: P1 = {
    
    
  name: "ppp",
  age: 10,
};

// 02：Pick定义的 提取当前传入的 参数类型
type Person2 = {
    
    
  name: string;
  age: number;
  sex: string;
};
type p2 = Pick<Person2, "age" | "name">;
// type p2 = {
    
    
//   name: string;
//   age: number;
// }

04：type之中泛型 做传入每一项 做限制 ( readonly )

// R类型所传入的T泛型 遍历了所传入的每一项 设置为 readonly
type R<T> = {
    
    
  readonly [P in keyof T]: T[P];
};

type Person3 = {
    
    
  name: string;
  age: number;
  text: string;
};
type p3 = R<Person3>;
// type p3 = {
    
    
//   readonly name: string;
//   readonly age: number;
//   readonly text: string;
// }

04：ts之进阶 之 Record来限制对象的key和value

// Record 来限制 对象的key和value
type P = {
    
    
  [key: string]: number;
};
let p: P = {
    
     ppp: 10, ooo: 10 };
// k不是泛型  K泛型

// 01 Record 来限制 对象的key和value
type PP = Record<string, number>;
let pp: PP = {
    
    
  ppp: 10,
  ooo: 10,
};

type PP2 = Record<string, string>;
let pp2: PP2 = {
    
    
  ppp: "10", //  ppp: '10' 不能将类型“number”分配给类型“string”
  ooo: "10",
};

// 02 Record 来限制 复杂对象的key和value
interface term {
    
    
  info: number;
  checked: boolean;
}
type TermMap = Record<string, term>;
// item项目  key:string  value: { info: 10, checked: true }
let termMap: TermMap = {
    
    
  xxx: {
    
    
    info: 10,
    checked: true,
  },
};

// 03 Record 来限制 复杂对象的key和value
interface info_config {
    
    
  name: string;
}
interface term2 {
    
    
  info: info_config;
  checked: boolean;
}
let termMap2 = {
    
    } as Record<string, term2>;
// 定义对象 Record<string, string> 第一个string为key值，第二个为obj[key]数据的类型
termMap2 = {
    
    
  xxx: {
    
    
    info: {
    
    
      name: "111",
    },
    checked: true,
  },
};

// 04 Record 来限制 复杂对象的key和value
interface info_config3 {
    
    
  name: string[];
}
interface term3 {
    
    
  info: info_config3;
  checked: boolean;
}
let termMap3 = {
    
    } as Record<string, term3>;
// 定义对象 Record<string, string> 第一个string为key值，第二个为obj[key]数据的类型
termMap3 = {
    
    
  xxx: {
    
    
    info: {
    
    
      name: ["1", "2"],
    },
    checked: true,
  },
};