深入學習TypeScript

趙連江發(fā)布于2019-08-23 11:39 / 1704人閱讀

摘要：是的超級，遵循最新的規(guī)范相當于包含了的語法。表示方法沒有返回任何類型類型表示的是那些永不存在的值的類型，例如異常錯誤寫法錯誤三函數(shù)內(nèi)容概述函數(shù)的定義可選參數(shù)默認參數(shù)剩余參數(shù)函數(shù)重載箭頭函數(shù)。

一、Typescript 介紹、環(huán)境搭建 1.1 Typescript 介紹

1.TypeScript 是由微軟開發(fā)的一款開源的編程語言，像后端 java、C#這樣的面向?qū)ο笳Z言可以讓 js 開發(fā)大型企業(yè)項目。

2.TypeScript 是 Javascript的超級，遵循最新的 ES6、Es5 規(guī)范(相當于包含了es6、es5的語法)。TypeScript擴展了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.ts

1.3 Typescript開發(fā)工具Vscode自動編譯.ts 文件

1.3.1 tsc --init 生成配置文件tsconfig.json

1.3.2 點擊菜單欄任務-運行任務（遇到錯誤使用快捷鍵ctrl + shift + b），點擊 tsc:監(jiān)視-tsconfig.json 然后就可以自動生成代碼
了

二、Typescript數(shù)據(jù)類型

typescript中為了使編寫的代碼更規(guī)范，更有利于維護，增加了類型校驗

2.1 基礎類型

在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 = [1, 2, 3]

元組類型（tuple）元素的類型不必相同，寫法和數(shù)組一樣

let arr:[number,string] = [123,"this is ts"]

枚舉類型（enum）

用法：

enum 枚舉名{ 
    標識符[=整型常數(shù)], 
    標識符[=整型常數(shù)], 
    ... 
    標識符[=整型常數(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 = true

2.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，值必須為null

void類型

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ù)、默認參數(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里面方法的實參和行參可以不一樣，但是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 默認參數(shù)

es5里面沒法設置默認參數(shù)，es6和ts中都可以設置默認參數(shù)

// age為默認參數(shù)
function defaultParam(name:string, age:number = 20):String {
    return `${name} --- ${age}`
}

console.log("默認參數(shù)", defaultParam("dz"))

3.4 剩余參數(shù)

當有很多參數(shù)時候或參數(shù)個數(shù)不確定，可以用三點運算符

// 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ù)，實現(xiàn)不同的功能

java中方法的重載：重載指的是兩個或者兩個以上同名函數(shù)，但它們的參數(shù)不一樣，這時會出現(xiàn)函數(shù)重載的情況。

typescript中的重載：通過為同一個函數(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ù)和原型鏈里都可以添加屬性和方法，原型鏈上的屬性會被多個實例所共享，而構(gòu)造函數(shù)則不會。

function Person() {
    this.name = "Ming"
    this.run = function() {
        console.log(this.name + "在運動")
    }
}

Person.prototype.sex = "男" // 原型鏈上的屬性會被多個實例所共享
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)方法不需要實例化

Person.getInfo=function(){
    console.log("我是靜態(tài)方法");
}
Person.getInfo();

4.1.3 實現(xiàn)繼承

對象冒充(或者叫構(gòu)造函數(shù)繼承)繼承：可以繼承構(gòu)造函數(shù)里面的屬性和方法，但是沒法繼承原型鏈上面的屬性和方法  原型繼承:可以繼承構(gòu)造函數(shù)里面的屬性和方法，也可以繼承原型鏈上面的屬性和方法，但是實例化子類的時候沒法給父類傳參

下面是通過對象冒充 + 原型鏈組合繼承，解決了上面兩種繼承方式存在的問題

function Worker(name,age){
    this.name=name;  /*屬性*/
    this.age=age;
    this.run=function(){  /*實例方法*/
        alert(this.name+"在運動");
    }

}      
Worker.prototype.sex="男";
Worker.prototype.work=function(){
    alert(this.name+"在工作");
}
    
function Web(name,age){
    Worker.call(this,name,age);  // 對象冒充繼承，可以繼承構(gòu)造函數(shù)里面的屬性和方法，實例化子類可以給父類傳參
}
// Web.prototype = new Worker();  // 原型鏈繼承方法一：繼承Worker構(gòu)造函數(shù)和原型上所有的方法和屬性
Web.prototype = Worker.prototype;  //原型鏈繼承方法二：優(yōu)化了方法一重復繼承構(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的原型對象來實現(xiàn)繼承；最后這兩種繼承的組合方式實現(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}在運動`
    }
}
var define = new PersonDefine("類的定義")
alert(define.run())

4.2.2 繼承

ts中繼承比es5簡單很多，用extends super實現(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: 公有修飾符，在當前類里面、子類、類外面都可以訪問

protected：保護類型，在當前類里面、子類里面可以訪問，在類外部沒法訪問

private ：私有修飾符，在當前類里面可以訪問，子類、類外部都沒法訪問

注意：屬性如果不加修飾符，默認就是公有修飾符

// 以private為例
class PersonPrivate{
    private name:string;  /*被private修飾的屬性 => 私有屬性*/
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `${this.name}在運動` // 私有屬性只能在當前類里面可以訪問
    }
}

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中實現(xiàn)靜態(tài)屬性和靜態(tài)方法用static

class PersonStatic{
    /*公有屬性*/
    public name:string;
    constructor(name:string) {
        this.name=name;
    }
    /*實例方法（需要被實例化，所以為實例方法）*/
    run(){  
        return `${this.name}在運動`
    }
    /*靜態(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)

父類定義一個方法不去實現(xiàn)，讓繼承它的子類去實現(xiàn)，每一個子類的該方法有不同的表現(xiàn)

多態(tài)屬于繼承

比如定義一個父類Animal，里面的eat方法不去實現(xiàn)，讓子類Dog和Cat分別實現(xiàn)自己的eat方法

class Animal {
    name:string;
    constructor(name:string) {
        this.name=name;
    }
    eat(){   // eat方法繼承它的子類去實現(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)鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現(xiàn)并且必須在派生類(抽象類的子類)中實現(xiàn)

抽象類：它是提供其他類繼承的基類，不能直接被實例化，子類繼承可以被實例化

abstract修飾的方法(抽象方法)只能放在抽象類里面

抽象類和抽象方法用來定義標準(比如定義標準為：抽象類Animal有抽象方法eat，要求它的子類必須包含eat方法)

abstract class AnimalAbst{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;  //抽象方法不包含具體實現(xiàn)并且必須在派生類中實現(xiàn)
    run(){
        console.log("其他方法可以不實現(xiàn)")
    }
}
// var a = new Animal() /*錯誤的寫法，抽象類不能被實例化*/

class DogAbst extends Animal{
    //抽象類的子類必須實現(xiàn)抽象類里面的抽象方法
    constructor(name:any){
        super(name)
    }
    eat(){
        return this.name + "吃糧食"
    }
}

var d = new DogAbst("小花花");
console.log("抽象類和抽象方法",d.eat());

五、TypesSript接口

接口定義：接口是對傳入?yún)?shù)進行約束；或者對類里面的屬性和方法進行聲明和約束，實現(xiàn)這個接口的類必須實現(xiàn)該接口里面屬性和方法；typescript中的接口用interface關(guān)鍵字定義。

接口作用：接口定義了某一批類所需要遵守的規(guī)范，接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類里方法的實現(xiàn)細節(jié)，它只規(guī)定這批類里必須提供某些方法，提供這些方法的類就可以滿足實際需要。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ù)進行約束

下面為屬性接口的例子，方法printFullName對傳入?yún)?shù)FullName(為對象)進行約束

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))

屬性接口應用：原生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ù)以及返回值進行約束

interface encrypt{
    (key: string, value: string): string; // 傳入的參數(shù)和返回值的類型
}

var md5:encrypt = function(key:string, value:string):string{
    // encrypt對加密方法md5進行約束，同時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)在用接口來實現(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 類類型接口

對類的約束，和抽象類抽象有點相似

interface Animal{
    // 對類里面的屬性和方法進行約束
    name:string;
    eat(str:string):void;
}
// 類實現(xiàn)接口要用implements關(guān)鍵字，必須實現(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實現(xiàn)接口繼承

下面同時實現(xiàn)類的繼承和接口的繼承

interface Animal {
    eat(): void;
}
// 繼承Animal接口，則實現(xiàn)Person接口的類必須也實現(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)
    }
}

// 繼承類并且實現(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泛型

泛型定義：泛型定義：泛型就是解決類、接口、方法的復用性，以及對不特定數(shù)據(jù)類型的支持(類型校驗)。ts中用T表示泛型。

泛型公式: 表示泛型，調(diào)用的時候指定T的數(shù)據(jù)類型

軟件工程中，我們不僅要創(chuàng)建一致的定義良好的API，同時也要考慮可重用性。組件不僅能夠支持當前的數(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 dataT(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("這是一個泛型");

6.2 類的泛型

也是用來實現(xiàn)類的泛型，new的時候指定T的數(shù)據(jù)類型

有個最小堆算法，需要同時支持返回數(shù)字和字符串兩種類型

使用泛型之前：只能在類的類部指定數(shù)據(jù)類型，實現(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());

使用泛型之后：只用一套類來實現(xiàn)

class MinClassT{
    public list:T[]=[];
    add(value:T):void{
        this.list.push(value);
    }
    min():T{        
        var minNum=this.list[0];
        for(var i=0;ithis.list[i]){
                minNum=this.list[i];
            }
        }
        return minNum;
    }
}
var m1=new MinClassT();   /*實例化類 并且指定了類的T代表的類型是number*/
m.add(1);
m.add(2);
alert(m1.min())

var m2=new MinClassT();   /*實例化類 并且指定了類的T代表的類型是string*/
m2.add("c");
m2.add("a");
alert(m2.min())

6.3 泛型接口

有一個函數(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...

云服務器 GPU云服務器深度學習深入學習深入學習深度學習機器學習深入學習如何深入學習深度學習

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.hztianpu.com/yun/97281.html

發(fā)表評論

登陸后可評論

0條評論

趙連江

男|高級講師

我要關(guān)注我要私信

TA的文章

TMWhost：$31.5/季/1核/2GB內(nèi)存/150GB空間/1TB流量/200Mbps-300

閱讀 1461·2021-09-13 10:25
css-doodle初認識

閱讀 631·2019-08-30 15:53
CSS中幾種常用的選擇器

閱讀 2324·2019-08-30 15:44
《css世界》- 詳細重點筆記與技巧

閱讀 2109·2019-08-29 17:20
webpack4 系列教程(九): CSS Tree Shaking

閱讀 1656·2019-08-29 16:36
css3水滴效果，地圖標記效果

閱讀 1866·2019-08-29 14:10
js放大鏡效果

閱讀 1845·2019-08-29 12:44
數(shù)據(jù)類型之字符串篇

閱讀 1231·2019-08-23 14:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

深入學習TypeScript

相關(guān)文章

深入理解 TypeScript

Ts學習深入淺出

Ts學習深入淺出

前端進階資源整理

**JavaScript是如何工作的：深入類和繼承內(nèi)部原理+Babel和 TypeScript 之間轉(zhuǎn)換**

發(fā)表評論

0條評論

趙連江

男|高級講師

TA的文章

TMWhost：$31.5/季/1核/2GB內(nèi)存/150GB空間/1TB流量/200Mbps-300

css-doodle初認識

CSS中幾種常用的選擇器

《css世界》- 詳細重點筆記與技巧

webpack4 系列教程(九): CSS Tree Shaking

css3水滴效果，地圖標記效果

js放大鏡效果

數(shù)據(jù)類型之字符串篇

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

深入學習TypeScript

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！