摘要:是的超級,遵循最新的規(guī)范相當(dāng)于包含了的語法。表示方法沒有返回任何類型類型表示的是那些永不存在的值的類型,例如異常錯誤寫法錯誤三函數(shù)內(nèi)容概述函數(shù)的定義可選參數(shù)默認(rèn)參數(shù)剩余參數(shù)函數(shù)重載箭頭函數(shù)。
一、Typescript 介紹、環(huán)境搭建 1.1 Typescript 介紹
1.TypeScript 是由微軟開發(fā)的一款開源的編程語言,像后端 java、C#這樣的面向?qū)ο笳Z言可以讓 js 開發(fā)大型企業(yè)項(xiàng)目。
2.TypeScript 是 Javascript的超級,遵循最新的 ES6、Es5 規(guī)范(相當(dāng)于包含了es6、es5的語法)。TypeScript擴(kuò)展了JavaScript的語法。
3.最新的 Vue 、React 也可以集成 TypeScript。
1.2 Typescript 安裝 編譯安裝nodejs環(huán)境,用npm全局安裝typescript
npm install -g typescript
Typescript文件后綴名為.ts,最后將編譯成js文件Typescript手動編譯 => tsc + 文件名
// 將index.ts編譯成index.js tsc index.ts1.3 Typescript開發(fā)工具Vscode自動編譯.ts 文件
1.3.1 tsc --init 生成配置文件tsconfig.json
1.3.2 點(diǎn)擊菜單欄任務(wù)-運(yùn)行任務(wù)(遇到錯誤使用快捷鍵ctrl + shift + b),點(diǎn)擊 tsc:監(jiān)視-tsconfig.json 然后就可以自動生成代碼
了
typescript中為了使編寫的代碼更規(guī)范,更有利于維護(hù),增加了類型校驗(yàn)
2.1 基礎(chǔ)類型在typescript中主要給我們提供了以下數(shù)據(jù)類型:
布爾類型(boolean)
數(shù)字類型(number)
字符串類型(string)
數(shù)組類型(array)
元組類型(tuple)
枚舉類型(enum)
任意類型(any)
null和undefined
void類型
never類型
相比于js,typescript中多了枚舉類型、任意類型、void類型和never類型
2.2 變量定義寫ts代碼變量必須指定類型,指定類型后賦值必須為指定的類型,否則報錯
var flag:boolean = true flag = 123 // 錯誤,類型不一致2.3 數(shù)據(jù)類型 布爾類型(boolean)
var flag:boolean = true flag = false // 正確 // flag=123; // 錯誤數(shù)字類型(number)
var num:number = 123; num = 456; // 正確 // num="str"; //錯誤字符串類型(string)
var str:string = "this is ts"; str="haha"; //正確 // str=true; //錯誤數(shù)組類型(array) ts中定義數(shù)組有兩種方式
// 第一種 var arr:number[] = [1, 2, 3] // 第二種 var arr2:Array元組類型(tuple)元素的類型不必相同,寫法和數(shù)組一樣= [1, 2, 3]
let arr:[number,string] = [123,"this is ts"]枚舉類型(enum)
用法:
enum 枚舉名{ 標(biāo)識符[=整型常數(shù)], 標(biāo)識符[=整型常數(shù)], ... 標(biāo)識符[=整型常數(shù)], }
enum Flag {success = 1,error = 2}; let s:Flag = Flag.success // 使用枚舉類型中的值 console.log("正確狀態(tài)",s) let f:Flag = Flag.error console.log("錯誤狀態(tài)",f)任意類型(any)
為那些在編程階段還不清楚類型的變量指定一個類型
var number:any = 123 number = "str" number = true2.9 null 和 undefined
undefined:
{ // 在js中,變量已聲明但未初始化為undefined var undefinedTest:number // console.log(undefinedTest) // 錯誤寫法,typescript報錯,賦值了才正確 // 在typescript中,已聲明未初始化的值要直接訪問的話類型需要定義為undefined var undefinedTest2:undefined console.log(undefinedTest2) // 正確寫法,輸出undefined } { // 可能是number類型 可能是undefined var undefinedTest3:number | undefined; console.log(num); }
null:
// null是一個空指針對象,undefined是未初始化的變量。因此,可以把undefined看作是空的變量,而null看作是空的對象 var nullTest:null nullTest = null // nullTest = {} // 錯誤,定義了類型是null,值必須為nullvoid類型
typescript中的void表示沒有任何類型,一般用于定義方法的時候方法沒有返回值。
// 表示方法沒有返回任何類型 function run(): void { console.log("run") } run()never類型
表示的是那些永不存在的值的類型,例如異常
var a:never // a = 123 //錯誤寫法 a = (() => { throw new Error("錯誤"); })()三、Typescript函數(shù)
內(nèi)容概述: 函數(shù)的定義、可選參數(shù)、默認(rèn)參數(shù)、剩余參數(shù)、函數(shù)重載、箭頭函數(shù)。
3.1.1 函數(shù)的定義es5定義函數(shù)有函數(shù)聲明法和匿名函數(shù)法
// 法一:函數(shù)聲明法 function run():string { return "run" } /** // 錯誤寫法 function run():string { return 123 } */ // 法二:匿名函數(shù) var run2 = function ():string { return "run2" } console.log("函數(shù)定義一", run()) console.log("函數(shù)定義二", run2())3.1.2 ts中定義方法傳參
函數(shù)傳參要指定數(shù)據(jù)類型
function paramFuc(name:string, age:number):string{ return `${name} --- ${age}` } console.log("函數(shù)傳參", paramFuc("dz", 20))3.1.3 函數(shù)沒有返回值的方法用void
function voidFnc():void{ console.log("沒有返回值的方法用void") } voidFnc();3.2 可選參數(shù)
es5里面方法的實(shí)參和行參可以不一樣,但是ts中必須一樣,如果不一樣就需要在可選參數(shù)后加?,這就是可選參數(shù)。
function electParam(name:string, age?:number):string { // 這里的age可傳可不傳,age就是可選參數(shù) if(age){ return `${name} --- ${age}` }else{ return `${name} --- 年齡保密` } } console.log("可選參數(shù)", electParam("dz")) // 注意: 可選參數(shù)必須配置到參數(shù)的最后面 // 錯誤寫法:可選參數(shù)不在最后面 // function electParam2(name?: string, age: number): string { // ... // }3.3 默認(rèn)參數(shù)
es5里面沒法設(shè)置默認(rèn)參數(shù),es6和ts中都可以設(shè)置默認(rèn)參數(shù)
// age為默認(rèn)參數(shù) function defaultParam(name:string, age:number = 20):String { return `${name} --- ${age}` } console.log("默認(rèn)參數(shù)", defaultParam("dz"))3.4 剩余參數(shù)
當(dāng)有很多參數(shù)時候或參數(shù)個數(shù)不確定,可以用三點(diǎn)運(yùn)算符
// sum參數(shù)傳過來的是一個數(shù)組 function sum(...result: number[]): number { var sum = 0; for (var i = 0; i < result.length; i++) { sum += result[i]; } return sum; } console.log("剩余參數(shù)", sum(1, 2, 3, 4, 5, 6)); // a=1 b=2 其他參數(shù)為剩余參數(shù) function sum2(a: number, b: number, ...result: number[]): number { var sum = a * b; for (var i = 0; i < result.length; i++) { sum += result[i]; } return sum; } console.log("剩余參數(shù)2", sum2(1, 2, 3, 4, 5, 6));3.5 ts函數(shù)重載
同樣的函數(shù),傳入不同的參數(shù),實(shí)現(xiàn)不同的功能
java中方法的重載:重載指的是兩個或者兩個以上同名函數(shù),但它們的參數(shù)不一樣,這時會出現(xiàn)函數(shù)重載的情況。
typescript中的重載:通過為同一個函數(shù)提供多個函數(shù)類型定義來實(shí)現(xiàn)多種功能的目的。
ts為了兼容es5 以及 es6 重載的寫法和java中有區(qū)別。
// es5中同名函數(shù),后面會覆蓋前面的函數(shù),ts中則不會 => 函數(shù)重載 function getInfo(name:string):string function getInfo(name:string, age:number):string function getInfo(name:any, age?:any):any { if(age) { return "姓名:" + name + "年齡:" + age }else{ return "姓名:" + name } } console.log(getInfo("dz")) console.log(getInfo("dz", 20)) // console.log(getInfo(20)) // 錯誤3.6 箭頭函數(shù)
箭頭函數(shù)和es6中一樣
setTimeout(() => { console.log("箭頭函數(shù)") }, 1000);四、Typescript中的類 4.1 es5中的類
內(nèi)容概述:類的創(chuàng)建、靜態(tài)方法、繼承(對象冒充繼承,原型鏈繼承,對象冒充 + 原型鏈組合繼承)
es5中的面向?qū)ο蟆?gòu)造函數(shù)、原型與原型鏈本質(zhì)可以看這個文檔http://caibaojian.com/javascr... , 個人覺得寫得很清晰。
4.1.1 類的創(chuàng)建es5類在構(gòu)造函數(shù)和原型鏈里都可以添加屬性和方法,原型鏈上的屬性會被多個實(shí)例所共享,而構(gòu)造函數(shù)則不會。
function Person() { this.name = "Ming" this.run = function() { console.log(this.name + "在運(yùn)動") } } Person.prototype.sex = "男" // 原型鏈上的屬性會被多個實(shí)例所共享 Person.prototype.work = function() { console.log(this.name + "在工作") } var p = new Person() p.run() p.work() console.log(p.name)4.1.2 靜態(tài)方法
調(diào)用靜態(tài)方法不需要實(shí)例化
Person.getInfo=function(){ console.log("我是靜態(tài)方法"); } Person.getInfo();4.1.3 實(shí)現(xiàn)繼承
對象冒充(或者叫構(gòu)造函數(shù)繼承)繼承:可以繼承構(gòu)造函數(shù)里面的屬性和方法,但是沒法繼承原型鏈上面的屬性和方法原型繼承:可以繼承構(gòu)造函數(shù)里面的屬性和方法,也可以繼承原型鏈上面的屬性和方法,但是實(shí)例化子類的時候沒法給父類傳參
下面是通過對象冒充 + 原型鏈組合繼承,解決了上面兩種繼承方式存在的問題
function Worker(name,age){ this.name=name; /*屬性*/ this.age=age; this.run=function(){ /*實(shí)例方法*/ alert(this.name+"在運(yùn)動"); } } Worker.prototype.sex="男"; Worker.prototype.work=function(){ alert(this.name+"在工作"); } function Web(name,age){ Worker.call(this,name,age); // 對象冒充繼承,可以繼承構(gòu)造函數(shù)里面的屬性和方法,實(shí)例化子類可以給父類傳參 } // Web.prototype = new Worker(); // 原型鏈繼承方法一:繼承Worker構(gòu)造函數(shù)和原型上所有的方法和屬性 Web.prototype = Worker.prototype; //原型鏈繼承方法二:優(yōu)化了方法一重復(fù)繼承構(gòu)造函數(shù)屬性和方法的問題(本質(zhì)可以看看http://caibaojian.com/javascript-object-5.html) var w = new Web("趙四",20); w.run(); w.work();
從上面可以看出,對象冒充繼承是在子類Web構(gòu)造函數(shù)里面通過call方法繼承父類Worker的構(gòu)造函數(shù)的屬性和方法;原型鏈繼承通過子類Web的原型對象等于父類Worker的原型對象來實(shí)現(xiàn)繼承;最后這兩種繼承的組合方式實(shí)現(xiàn)了完美繼承。
4.2 typescript中的類內(nèi)容概述: ts中類的定義、繼承、類修飾符、靜態(tài)屬性和靜態(tài)方法、多態(tài)、抽象類和抽象方法
4.2.1 ts中類的定義ts中類的定義和es6類的定義一樣
class PersonDefine { name: string // 屬性,前面省略了public關(guān)鍵詞 constructor(name:string) { //構(gòu)造函數(shù) this.name = name } run():string { // 原型 return `${this.name}在運(yùn)動` } } var define = new PersonDefine("類的定義") alert(define.run())4.2.2 繼承
ts中繼承比es5簡單很多,用extends super實(shí)現(xiàn)繼承
class WebExtend extends PersonDefine { constructor(name:string) { super(name) // super繼承父類的構(gòu)造函數(shù),并向父類構(gòu)造函數(shù)傳參 } work():string { return `${this.name}在工作` } } var extend = new WebExtend("繼承") alert(extend.run()) alert(extend.work())4.2.3 ts類里面的修飾符
修飾符:typescript里面定義屬性的時候給我們提供了三種修飾符
public: 公有修飾符,在當(dāng)前類里面、子類、類外面都可以訪問
protected:保護(hù)類型,在當(dāng)前類里面、子類里面可以訪問,在類外部沒法訪問
private :私有修飾符,在當(dāng)前類里面可以訪問,子類、類外部都沒法訪問
注意:屬性如果不加修飾符,默認(rèn)就是公有修飾符
// 以private為例 class PersonPrivate{ private name:string; /*被private修飾的屬性 => 私有屬性*/ constructor(name:string){ this.name=name; } run():string{ return `${this.name}在運(yùn)動` // 私有屬性只能在當(dāng)前類里面可以訪問 } } class Web extends PersonPrivate{ constructor(name:string){ super(name) } work(){ // return `${this.name}在工作` // 報錯,子類不能訪問父類的私有屬性 } } var privateName = new PersonPrivate("private") alert(privateName.run()) // console.log(privateName.name) // 報錯,外部不能訪問類的私有屬性4.2.4 靜態(tài)屬性和靜態(tài)方法
為什么要用靜態(tài)屬性和靜態(tài)方法?jq里面的$.ajax就是用的靜態(tài)方法
function $(element) { return new Base(element) } function Base(element) { this.element = document.getElementById(element) this.css = function(arr, value) { this.element.style[arr] = value } } $("box").css("color","red") $.ajax = function() {} // 想要在$上使用方法怎么辦,用靜態(tài)方法
ts中實(shí)現(xiàn)靜態(tài)屬性和靜態(tài)方法用static
class PersonStatic{ /*公有屬性*/ public name:string; constructor(name:string) { this.name=name; } /*實(shí)例方法(需要被實(shí)例化,所以為實(shí)例方法)*/ run(){ return `${this.name}在運(yùn)動` } /*靜態(tài)屬性*/ static sex = "男" /*靜態(tài)方法,里面沒法直接調(diào)用類里面的屬性*/ static info(){ // return "info方法" + this.name // 靜態(tài)方法不能調(diào)用本類的方法和屬性,可以調(diào)用靜態(tài)屬性 return "info方法" + PersonStatic.sex } } console.log("靜態(tài)方法" + PersonStatic.info()) console.log("靜態(tài)屬性" + PersonStatic.sex)4.2.5 多態(tài)
父類定義一個方法不去實(shí)現(xiàn),讓繼承它的子類去實(shí)現(xiàn),每一個子類的該方法有不同的表現(xiàn)
多態(tài)屬于繼承
比如定義一個父類Animal,里面的eat方法不去實(shí)現(xiàn),讓子類Dog和Cat分別實(shí)現(xiàn)自己的eat方法
class Animal { name:string; constructor(name:string) { this.name=name; } eat(){ // eat方法繼承它的子類去實(shí)現(xiàn) } } class Dog extends Animal{ constructor(name:string){ super(name) } eat(){ return this.name+"吃糧食" } } class Cat extends Animal{ constructor(name:string){ super(name) } eat(){ return this.name+"吃老鼠" } }4.2.6 抽象類和抽象方法
定義:用abstract關(guān)鍵字定義抽象類和抽象方法,抽象類中的抽象方法不包含具體實(shí)現(xiàn)并且必須在派生類(抽象類的子類)中實(shí)現(xiàn)
抽象類:它是提供其他類繼承的基類,不能直接被實(shí)例化,子類繼承可以被實(shí)例化
abstract修飾的方法(抽象方法)只能放在抽象類里面
抽象類和抽象方法用來定義標(biāo)準(zhǔn)(比如定義標(biāo)準(zhǔn)為:抽象類Animal有抽象方法eat,要求它的子類必須包含eat方法)
abstract class AnimalAbst{ public name:string; constructor(name:string){ this.name=name; } abstract eat():any; //抽象方法不包含具體實(shí)現(xiàn)并且必須在派生類中實(shí)現(xiàn) run(){ console.log("其他方法可以不實(shí)現(xiàn)") } } // var a = new Animal() /*錯誤的寫法,抽象類不能被實(shí)例化*/ class DogAbst extends Animal{ //抽象類的子類必須實(shí)現(xiàn)抽象類里面的抽象方法 constructor(name:any){ super(name) } eat(){ return this.name + "吃糧食" } } var d = new DogAbst("小花花"); console.log("抽象類和抽象方法",d.eat());五、TypesSript接口
接口定義:接口是對傳入?yún)?shù)進(jìn)行約束;或者對類里面的屬性和方法進(jìn)行聲明和約束,實(shí)現(xiàn)這個接口的類必須實(shí)現(xiàn)該接口里面屬性和方法;typescript中的接口用interface關(guān)鍵字定義。
接口作用:接口定義了某一批類所需要遵守的規(guī)范,接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù),也不關(guān)心這些類里方法的實(shí)現(xiàn)細(xì)節(jié),它只規(guī)定這批類里必須提供某些方法,提供這些方法的類就可以滿足實(shí)際需要。typescrip中的接口類似于java,同時還增加了更靈活的接口類型,包括屬性、函數(shù)、可索引和類等。
內(nèi)容概述:接口分類:(屬性接口、函數(shù)類型接口、可索引接口、類類型接口),接口的繼承
5.1 接口分類 5.1.1 屬性接口對傳入對象的約束(也就是對json的約束)
在了解接口之前,我們來看看函數(shù)傳入obj參數(shù)
function printLabel(labelInfo: {label:string}){ return labelInfo } // printLabel({name:"obj"}); //錯誤的寫法 console.log(printLabel({label: "obj"}))
和上面類似,由此引入屬性接口 => 對方法傳入?yún)?shù)進(jìn)行約束
下面為屬性接口的例子,方法printFullName對傳入?yún)?shù)FullName(為對象)進(jìn)行約束
interface FullName{ firstName: string; // 注意;結(jié)束 secondName: string; age?: number // 接口的可選屬性用? } function printFullName(name:FullName) { // 傳入對象必須包含firstName和secondName,可傳可不傳age return name } var obj = { firstName:"小", secondName:"明", age: 20 } console.log(printFullName(obj))
屬性接口應(yīng)用:原生js封裝ajax
interface Config{ type: string; url: string; data?: string; dataType: string; } function ajax(config: Config) { var xhr = new XMLHttpRequest xhr.open(config.type, config.url, true) xhr.send(config.data) xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { if(config.dataType == "json"){ console.log(JSON.parse(xhr.responseText)) }else{ console.log(xhr.responseText) } } } } ajax({ type: "get", data: "name=xiaoming", url: "http://a.itying.com/api/productlist", dataType: "json" })5.1.2 函數(shù)類型接口
對方法傳入的參數(shù)以及返回值進(jìn)行約束
interface encrypt{ (key: string, value: string): string; // 傳入的參數(shù)和返回值的類型 } var md5:encrypt = function(key:string, value:string):string{ // encrypt對加密方法md5進(jìn)行約束,同時md5方法的參數(shù)和返回值類型和encrypt要保持一致 return key + value } console.log(md5("name", "小明"))5.1.3 可索引接口
對索引和傳入?yún)?shù)的約束(一般用于對數(shù)組、對象的約束)
ts中定義數(shù)組:
var arr1:number[] = [1,2] var arr2:Array= ["1", "2"]
現(xiàn)在用接口來實(shí)現(xiàn):
// 對數(shù)組的的約束 interface UserArr{ // 索引為number,參數(shù)為string [index:number]: string } var userarr:UserArr = ["a", "b"] console.log(userarr)
// 對象的約束 interface UserObj{ // 索引為string,參數(shù)為string [index:string]: string } var userobj:UserObj = { name: "小明", sex: "男" } console.log(userobj)5.1.4 類類型接口
對類的約束,和抽象類抽象有點(diǎn)相似
interface Animal{ // 對類里面的屬性和方法進(jìn)行約束 name:string; eat(str:string):void; } // 類實(shí)現(xiàn)接口要用implements關(guān)鍵字,必須實(shí)現(xiàn)接口里面聲明的方法和屬性 class Cat implements Animal{ name:string; constructor(name:string){ this.name = name } eat(food:string){ console.log(this.name + "吃" + food) } } var cat = new Cat("小花") cat.eat("老鼠")5.2 接口的繼承
和類的繼承一樣,用extends實(shí)現(xiàn)接口繼承
下面同時實(shí)現(xiàn)類的繼承和接口的繼承
interface Animal { eat(): void; } // 繼承Animal接口,則實(shí)現(xiàn)Person接口的類必須也實(shí)現(xiàn)Animal接口里面的方法 interface Person extends Animal { work(): void; } class Programmer { public name: string; constructor(name: string) { this.name = name; } coding(code: string) { console.log(this.name + code) } } // 繼承類并且實(shí)現(xiàn)接口 class Web extends Programmer implements Person { constructor(name: string) { super(name) } eat() { console.log(this.name + "吃") } work() { console.log(this.name + "工作"); } } var w = new Web("小李"); w.eat(); w.coding("寫ts代碼");六、TypesSript泛型
泛型定義:泛型定義:泛型就是解決類、接口、方法的復(fù)用性,以及對不特定數(shù)據(jù)類型的支持(類型校驗(yàn))。ts中用T表示泛型。
泛型公式:表示泛型,調(diào)用的時候指定T的數(shù)據(jù)類型
軟件工程中,我們不僅要創(chuàng)建一致的定義良好的API,同時也要考慮可重用性。 組件不僅能夠支持當(dāng)前的數(shù)據(jù)類型,同時也能支持未來的數(shù)據(jù)類型,這在創(chuàng)建大型系統(tǒng)時為你提供了十分靈活的功能。
在像C#和Java這樣的語言中,可以使用泛型來創(chuàng)建可重用的組件,一個組件可以支持多種類型的數(shù)據(jù)。 這樣用戶就可以以自己的數(shù)據(jù)類型來使用組件。
內(nèi)容概述:內(nèi)容概述:函數(shù)的泛型、類的泛型、泛型接口
6.1 函數(shù)的泛型傳入的參數(shù)類型和返回的參數(shù)類型可以指定
我們來看看函數(shù)用ts數(shù)據(jù)類型,想要同時返回string類型和number類型
function getData1(value:string):string{ return value; } function getData2(value:number):number{ return value; }
這樣要寫不同的函數(shù),不能按照需求返回不同類型數(shù)據(jù),造成代碼冗余 => 由此引入泛型
表示泛型,調(diào)用的時候指定T的數(shù)據(jù)類型
function dataT6.2 類的泛型(value:T):T{ // 傳入?yún)?shù)為T 返回值為T return value } dataT (1) // 調(diào)用指定泛型為number類型,則傳入?yún)?shù)也必須為number類型 dataT ("string") function dataAny (value:T):any{ return "傳入?yún)?shù)為T,任意類型返回值"; } dataAny (123); // 參數(shù)必須是number dataAny ("這是一個泛型");
也是用來實(shí)現(xiàn)類的泛型,new的時候指定T的數(shù)據(jù)類型
有個最小堆算法,需要同時支持返回?cái)?shù)字和字符串兩種類型
使用泛型之前:只能在類的類部指定數(shù)據(jù)類型,實(shí)現(xiàn)需求還要寫一套string類型的類
class MinClass{ public list:number[]=[]; add(num:number){ this.list.push(num) } min():number{ var minNum=this.list[0]; for(var i=0;ithis.list[i]){ minNum=this.list[i]; } } return minNum; } } var m=new MinClass(); m.add(1); m.add(2); alert(m.min());
使用泛型之后:只用一套類來實(shí)現(xiàn)
class MinClassT6.3 泛型接口{ public list:T[]=[]; add(value:T):void{ this.list.push(value); } min():T{ var minNum=this.list[0]; for(var i=0;i this.list[i]){ minNum=this.list[i]; } } return minNum; } } var m1=new MinClassT (); /*實(shí)例化類 并且指定了類的T代表的類型是number*/ m.add(1); m.add(2); alert(m1.min()) var m2=new MinClassT (); /*實(shí)例化類 并且指定了類的T代表的類型是string*/ m2.add("c"); m2.add("a"); alert(m2.min())
有一個函數(shù)類型接口
interface ConfigFn{ (value:string):string; } var setData:ConfigFn = function(value:string):string{ return value } setData("name"); // setData(20); // 錯誤
setData(20);寫法錯誤,想要傳入number類型的參數(shù)又要寫一個函數(shù)類型接口 => 用泛型接口
泛型接口有兩種寫法:
// 泛型接口定義方式一 interface ConfigFnOne{(value:T):T; } var setDataOne:ConfigFnOne = function (value:T):T{ return value } // 既可以傳入string也可以傳入number類型參數(shù) setDataOne ("name"); setDataOne (20);
// 泛型接口定義方式二 interface ConfigFnTwo{ (value:T):T; } function setDataTwo (value:T):T{ return value } var setDataTwoFn:ConfigFnTwo = setDataTwo setDataTwoFn("name");
示例代碼請查看github,歡迎start https://github.com/dzfrontend...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97281.html
摘要:此外,在不違背原作者本意前提下,為了更直觀的表達(dá),部分內(nèi)容將采用意譯,而非直譯。開始閱讀深入理解 此書是 TypeScript Deep Dive 的中文翻譯版,感謝作者 Basarat 的付出。 Why showImg(https://segmentfault.com/img/remote/1460000016154927?w=2050&h=810); 數(shù)據(jù)來源:npm 包下載量 ...
摘要:別急還沒說完我們使用操作符構(gòu)造了類的一個實(shí)例,這會調(diào)用類的構(gòu)造函數(shù),按照定義對實(shí)例進(jìn)行初始化注意為了兼容和,中的類會被編譯為中的函數(shù)。 前言: 我們?yōu)樾枰獦?gòu)建和維護(hù)大型JavaScript程序的團(tuán)隊(duì)設(shè)計(jì)了TypeScript,以滿足他們的需求。TypeScript可幫助他們在軟件組件之間定義接口,并且?guī)椭斫猬F(xiàn)存JavaScript庫的行為。同時,使用TypeScript的團(tuán)隊(duì)可以將代...
摘要:別急還沒說完我們使用操作符構(gòu)造了類的一個實(shí)例,這會調(diào)用類的構(gòu)造函數(shù),按照定義對實(shí)例進(jìn)行初始化注意為了兼容和,中的類會被編譯為中的函數(shù)。 前言: 我們?yōu)樾枰獦?gòu)建和維護(hù)大型JavaScript程序的團(tuán)隊(duì)設(shè)計(jì)了TypeScript,以滿足他們的需求。TypeScript可幫助他們在軟件組件之間定義接口,并且?guī)椭斫猬F(xiàn)存JavaScript庫的行為。同時,使用TypeScript的團(tuán)隊(duì)可以將代...
摘要:前端進(jìn)階進(jìn)階構(gòu)建項(xiàng)目一配置最佳實(shí)踐狀態(tài)管理之痛點(diǎn)分析與改良開發(fā)中所謂狀態(tài)淺析從時間旅行的烏托邦,看狀態(tài)管理的設(shè)計(jì)誤區(qū)使用更好地處理數(shù)據(jù)愛彼迎房源詳情頁中的性能優(yōu)化從零開始,在中構(gòu)建時間旅行式調(diào)試用輕松管理復(fù)雜狀態(tài)如何把業(yè)務(wù)邏輯這個故事講好和 前端進(jìn)階 webpack webpack進(jìn)階構(gòu)建項(xiàng)目(一) Webpack 4 配置最佳實(shí)踐 react Redux狀態(tài)管理之痛點(diǎn)、分析與...
摘要:下面是用實(shí)現(xiàn)轉(zhuǎn)成抽象語法樹如下還支持繼承以下是轉(zhuǎn)換結(jié)果最終的結(jié)果還是代碼,其中包含庫中的一些函數(shù)。可以使用新的易于使用的類定義,但是它仍然會創(chuàng)建構(gòu)造函數(shù)和分配原型。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 15 篇。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 如果你錯過了前面的章節(jié),可以在這里找到它們: JavaScript 是...
閱讀 1368·2021-09-13 10:25
閱讀 552·2019-08-30 15:53
閱讀 2265·2019-08-30 15:44
閱讀 2026·2019-08-29 17:20
閱讀 1594·2019-08-29 16:36
閱讀 1795·2019-08-29 14:10
閱讀 1785·2019-08-29 12:44
閱讀 1166·2019-08-23 14:13