Optional,联合转交叉,GetOptional,泛型函数,联合/交叉,MyPick,pick

1.将部分属性转为可选属性

type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>

interface WindowState {
    isMaximized: boolean;
    isFullScreen: boolean;
    data: string;
    count: number;
}

type CreateWindowState = Optional<WindowState, 'isMaximized' | 'isFullScreen'>;
//CreateWindowState相当于如下的OptionalWindowState
 interface OptionalWindowState {
    isMaximized?: boolean;
    isFullScreen?: boolean;
    data: string;
    count: number;
 }

2.联合转交叉类型

type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
type A = UnionToIntersection<{ a: (v: number) => void } | { b: (v: string) => void }>;
type B = UnionToIntersection<{a:string} | {b:number}>

3.提取出可选属性

interface ComplexObject{
  mandatory:string;
  option1?:number;
  option2?:boolean;
}
type GetOptional<T> = {
  [P in keyof T as T[P] extends Required<T>[P] ? never : P] : T[P];
}
let keys: GetOptional<ComplexObject>

4.泛型函数

//原声函数
function identity<T>(arg: T): T {
    return arg;
}

// 使用泛型函数
let output = identity<string>("hello");
console.log(output); // 输出 "hello"

//箭头函数
const identity = <T>(arg: T): T => {
    return arg;
}

// 使用泛型箭头函数
let output = identity<string>("hello");
console.log(output); // 输出 "hello"

5.联合,交叉类型

联合类型(Union Types)和交叉类型(Intersection Types)是 TypeScript 中用于组合类型的两种重要概念。

        1.联合类型(Union Types): 联合类型表示一个值可以是多种类型之一。使用 | 符号将多种类型列在一起,表示该值可以是这些类型中的任意一种。

// 定义一个变量,可以是 string 或 number 类型
let myVar: string | number;
myVar = "hello";
console.log(myVar); // 输出 "hello"

myVar = 123;
console.log(myVar); // 输出 123

        2.交叉类型(Intersection Types): 交叉类型表示将多个类型合并为一个新的类型。使用 & 符号连接多个类型,表示新类型具有所有连接类型的属性。

// 定义一个类型,同时具有 Person 和 Serializable 接口的属性
interface Person {
    name: string;
    age: number;
}

interface Serializable {
    serialize: () => string;
}

type PersonSerializable = Person & Serializable;

const person: PersonSerializable = {
    name: "Alice",
    age: 30,
    serialize: () => JSON.stringify({ name: this.name, age: this.age })
};

console.log(person.serialize()); // 输出 "{"name":"Alice","age":30}"

通过使用联合类型和交叉类型,可以更灵活地组合现有的类型,以满足不同情况下的需求。希望这个简单的介绍能帮助你理解 TypeScript 中的联合类型和交叉类型。如果有任何疑问,请随时提出。

6.MyPick

type MyPick<T, K extends keyof T> = { [P in K]: T[P] };

手写MyPick泛型工具函数,从zhihu文章可以看出他和自带Pick函数是一样的

7.pick

function pick<T,U extends keyof T>(data:T,keys:U[]):{[K in U]:T[K]} {
  const temp:any ={}
  for(const key of keys){
    temp[key] = data[key]
  }
  return temp
}
interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

const user: User = {
  id: 1,
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

const pickedData = pick<User, ('name' | 'age')>(user, ['name', 'age']);

console.log(pickedData); // 输出:{ name: 'Alice', age: 25 }

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值