ts advanced covariance (duck type), contravariance, proxy and Reflect define objects, Partial & Pick, readonly, Record to limit the key and value of objects

advanced ts

• ts-node XXX.tsExecute the XXX.ts file

01: Advanced covariance (duck type) and inversion of ts

• covariant
  • Subtypes can covariate with the main type (subtypes must all contain the main type key)
• inverter
  • Subtypes can covariate with the main type (subtypes must all contain the main type 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: Advanced proxy and Reflect definition objects of ts

• Proxy and Reflect definition objects
  • The Proxy object is used to create a proxy of an object, so as to realize the interception and customization of basic operations (such as attribute lookup, assignment, enumeration, function call, etc.)

02-1 Restrictions on proxy and Reflect types

// 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 and Reflect generics

//  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: Advanced Partial & Pick of ts

• Partial sets the type defined by type, which can be reset to an optional type
• Pick extracts certain key values ​​​​on the type type to limit

// 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: In the type, the generic type is passed in and each item is restricted ( 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: Advanced Record of ts to limit the key and value of the object

// 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,
  },
};