一. ts泛型詳解
1. 泛型實現參數化
// 當定義一個函數，不確定參數類型的時候，可以使用泛型 function myPrint<T, M>(obj1: T, obj2: M): void { console.log(obj1); console.log(obj2); } // 調用方式1：明確傳入類型 myPrint<string, number>('ypf', 18); // 調用方式2：使用類型推導 myPrint(20, { name: 'ypf', address: 'beijing' });
2. 泛型接口
//1.基本用法 interface IPerson<T1, T2> { name: T1 age: T2 } // 實現接口 const p1: IPerson<string, number> = { name: 'ypf', age: 18 } // 2. 指定泛型的默認值 interface IPerson2<T1=string, T2=number> { name: T1 age: T2 } // 實現接口 const p2: IPerson2<string, number> = { name: 'ypf', age: 18 }
3. 泛型類
class Point<T>{ x:T y:T z:T constructor(x:T,y:T,z:T){ this.x=x; this.y=y; this.z=z; } } // 幾種調用方式 const p1=new Point('1','2','3'); const p2=new Point<string>('1','2','3'); const p3:Point<string>=new Point('1','2','3');
4. 泛型約束
interface ILength { length: number } function getLength<T extends ILength>(arg: T) { console.log(arg.length); } getLength("abc"); getLength(['abc','def']); getLength({length:100});
二. ts綜合補充
1. 模塊化開發
TypeScript支持兩種方式來控制我們的作用域：
(1). 模塊化：每個文件可以是一個獨立的模塊，支持ES Module，也支持CommonJS；
(2). 命名空間：通過namespace來聲明一個命名空間
模塊化代碼
// 1. 通過ESModule的模式導出函數 （按需導出） export function add(m1: number, m2: number) { return m1 + m2; } export function sub(m1: number, m2: number) { return m1 - m2; }
調用：
// ESModule的調用 import { add, sub } from './utils/test1' console.log(add(10, 5)); console.log(sub(10, 5));
命名空間代碼
// 命名空間在TypeScript早期時，稱之為內部模塊，主要目的是將一個模塊內部再進行作用域的划分，防止一些命名沖突的問題。 export namespace timeUitls{ export function format(time:string){ return '2021-11-11'; } export let msg:string='ypf'; } export namespace priceUtils{ export function format(price:number){ return '99.99' } }
調用：
// namespace的調用 import { timeUitls, priceUtils } from './utils/test2'; console.log(timeUitls.format('2021-11-11')); console.log(timeUitls.msg); console.log(priceUtils.format(99.99))
2. 類型查找(.d.ts)
xx.d.ts文件：用來做類型的聲明(declare)。 它僅僅用來做類型檢測，告知typescript我們有哪些類型。(重點！)
typescript會在哪里查找我們的類型聲明呢？ 內置類型聲明； 外部定義類型聲明； 自己定義類型聲明；
特別注意：該文件的名稱可以自定義，比如ypf1.d.ts，另外可以同時定義多個.d.ts文件，存放的位置沒有特別要求，一般放在根目錄下。
(1). 內置類型聲明
內置類型聲明是typescript自帶的、幫助我們內置了JavaScript運行時的一些標准化API的聲明文件；
包括比如Math、Date等內置類型，也包括DOM API，比如Window、Document等；
內置類型聲明通常在我們安裝typescript的環境中會帶有的；詳見：https://github.com/microsoft/TypeScript/tree/main/lib
(2). 外部定義類型聲明
外部類型聲明通常是我們使用一些庫（比如第三方庫）時，需要的一些類型聲明。
這些庫通常有兩種類型聲明方式：
方式一：在自己庫中進行類型聲明（編寫.d.ts文件），比如axios
方式二：通過社區的一個公有庫DefinitelyTyped存放類型聲明文件
該庫的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/
該庫查找聲明安裝方式的地址：https://www.typescriptlang.org/dt/search?search= （比如我們安裝react的類型聲明：npm i @types/lodash --save-dev）
(3). 自己定義類型聲明
情況一：我們使用的第三方庫是一個純的JavaScript庫，沒有對應的聲明文件；比如lodash
情況二：我們給自己的代碼中聲明一些類型，方便在其他地方直接進行使用；
3. declare聲明其它
(1). 聲明變量、函數、類
// 聲明變量/函數/類 declare let whyName: string declare let whyAge: number declare let whyHeight: number declare function whyFoo(): void declare class Person { name: string age: number constructor(name: string, age: number) }
(2). 聲明模塊
我們也可以聲明模塊，比如lodash模塊默認不能使用的情況，可以自己來聲明這個模塊：
聲明：
// 先 【npm install lodash -D】 // 還需要【npm install @types/lodash -D】 declare module 'lodash' { export function join(arr: any[]): string }
調用：
// 模塊 import lodash from 'lodash' console.log(lodash.join(['msg1','msg2']));
(3). 聲明文件
在某些情況下，我們也可以聲明文件：
比如在開發vue的過程中，默認是不識別我們的.vue文件的，那么我們就需要對其進行文件的聲明；
比如在開發中我們使用了 jpg 這類圖片文件，默認typescript也是不支持的，也需要對其進行聲明；
// 聲明文件 declare module '*.jpg' declare module '*.jpeg' declare module '*.png' declare module '*.svg' declare module '*.gif'
(4). 聲明命名空間
// 聲明命名空間 declare namespace $ { export function ajax(settings: any): any }
!
- 作 者 : Yaopengfei(姚鵬飛)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
- 聲 明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。