一、介面
1.介面定義
介面是一種規范的定義，它定義行為和規范，在程式設計中介面起到限制和規范的作用，
2.介面的宣告與使用
//宣告物件型別介面 interface Person { name: string, age: number, say(): void } // 使用介面 let person: Person = { name: 'jack', age: 18, say() { } }// 示例：用物件型介面封裝原生ajax請求 interface Config{ type:string; //get post url:string; data?:string;//可選傳入 dataType:string;//json xml等 }
//原生js封裝的ajax function ajax(config:Config){
var xhr=new XMLHttpRequest(); xhr.open(config.type,config.url,true);
if(config.data){ xhr.send(config.data); }else{ xhr.send(); }
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){ console.log('請求成功'); if(config.dataType=='json'){ console.log(JSON.parse(xhr.responseText)); }else{ console.log(xhr.responseText) } } } } ajax({ type:'get', data:'name=zhangsan', url:'http://www.example.com/api', // api介面url dataType:'json' })
3.函式型別介面
// 對方法傳入的引數以及回傳值進行約束 批量約束 interface encypt{ (key:string, value:string):string; } var md5:encypt = function (key, value):string{ return key + ' ' + value } console.log(md5('李', '二狗')) var sha1:encypt = function(key, value):string{ return key + '--' + value } console.log(sha1('dog', 'zi'))
4.介面（interface）和型別別名（type）的對比
// 相同點：都可以給物件指定型別 //定義介面 interface Person { name: string, age: number, say(): void } //型別別名 type Person= { name: string, age: number, say(): void } // 使用介面 let person: Person = { name: 'jack', age: 18, say() { } } // 不同點：1.介面只能為物件指定型別，介面可以通過同名來添加屬性 // 2.型別別名不僅可以指定型別，還可以為任意型別指定別名 interface Bat { name: string } interface Bat { age: number } function fgh(id: Bat) { } fgh({ name: "dfsd", age: 12 })
// 宣告已有型別（即取別名）
type A = number;
// 字面量型別
type B = 'foo';
// 元組型別
type C = [number, string];
// 聯合型別
type D = number | boolean|string;
5.介面可選屬性和只讀性
interface FullName{ readonly id：string firstName:string; lastName?:string; } function getName(name:FullName){ console.log(name) } getName({ firstName:'zhang'， })
6.任意型別
interface UserInfo { name: string, age: number, sex?: string [propName: string]: any //一旦定義了任意屬性,那么確定屬性和可選屬性型別都必須是任意屬性型別的子類 } const myInfo: UserInfo = { name: "jack", age: 18, test: "123123", test1: 23 }
7.介面的繼承
// 使用extends關鍵字繼承，實作介面的復用 interface Point2D { x: number; y: number } interface Point3D extends Point2D { z: number } let P: Point3D = { x: 1, y: 2, z: 3 }
8.通過implements來讓類實作介面
interface Single { name: string, sing(): void } class Person implements Single { name = "tom" sing(): void { console.log("qwe"); } } //Person 類實作介面Single，意味著Person類中必須提供Single介面中所用的方法和屬性
二、泛型
1.泛型的理解
泛型是指在預先定義函式、介面或者類的時候，不預先指定資料的型別，而是在使用的時候指定，從而實作復用，
2.使用泛型變數來創建函式
// 使用泛型來創建一個函式
//格式： 函式名<泛型1,泛型2> (引數中可以使用泛型型別)：回傳值也可以是泛型型別
function id<T>(value: T): T { return value }// 其中 T 代表 Type，在定義泛型時通常用作第一個型別變數名稱， // 但實際上 T 可以用任何有效名稱代替，除了 T 之外，以下是常見泛型變數代表的意思：
// K（Key）：表示物件中的鍵型別； // V（Value）：表示物件中的值型別； // E（Element）：表示元素型別，
//呼叫泛型函式 const num = id(10) const str = id("as") const ret = id(true) //多個泛型變數 function identity <T, U>(value: T, message: U) : T { console.log(message); return value; } console.log(identity(68, "Semlinker"));
3.泛型約束
// 如果我們直接對一個泛型引數取 length 屬性, 會報錯, 因為這個泛型根本就不知道它有這個屬性 // 沒有泛型約束 function fn<T>(value: T): T { console.log(value.length);//error return value } //通過extends關鍵字添加泛型約束，傳入的引數必須有length屬性 interface Ilength { length: number } function fn1<T extends Ilength>(value: T): T { console.log(value.length); return value } fn1("asdad") fn1([1,4,5]) fn1(12323) //報錯
4.泛型介面
// 介面可以配合泛型來使用，以增加其靈活性，增強復用性 // 定義 interface IdFunc<T> { id: (value: T) => T ids: () => T[] } // 使用 let obj: IdFunc<number> = { //使用時必須要加上具體的型別 id(value) { return value }, ids() { return [1, 4, 6] } } //函式中的使用interface ConfigFn<T>{ (value:T):T } function getData<T>(value:T):T{ return value } var myGetData:ConfigFn<string>=getData myGetData('abc')
5.泛型類
//創建泛型類 class GenericNumber<Numtype>{ defaultValue: Numtype constructor(value: Numtype) { this.defaultValue =https://www.cnblogs.com/chenxian123m/p/ value } } // 使用泛型類 const myNum = new GenericNumber<number>(100)
6.泛型工具型別
作用:TS內置了一些常用的工具型別，用來簡化TS中的一些常見操作
6.1 partail
// partial<T>的作用就是將某個型別中的屬性全部變為可選項? interface Props { id: string, children: number[] } type PartailProp = Partial<Props> let obj1: PartailProp = { }
6.2 Readonly
// Readonly<T>的作用將某個型別中的屬性全部變為只讀 interface Props { id: string, children: number[] } type PartailProp = Readonly<Props> let obj1: PartailProp = { id: "213123", children: [] } obj1.id="122" //報錯
6.3 pick
// Pick<T, K>的作用是將某個型別中的子屬性挑出來，變成包含這個型別部分屬性的子型別 interface Todo { title: string, desc: string, time: string } type TodoPreview = Pick<Todo, 'title' | 'time'>; const todo: TodoPreview = { title: '吃飯', time: '明天' }
6.4 Record
// Record<K , T>的作用是將K中所有的屬性轉換為T型別 interface PageInfo { title: string } type Page = 'home'|'about'|'other'; const x: Record<Page, PageInfo> = { home: { title: "xxx" }, about: { title: "aaa" }, other: { title: "ccc" }, };
6.5. Exclude
// Exclude<T,U>的作用是將某個型別中屬于另一個型別的屬性移除掉 type Prop = "a" | "b" | "c" type T0 = Exclude<Prop, "a">; // "b" | "c" const t: T0 = 'b';
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502588.html
標籤：JavaScript
上一篇：妙啊！純 CSS 實作拼圖游戲
下一篇：【Telerik和Kendo UI組件】上海道寧與progress為您提供Web、移動和桌面構建功能更豐富的現代體驗