typescript记录

//用于测试的类型
type User = {
  readonly name:string;
  age:number;
  sex:"男" | "女";
  height?:number;
}
// 把所有类型转换为readonly
type MyReadonly<T>= {
  +readonly [key in keyof T]:T[key]
}
const myTest2:MyReadonly<User> = {
  name:"张三",
  age:15,
  sex:"男"
}
myTest2.age = 18; //错误,无法为“age”赋值,因为它是只读属性

// 把所有类型转换为可选
type MyChoosable<T> = {
  [key in keyof T]+?:T[key]
} 
const myTest3:MyChoosable<User> = {}

// 把所有可选变成必选,所有只读变成可改
type MyNegation<T> = {
  -readonly [key in keyof T]-? : T[key]
}
const myTest4:MyNegation<User> = {  //错误,缺少height属性
  name:"张三",
  age:15,
  sex:"男",
}
myTest4.name = "李四"  //正确,不是只读属性

//限制对象的key取值,以及限制类型
type NyRerod<T extends keyof any,U>={
  [key in T] : U
}
type abc = "a" | "b" | "c"
const myTest5:NyRerod<abc,User> = {
  a:{name:"张三",age:18,sex:"女"},
  b:{name:"张三",age:18,sex:"女"},
  c:{name:"张三",age:18,sex:"女"},
}

// 在某个类型中选几个值生成新的类型
type MyPick<T,U extends keyof T> = {
  [key in  U]:T[key]
}
const myTest6:MyPick<User,"name" | "age"> = {
  name:"张三",
  age:18
}

// 将两个类型进行合并,相同键取后面的
type user1 = {
  name:string;
  age:number;
  sex:"男" | "女"
}
type user2 = {
  name:number;
  age:number;
  sex:"A" | "B"
  like:string;
}
type myMerge<T,U> = {
  [key in keyof T | keyof U] : key extends keyof U ? U[key] : key extends keyof T ? T[key] : never
}
type result = myMerge<user1,user2>

// 排除相同的类型
type MyExclude<T,U> = T extends U ? never : T;
type T0 = MyExclude<"a" | "b" | "c", "c">

// 取出共同的类型
type MyExtract<T,U> = T extends U ? T : never;
type T1 = MyExtract<"a" | "b" | "c", "c">

// 指定移除对象的某些健
type Todo = {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
type myOmit<T,U extends string | number | symbol> = {
  [key in MyExclude<keyof T,U>]:T[key]
}
type TodoPreview = myOmit<Todo, "description">;

// 函数重载定义
function overloadedFunction(x: number): string;
function overloadedFunction(x: string): number;
function overloadedFunction(x: any): any {
    // 实现函数的通用部分
    if (typeof x === 'number') {
        // 处理x为number的情况
        return '这是一个数字: ' + x;
    } else {
        // 处理x为string的情况
        return x.length;
    }
}
 
// 使用函数
let result1 = overloadedFunction(5); // 返回类型是string
let result2 = overloadedFunction('Hello World'); // 返回类型是number
// 映射类型的属性过滤
type User = {
   readonly id:number;
    name:string;
    tel:string;
    address?:string;
}
type A<T,U extends keyof T> = {
    [key in keyof T as key extends U ? never : key] : T[key]
}
type B = A<User,"name" | "tel" >

// 只要类型为string的属性
type C<T, U> = {
    [key in keyof T as T[key] extends U ? key : never]: T[key];
}
type D = C<User, number>

//输入html元素获取它的的类型
type GetElementType<T extends keyof HTMLElementTagNameMap> = HTMLElementTagNameMap[T]
type E = GetElementType<"img">
// 根据姓获取整个名字,并且输入不在数组中的姓时,要报错
const names = ["Daniel Craciun", "John Doe", "Harry Pigeon"] as const; //string[]类型转换为readonly ["Daniel Craciun", "John Doe", "Harry Pigeon"]
type Names = typeof names[number];  //获取到联合类型"Daniel Craciun" | "John Doe" | "Harry Pigeon"
type SurName<T extends string> = T extends `${infer a} ${infer b}` ? b : never;
type myName = SurName<Names>; //"Craciun" | "Doe" | "Pigeon"
const findName = (surname: myName) => {
    return names.find((name) => {
        return name.includes(surname);
    });
}
console.log(findName("Doe"), "name");  //John Doe
console.log(findName("aaa"), "name");  //报错
// 监听对象中的某一个值,并且方法名为key + Change,并且oldValue,newValue类型为正确的类型
type Watcher<T> = {
  on: <K extends keyof T & string>(event: `${K}Change`, callback: (oldValue:T[K],newValue:T[K]) =>void) => void;
}
declare function watch<T>(obj:T):Watcher<T>;
const personWatcher = watch({
  firstName: 'John',
  lastName: "Doe",
  age: 30,
  sex:"男"
});
personWatcher.on("firstNameChange",(oldValue,newValue)=>{

});
/**
 * 定义一个函数,参数不定,最后一个参数是一个函数,并且这个函数的参数个数等于前面的参数个数,类型也保持一致
 * 前面参数的类型是js的类型
 * addImpl("string","string","symbol",(a,b,c) =>{
    console.log(a,b,c);
});
 * a,b,c的类型分别是string,string,symbol
 */
type JStypeMap = {  //定义js类型的映射
    "string": string;
    "number": number;
    "boolean": boolean;
    "symbol": symbol;
    "function": Function;
    "undefined": undefined;
    "object": object;
    "bigint": bigint;
    "null": null;
}
type typeKey = keyof JStypeMap;  //获取js类型的key的联合类型
type typeValue<T extends typeKey[]> = {
    [key in keyof T] : JStypeMap[T[key]]  //获取"string"等字符串的类型
};
declare function addImpl<T extends typeKey[]>(...arg:[
    //因为前面参数不固定,后面一个参数是函数,所以通过这样展开来确定
    ...T, //一直纳闷,下面的函数也没传泛型,为啥能拿到["string","string","symbol"],结果是这里反推的
    (...arg:typeValue<T>) => any
]):any;
addImpl("string","string","symbol",(a,b,c) =>{
    console.log(a,b,c);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值