TypeScript 高级技巧

ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ（只要朝着一个方向努力，一切都会变得得心应手。——勃朗宁）
ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

• @event 高级类型核心keyof和in
• @description keyof产生联合类型,in则可以遍历枚举类型

/ 测试数据
const chunk = {
    _id: '5d9959be7895f045ca81c0e8',
    name: 'zzw',
    dayId: '1575129600',
    count: 2
};
let chunks = [
    {
        _id: '5d9959be7895f045ca81c0e1',
        name: 'jmr',
        dayId: '1575129600',
        count: 1
    },
    {
        _id: '5d9959be7895f045ca81c0e8',
        name: 'zzw',
        dayId: '1575129600',
        count: 2
    },
    {
        _id: '5d9959be7895f045ca81c0e8',
        name: 'zzw',
        dayId: '1575129600',
        count: 2
    },
    {
        _id: '5d9959be7895f045ca81c0e9',
        name: 'zzw',
        dayId: '1575129600',
        count: 2
    }
];


interface Ichunk {
    _id: string,
    name: string,
    dayId: string,
    count: number
}

interface Ichunks {
    _ids: string,
    names: string,
    dayIds: string,
    counts: number
}

• 抽象pluck方法，根据重载类型声明和索引类型获取获取对象属性

/**
 * @event 索引类型
 * @description 使用key of 关键获取类型的可索引类型
  * U继承了T（obj）的可索引类型
  * "_id" | "name" | "dayId" | "count"/**
 * 为什么需要索引类型？
 * 使用typescript除了它的语法提示之外，更重要的是类型约束与安全
 * 我们在这次定义了索引类型，使之只能使用可索引类型
 * 1.加强类型安全
 * 2.提升开发效率
 * 3.提高代码质量
 * 4.降低bug发生率
 */

class Tindex {

    // 返回由指定key生成的新JSON
    public pluck<T, K extends keyof T>(chunk: T, strArray: K[]): T;
    // 返回由指定key生成的新数组
    public pluck<T, K extends keyof T>(chunk: T, strArray: K[], chunks: T[]): T[];

    // 实现
    // 可以用这种方式写，但都用ts了，就少用any吧 
    // public pluck(chunk: any, strArray: any, chunks?: any) {
    public pluck<T, K extends keyof T>(chunk: T, strArray: K[], chunks?: T[]) {
        if (!chunks) {
            const strand: any = {};
            for (const element of strArray) {
                strand[element] = chunk[element];
            }
            return strand;
        }

        let state = true;
        return chunks.
            map((v: any) => {
                state = true;
                for (const element of strArray) {
                    if (!(v[element] === chunk[element])) {
                        state = false;
                        break;
                    }
                }
                if (state) {
                    return v;
                }
            }).
            filter((v: any) => v);
    };
}
const indexClass = new Tindex();

// 导出指定id和日期的元素json
const obj = indexClass.pluck(chunk, ['_id', 'dayId']);
console.log(obj);

// 导出指定名称和日期的元素数组
const arr = indexClass.pluck(chunk, ['name', 'dayId'], chunks);
console.log(arr);

---

• @event 将索引出的类型全部映射为可选类型
• @default partial

// 在TS中有内置类型  用于将类型索引全部变更为可读的新类型
// const example: Partial = {};
// type exampleType = Partial;
// const example: exampleType = {};

// 自定义实现写法，一般使用内置的就足够
// 通用写法
// type exampleType = {
//     [P in keyof T]?: T[P];
// }
// type exampleTypes = exampleType;
// const example: exampleTypes = {};

// 非通用写法，将索引出的固定类型全部映射为可选类型
// type exampleType = {
//     [P in keyof Ichunk]?: Ichunk[P];
// }
// const example: exampleType = {};

// 非通用写法（二），通过继承合并的方式映射
// type exampleType = {
//     [P in keyof T]?: T[P];
// }
// type exampleTypes = exampleType;
// const example: exampleTypes = {};

---

• @event 将索引出的类型全部映射为必选类型
• @default Required

/*
 * 在TS中有内置类型  用于将类型索引全部变更为必选的新类型
 * 写法一：
 * const example: Required = { _id: '', name: '', dayId: '', count: 0 };
 * 写法二：
 * type exampleType = Required;
 * const example: exampleType = { _id: '', name: '', dayId: '', count: 0 };
 * 自定义类型同上，但需要注意的是的源码是{ [P in keyof T]-?: T[P] }; 使用了-号
 */

---

• @event 将索引出的类型全部映射为只读类型
• @default Readonly

/**
 * 在TS中有内置类型  用于将类型索引全部变更为只读的新类型
 * 写法一：
 * const example: Readonly = { _id: '', name: '', dayId: '', count: 0 };
 * 写法二：
 * type exampleType = Readonly;
 * const example: exampleType = { _id: '', name: '', dayId: '', count: 0 };
 * 自定义类型同上，需要注意的是的源码是readonly [P in keyof T]: T[P];前缀加上了readonly
 */

---

• @event 抽取旧类型中的部分索引类型为新类型
• @default Pick

/**
 * 在TS中有内置类型  用于抽取旧类型中的部分索引类型为新类型
 * type keys = keyof Ichunk; //抽取所有类型
 * type keys = '_id' | 'name'; // 抽取部分类型
 * 写法一：
 * const example: Pick = { _id: '', name: ''};
 * 写法二：
 * type exampleType = Pick;
 * const example: exampleType = { _id: '', name: ''};
 */
 
 //自定义实现写法，一般使用内置的就足够
// 非通用写法
// type exampleType = {
//     [P in '_id' | 'name']?: Ichunk[P];
// }
// const example: exampleType = {};

// 通用写法
// 定义索引类型
// type keys = '_id' | 'name';
// T为泛型约束，K继承了T的索引，用于通用类型映射
// type exampleType = {
//     [P in K]: T[P];
// }
// const example: exampleType = {
//     _id: '5d9959be7895f045ca81c0e8',
//     name: 'zzw'
// };

// 交叉类型扩展（联合类型和这个一样）
// type moreType = { age: number, address?: string };
// const example2: exampleType & moreType = {
//     _id: '5d9959be7895f045ca81c0e8',
//     name: 'zzw',
//     age: 1
// };

---

• @event 根据输入的索引生成新类型，和Pick不同的是，不需要输入类型
• @default Record

/**
 * 在TS中有内置的类型，用于根据索引生成指定的新类型
 * 写法一： 使用生成新的可读类型
 * type exampleType = Partial>;
 * const example: exampleType = {school: ''};
 * 写法二：额外使用交叉类型从旧类型中抽取部分属性为必选项
 * type exampleTypeRequired = Required>;
 * const example: exampleType & exampleTypeRequired = { _id: '', name: '', dayId: '' };
 */

---

• @event 根据索引移除类型中的key得到新的索引类型
• @default Exclude

/**
 * type keys = 'name';
 * // 去除旧类型中的name属性，左侧为类型池，右侧为需要去除的类型
 * type exampleKeys = Exclude;
 * // 根据新的索引生成类型
 * type exampleType = Pick;
 * type exampleTypeMore = exampleType & Required>;
 * const example: exampleTypeMore = { _id: '', dayId: '', count: 0, address: '' };
 */

---

• @event 提出原类型中的部分属性，生成新的类型
• @default Omit

/**
 * 在TS中有内置的类型，用于剔除指定key并生成新的类型
 * const example: Omit = { _id: '', count: 0 };
 *
 * //自定义通用类型 去除属性并添加额外key，生成新的类型
 * type exampleOmit = Pick>;
 * type examplePartial = Partial>;
 * type exampleMore = exampleOmit & examplePartial;
 * const example: exampleMore = { _id: '', count: 0 };
 */

---

• @event 从指定索引中提取索引生成新的索引，类似Pick，不需要传递类型，但需要生成新类型
• @default Extract

/**
//在TS中有内置的类型，用于剔除指定key并生成新的类型
type exampleType = Extract<'_id' | 'name', keyof Ichunk>;
// 自定义通用类型
// type exampleType = Required, string>>;
// const example: exampleType = { _id: '', name: '', dayId: '' };
 */

---

• @event 剔除无效类型
• @default NonNullable

/**
 * type example = NonNullable;
 */

---

• @event 获取函数返回值类型
• @default ReturnType

/**
 * function handle  ()  { return '';};
type exampleType = ReturnType
 */

---

• @event 获取属性类型
• @default typeof

/**
 * const str: [{name: string}] = [{name: 'zzw'}];
type exampleType = typeof str;
const strs: exampleType = [{name: 'jmr'}];
 */

---