內聯模板 點擊打開視頻講解更加詳細 當 inline-template 這個特殊的 attribute 出現在一個子組件上時，這個組件將會使用其裡面的內容作為模板，而不是將其作為被分發的內容。這使得模板的撰寫工作更加靈活。 <my-component inline-template> <div> < ...
一、介面
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 = 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';
