文章目錄
- 18、d.ts聲明文件
- 19、Mixin混入
- 20、Decorator裝飾器的使用
- 21、-高級proxy攔截_Reflect元儲存
- 22、-高級寫法Partial-Pick
- 23、Readonly只讀_Record套對象
- 24、高階寫法Infer占位符
- 25、Inter實現提取類型和倒敘遞歸
- 26、object、Object、{}的區別
- 27、localStorage封裝
- 28、協變-逆變-雙向協變(賦值操作)
- 29、Set_Map和WeakSet_WeakMap(es6方法和弱引用)
- 總結
18、d.ts聲明文件
- 僅了解,需要用到時查文檔
//todo npm 聲明文件可用npm 根據提示下載// declare var 聲明全局變量
// declare function 聲明全局方法
// declare class 聲明全局類
// declare enum 聲明全局枚舉類型
// declare namespace 聲明(含有子屬性的)全局對象
// interface 和 type 聲明全局類型
/// <reference path="./14-泛型.ts"/> 三斜線指令declare module 'express' {interface Router {get(path: string, cb: (req: any, res: any) => void): void}interface App {use(path: string, router: any): voidlisten(port: number, cb?: () => void): void}interface Express {(): AppRouter(): Router}const express: Expressexport default express
}// 導入使用
import express from 'express';
// 對著聲明時導出的接口
express.Router().get
express().use
19、Mixin混入
- Object.getOwnPropertyNames()獲取對象自身的屬性,除去他繼承來的屬性,
- prototype 獲取原型
- class C2 implements A1,A2 繼承
//* Mixin 混入//! 1.對象混入interface name{name:string
}
interface name1{age:number
}let na:name={name:'ASD'
}
let na1:name1={age:22
}const nn=Object.assign(na,na1)
console.log(nn); // { name: 'ASD', age: 22 }//! 2.類的混入class A1 {type: boolean = false;changeType() {this.type = !this.type}
}class A2 {name: string = '張三';getName(): string {return this.name;}
}//?1class C2 implements A1,A2 {type:boolean=falsechangeType(): void {}name: string='張三';getName(): string {return this.name}
}
console.log(Object.getOwnPropertyNames(Object.create(A2).prototype)); // [ 'constructor', 'getName' ]//?2
//獲取A1,A2的原型到C2上 prototype原型Mixins(C2, [A1, A2])
function Mixins(curCls:any,itemCls:any[]){itemCls.forEach(item=>{//Object.getOwnPropertyNames()可以獲取對象自身的屬性,除去他繼承來的屬性,Object.getOwnPropertyNames(item.prototype).forEach(name=>{curCls.prototype[name]=item.prototype[name]})})
}
20、Decorator裝飾器的使用
- //1.類裝飾器 ClassDecorator
- //2.屬性裝飾器 PropertyDecorator
- //3.參數裝飾器 ParameterDecorator
- //4.方法裝飾器 MethodDecorator PropertyDescriptor
- 5.元數據 import ‘reflect-metadata’ 需要安裝reflect-metadata使用暫不解釋
*需要tsc --init暴露tsconfig.json,并修改里面的experimentalDecorators為true,不然會報錯簽名無法解析
//1.類裝飾器 ClassDecorator
//2.屬性裝飾器 PropertyDecorator
//3.參數裝飾器 ParameterDecorator
//4.方法裝飾器 MethodDecorator PropertyDescriptor
//5.元數據 import 'reflect-metadata'//class類裝飾器
const vv:ClassDecorator=(tag:Function)=>{tag.prototype.getTime=<T>(age:T):T=>{return age}
}@vv
class a11{constructor(){}
}
//別名any 否則報錯
console.log((new a11() as any).getTime('123'));//裝飾器工廠
const vvv=<T>(name?:T):ClassDecorator=>{// console.log(name);return (tag:Function)=>{tag.prototype.getTime=<T>(age:T):T=>{return age}}
}@vvv('asd')
@vvv('asdasd')
@vvv()
class a22{constructor(){}
}
//別名any 否則報錯
console.log((new a22() as any).getTime(1223));//方法裝飾器 屬性裝飾器
const met:MethodDecorator=(...args)=>{//方法console.log(args);
}
const pro:PropertyDecorator=(...args)=>{//屬性console.log(args);
}
const par:ParameterDecorator=(...args)=>{//參數console.log(args);
}class aaa2{@proname:string = 'ss'constructor(){}@metgetName(@par age:string ='123'):string{return age}
}console.log(new aaa2());
//?方法
// [
// {},
// 'getName',
// {
// value: [Function: getName],
// writable: true, 是否可讀寫
// enumerable: false, 是否可枚舉
// configurable: true 是否可配置
// }
// ]//?屬性 [ {}, 'name', undefined ]
// 構造函數或實例 名字 //?參數 [ {}, 'getName', 0 ]
// 構造函數或實例 名字 索引
21、-高級proxy攔截_Reflect元儲存
/****! Proxy 攔截器 *! Reflect 元存儲
*/let xxx={name:'yang',age:18
}const namexxx = (Y:any)=>{return new Proxy(Y,{//攔截對象的讀取get(target,key,receiver){//獲取return Reflect.get(target,key,receiver)}, //攔截對象設置 set(target,key,value,receiver){//設置 return Reflect.set(target,key,value,receiver)}, //'eyeCount' in targetObj // true has(target,key){// 檢查是否含有該屬性return Reflect.has(target,key)}, //攔截對象刪除該屬性deleteProperty(target,key){//刪除該屬性return Reflect.deleteProperty(target,key)}, //獲取原型getPrototypeOf(target){return Reflect.getPrototypeOf(target)}, //設置原型 并刪除原來的 setPrototypeOf(target,proto){//proto 原型方法return Reflect.setPrototypeOf(target,proto)}, //不可擴展對象isExtensible(target){return Reflect.isExtensible(target)}, /*** 判斷該對象是否可擴展*/preventExtensions(target){return Reflect.preventExtensions(target)}, //返回對象屬性的描述符 可讀、枚舉、配置1等getOwnPropertyDescriptor(target,key){return Reflect.getOwnPropertyDescriptor(target,key)},//修改對象屬性描述屬性配置defineProperty(target,key,proto){return Reflect.deleteProperty(target,key)}, //返回對象鍵的數組格式ownKeys(target){return Reflect.ownKeys(target)}, //攔截函數的調用apply(target,Arg,Array){return Reflect.apply(target,Arg,Array)}, //攔截new操作符construct(target,array){return Reflect.construct(target,array)}, })
}
namexxx(xxx)//元儲存
let Y={name:"人",age:'asd'
}class qa{get(){console.log('asdasd');}
}const aq={
name:'22',
get(){console.log(this.name);
}
}let attributes ={ value: '樣',writable: true,enumerable: true,configurable: true}/**
** Reflect.get(Y,) 獲取對象身上某個屬性的值
** Reflect.set() 在對象上設置屬性
** Reflect.has() 判斷一個對象是否存在某個屬性
** Reflect.deleteProperty() 刪除對象上的屬性
** Reflect.getPrototypeOf() 獲取指定對象原型的函數
** Reflect.setPrototypeOf() 設置或改變對象原型的函數
** Reflect.isExtensible() 判斷一個對象是否可擴展 (即是否能夠添加新的屬性)
** Reflect.preventExtensions() 阻止新屬性添加到對象
** Reflect.getOwnPropertyDescriptor() 獲取給定屬性的屬性描述符
** Reflect.defineProperty() 定義或修改一個對象的屬性
** Reflect.ownKeys() 返回由目標對象自身的屬性鍵組成的數組
** Reflect.apply() 對一個函數進行調用操作,同時可以傳入一個數組作為調用參數
** Reflect.construct() 對構造函數進行 new操作,實現創建類的實例* **///獲取
Reflect.get(Y,'age') //設置
Reflect.set(Y,'age','111')
console.log(Reflect.set(Y,'age','111') );//true//檢查是否含有該屬性
Reflect.has(Y,'name')
console.log(Reflect.has(Y,'name') );//true//刪除該屬性
Reflect.deleteProperty(Y,'age')
console.log(Reflect.deleteProperty(Y,'age') );//true//獲取原型
Reflect.getPrototypeOf(Y)//設置原型 并刪除原來的
Reflect.setPrototypeOf(Y,qa)
console.log((Y as any).prototype); //{}//不可擴展對象
Reflect.isExtensible(Y) //判斷該對象是否可擴展
Reflect.preventExtensions(Y) //返回對象屬性的描述符 可讀、枚舉、配置1等
Reflect.getOwnPropertyDescriptor(Y,'name')
console.log(Reflect.getOwnPropertyDescriptor(Y,'name'));//{ value: '人', writable: true, enumerable: true, configurable: true }//修改對象屬性描述屬性配置
Reflect.defineProperty(Y,'name',attributes)
console.log(Y); //attributes{ value: '人', writable: true, enumerable: true, configurable: true }//返回對象鍵的數組格式
Reflect.ownKeys(Y) //對一個函數進行調用操作,同時可以傳入一個數組作為
Reflect.apply(aq.get,aq,[1,2,3])
console.log( Reflect.apply(aq.get,aq, [1,2,3]));//
function Person12 (name:string, hobby:string){
console.log(`${name}喜歡${hobby}`);
return `${name}喜歡${hobby}`
}// 對構造函數進行 new操作,實現創建類的實例
const person = Reflect.construct(Person12, ['一碗周','coding'],Person12)/**
*! 總結
*! Reflect對象提供哪些靜態方法,都是可以通過另一種方式來完成的,那為什么還要提供一個Reflect對象呢?
*!
*! 這是因為前面的那十三種操作,可能來自不同的對象里面的方法,有全局的、有Object的、有Function的,但是提供了Reflect對象之后就將前面所有的操作統一到了一個對象下面 ,也統一了操作方式 。
22、-高級寫法Partial-Pick
Partial 設置所有屬性為可選
Pick 返回一個新定義的類型
//*進階用法 Partial Pick
/*** Make all properties in T optional* 將T中的所有屬性設置為可選* 與ts自帶的Partial沖突才加的Partialed,可直接使用Partial*/type Partialed<T> = {[P in keyof T]?: T[P];
};type PersonS = {name:string,text:stringage:number
}/*** 轉換后全部屬性為可選 keyof取出屬性變成聯合類型 ,* in類似for in遍歷 ,* ?變為可選,* T[P]索引訪問,**/
type p =Partialed<PersonS>//!
/*** From T, pick a set of properties whose keys are in the union K,* 從類型定義T的屬性中,選取指定一組屬性,返回一個新的類型定義。* 返回"text" | "age" 并組成新類型定義* 與ts自帶的Pick沖突才加的Picked,可直接使用Pick*/
type Picked<T, K extends keyof T> = {[P in K]: T[P];
};type Ex = "text" | "age"type C =Picked<PersonS,Ex>
23、Readonly只讀_Record套對象
Readonly 結合Partial使對象等變為只讀
Record 返回一個對象包裹的鍵值對
// Readonly 只讀 Record 套一層對象/*** !Readonly* Make all properties in T optional* 將T中的所有屬性設置為只讀* 與ts自帶的Partial沖突才加的Partialeds,可直接使用Partial*/type Partialeds<T> = {readonly [P in keyof T]: T[P];
};type Personed = {name:string,text:stringage:number
}/*** 轉換后全部屬性為只讀 keyof取出屬性變成再聲明為只讀,* in類似for in遍歷 ,* readonly變為只讀,* T[P]索引訪問,**/
type ps =Partialeds<Personed>/*** ! Record ,* * 作用:返回一個自定義的鍵包裹類型定義* 0:{* name:"",* text:'',* age:1* }* 限制鍵值對**/ type Records<K extends keyof any, T>={[P in K]:T}type sa=Records<0,Personed>let ssss:sa={0:{name:"",text:'',age:1}}
24、高階寫法Infer占位符
// infer的作用 新增的關鍵字-用于占位符
// 需求:定義一個類型 如果是數組類型 就返回 數組元素的類型 否則 就傳入什么類型 就返回什么類型
// 01:簡單的定義 數組
type TYPE<T> = T extends Array<any> ? T[number] : T;
type AAAA = TYPE<string[]>;
let aaaa: AAAA = "111";type BBBB = TYPE<boolean>;
let bbbb: BBBB = true;// 02:使用infer U做占位符
type TYPE2<T> = T extends Array<infer U> ? U : T;
type AAAA2 = TYPE2<(string | number)[]>;
let aaaa2: AAAA2 = 1;type BBBB2 = TYPE2<boolean>;
let bbbb2: BBBB2 = true;// 03:使用infer U做占位符 - 聯合類型
type TYPE3<T> = T extends Array<infer U> ? U : never;
type TTTT = [number, string];
type uni = TYPE3<TTTT>; // type uni = string | number
type uni2 = TYPE3<boolean>; // type uni2 = never// 04:使用infer U做占位符 - 提取數組之中的某一項元素
type Arr = ["a", "b", "c"];
// 04-1 提取第一項
type First<T extends any[]> = T extends [infer one, infer two, ...any[]]? one // one => type a = "a"; two type a = "b";: [];
type a = First<Arr>; // type a = "a"// 04-2 提取最后一項
type Last<T extends any[]> = T extends [...any[], infer Last] ? Last : [];
type b = Last<Arr>; // type b = "c"// 04-3 刪除最后面一項
type Pop<T extends any[]> = T extends [...infer Rest, infer Last] ? Rest : [];
type c = Pop<Arr>; // type c = ["a", "b"]// 04-3 刪除最前面一項
type Shif<T extends any[]> = T extends [infer Last, ...infer Rest] ? Rest : [];
type d = Shif<Arr>; // type d = ["b", "c"]// 05:使用infer U做占位符 - infer遞歸 ( 翻轉數組 )
type Arr2 = [1, 2, 3, 4];
type ReverArr<T extends any[]> = T extends [infer First, ...infer Rest] ? [...ReverArr<Rest>,First] : T;
type ArrRever = ReverArr<Arr2> // type ArrRever = [4, 3, 2, 1]
25、Inter實現提取類型和倒敘遞歸
//類型提取 Infer type Arrs = ['a','b','c']/*** 返回頭或尾*/
type First<T extends any[]> = T extends [...any[],infer First] ? First : [] /** * 返回刪除頭或尾后的數組* unknown聲明
*/
type Firsts<T extends any[]> = T extends [...infer First,unknown] ? First : []
type a = First<Arrs>
type aa = Firsts<Arrs>//Infer 遞歸用法//*倒敘
type Arr = [1, 2, 3, 4]/*** [infer First, ...infer rest] [...ReveArr<rest>, First]* 將第一個First放在后面,反復調用每次會自動減少
*/
type ReveArr<T extends any[]> = T extends [infer First, ...infer rest] ?[...ReveArr<rest>, First] : Ttype Res = ReveArr<Arr> // [4, 3, 2, 1]
26、object、Object、{}的區別
//object、Object 以及{}的區別用法/*** ! object 是一個表示非原始類型的類型。它可以包括任何非原始類型,如數組、函數、對象等。* ! Object 是 JavaScript 中的內置對象,它是所有對象的基類。* ! {} 是一種簡寫形式,表示一個空對象。在 TypeScript 中,{} 可以用作類型注解,表示一個空對象類型。
*//*** * object 表示對象類型 * */
let a1:object={}/*** *Object是JS的內置對象,表示所有對象的原型頂層
*/
let a2:Object= Object/*** *{}空對象,類型和Object一樣在ts里面 沒有Object的方法屬性
*/
let a3={}
27、localStorage封裝
let a = new Date().toLocaleString()interface time{outtme:string
}type Key=stringinterface Result { //返回值類型message: string,value: object
}interface setvalue{set:<T>(key:Key,value:T,time?:number)=>voidget:<T>(key:Key)=>voidremove:(key:Key)=>voidclear:()=>void
}
interface vas{value:Objecttime?:number
}
enum out{yes,no
}
class Storages implements setvalue{get(key:Key){if(key){let keys= JSON.parse(localStorage.getItem(key) as string)console.log();if(new Date().getTime() / 1000 < keys.value){return keys}else{return{message:`已過期,請重新設置`,}}}} set(key:Key,value:any,time?:out|number){if(value!=undefined && value!=null ){let va ={value:value,time:(typeof time=='number'?time:0) +Number(new Date().getTime()) / 1000 //毫秒轉秒}if(time!=0){localStorage.setItem(key,JSON.stringify(va))return{message:`過期設置`,value:value}}else if(time==0){localStorage.setItem(key,JSON.stringify(va))return{message:`永不過期設置`,value:value}}}else{return {message:`設置${key}錯誤,是個空值或或沒聲明的值`}}}remove(key:Key){localStorage.removeItem(key)}clear(){localStorage.clear()}
}
const times =new Storages()
console.log(times.set('start',123,21));
console.log(times.get('start'));
28、協變-逆變-雙向協變(賦值操作)
//!協變//當屬性多的一個包含屬性少的變量時,可以產生協變 賦值操作//*多賦少interface A {name:string
}interface B {name:stringage:numbersex:string
}let a:A = {name:"老墨我想吃魚了",
}let b:B = {name:"老墨我不想吃魚",age:33,sex:"女"
}a = bconsole.log(a);
console.log(b);//!逆變//函數上 函數賦值 少賦多let fna = (params:A) => {}
let fnb = (params:B) => {}// fna = fnb //錯誤fnb = fna //正確//!雙向協變//設置tsconfig.json 屬性strictFunctionTypes=false,可進行雙向賦值操作 雙向協變
29、Set_Map和WeakSet_WeakMap(es6方法和弱引用)
//!weakMap,weakSet,set,map//1.set 集合//add(value):添加某個值,返回 Set 結構本身。
//
//delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
//
//has(value):返回一個布爾值,表示該值是否為 Set 的成員。
//
//clear():清除所有成員,無返回值。
//
//size : 返回set數據結構的數據長度 let a= new Set()
a.add('sasd')
//去重 配合擴展運算符可以去重
let b= [...new Set(['asdsa','asd'])]//2.map 它類似于對象,也是鍵值對的集合let c= new Map()caches.delete('asd')
c.has('s')//查詢是否有's'
c.clear()
c.get('ad')
c.set('asd','asd')
c.size//WeakSet 和 WeakMap 當不引用是
//WeakSet的成員只能是對象,WeakMap只接受對象(null除外)作為鍵名
//不計入垃圾回收機制
//沒有遍歷操作,沒有size屬性,沒有clear方法
//不需要時會自動GC回收
//可以放其他東西,dom 函數等, 不用回自動回收掉let obj:any = {name:'小滿zs'} //1
let aahph:any = obj //2
let wmap:WeakMap<object,string> = new WeakMap()wmap.set(obj,'愛安徽潘慧') //2 他的鍵是弱引用不會計數的obj = null // -1
aahph = null;//-1
//v8 GC 不穩定 最少200mssetTimeout(()=>{console.log(wmap)
},500)