前端React Nextjs中的TS类型过滤实用技巧

type FilterConditionally<Source, Condition> = Pick<
  Source, 
  {
    [K in keyof Source]: Source[K] extends Condition ? K : never
  }[keyof Source]
>;

interface Example {
    a: string;
    b: string; 
    c: number; 
    d: boolean; 
}
type NewType = FilterConditionally<Sample, string>

interface Example {
  a: string;
  b: string;
  c: number;
  d: boolean;
}
type Keys = keyof Example   // 等价于 type Keys = 'a' | 'b' | 'c' | 'd'

type Keys = 'a' | 'b' | 'c' | 'd'
type Obj = {
  [T in Keys]: string;  // 遍历Keys，把每个key都赋值string类型
}

interface A {}
interface B extends A {}  // B继承于A
// B是否继承于A？若是，则为number类型；若不是，则为string类型
type C = B extends A ? number : string  // 等价于 type C = number
// A是否继承于B？若是，则为number类型；若不是，则为string类型
type D = A extends B ? number : string  // 等价于 type D = string

type MarkUnwantedTypesAsNever<Source, Condition> ={
  [K in keyof Source]: Source[K] extends Condition ? K : never
}

interface Example {
    a: string; 
    b: string; 
    c: number; 
    d: boolean; 
}
// 我只想要Example类型中的string类型的key，非string的就标记为never
type MyType = MarkUnwantedTypesAsNever<Example, string>

type Value = {name: "zero2one"}["name"]  // 等价于 type Value = "zero2one"

type Value = {
  name: "zero2one"; 
  age: 23
}["name" | "age"]
// 等价于 type Value = "zero2one" | 23

type Value = {
  name: "zero2one"; 
  age: never
}["name" | "age"]
// 等价于 type Value = "zero2one"

type MarkUnwantedTypesAsNever<Source, Condition> ={
  [K in keyof Source]: Source[K] extends Condition ? K : never
}[keyof Source]

// 借用一下刚才例子的结果
type MyType = {
  	a: 'a';
		b: 'b';
		c: never;
		d: never;
}['a' | 'b' | 'c' | 'd']

// Pick类型的实现
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}

interface A {
  a: 1;
  b: 2;
  c: 3;
  d: 4;
}
type C = Pick<A, 'a' | 'c'>  // 等价于 type C = { a: 1; c: 3 }

interface Example {
	a: string;
  b: string;
  c: number;
  d: boolean;
}
// 上文得到的结果
type MyType = 'a' | 'b'
type Result = Pick<Example, MyType>  // 等价于 type Result = { a: string; b: string }
// ---- 以上等价于 ---- //
interface Example {
    a: string; 
    b: string;   
    c: number; 
    d: boolean; 
}
type NewType = FilterConditionally<Sample, string>

type ElementType<P = any> = {
	[K in keyof jsX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never
}[keyof JSX.IntrinsicElements] | ComponentType<P>;