TypeScript中函數(shù)與類(lèi)怎么定義

本文小編為大家詳細(xì)介紹“TypeScript中函數(shù)與類(lèi)怎么定義”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“TypeScript中函數(shù)與類(lèi)怎么定義”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

目前創(chuàng)新互聯(lián)建站已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、寧晉網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

介紹

「跳跳」：函數(shù)是定義行為的語(yǔ)法，其實(shí)是為JS添加額外的功能。同樣的可以創(chuàng)建有名稱(chēng)的函數(shù)和匿名函數(shù)。

function add(num1:number,num2:number):number{   return num1 + num2; }  console.log(add(1,2));//3  let addNum = (num1:number,num2:number):number => num1+num2; console.log(addNum(1,2));//3

我們可以給每個(gè)參數(shù)添加類(lèi)型之后再為函數(shù)本身添加返回值類(lèi)型。 TypeScript能夠根據(jù)返回語(yǔ)句自動(dòng)推斷出返回值類(lèi)型，因此我們通常省略它。

簡(jiǎn)而言之，函數(shù)類(lèi)型包含「參數(shù)類(lèi)型」和「返回值類(lèi)型」兩個(gè)部分，當(dāng)寫(xiě)出完整類(lèi)型的時(shí)候，兩部分都需要完整書(shū)寫(xiě)。其實(shí)，可以以參數(shù)列表的形式寫(xiě)出參數(shù)類(lèi)型，為每一個(gè)參數(shù)指定一個(gè)名字和類(lèi)型，增加代碼的可讀性。

只要參數(shù)類(lèi)型是匹配的，那么就認(rèn)為它是有效的函數(shù)類(lèi)型，而不在乎參數(shù)名是否正確。

第二部分是返回值類(lèi)型。如之前提到的，返回值類(lèi)型是函數(shù)類(lèi)型的必要部分，如果函數(shù)沒(méi)有返回任何值，你也必須指定返回值類(lèi)型為 void而不能留空。

在賦值語(yǔ)句的一邊指定了類(lèi)型但是另一邊沒(méi)有類(lèi)型的話，TypeScript編譯器會(huì)自動(dòng)識(shí)別出類(lèi)型。

函數(shù)參數(shù)定義的方式

1.直接聲明函數(shù)參數(shù)

function add(num1:number,num2:number):number{   return num1 + num2; } add(1,2);//3

2.解構(gòu)賦值聲明函數(shù)參數(shù)

function add({num1,num2}:{num1:number,num2:number}):number{   return num1 + num2; } add({x:1,y:2});//3

3.剩余參數(shù)聲明函數(shù)參數(shù)

function add(...rest:number[]){   return rest.reduce((pre,cur)=>pre+cur); } add(2,3,4,5);//14 add("yichuan",3);//報(bào)錯(cuò)，不能使用字符串

4.命名式聲明函數(shù)參數(shù)

type add = (num1:number,num2:number)=>number;  interface add{   (x:number,y:number):number }

調(diào)用方式：

let addFun:add=>(num1,num2)=>num1+num2;

5.可選參數(shù)和默認(rèn)參數(shù)

function add(num1:number,num2:number,num3?:number):number{   return num1 + num2; }

顯而易見(jiàn)：num1和num2是默認(rèn)參數(shù)，num3是可選參數(shù)。切記，默認(rèn)參數(shù)放前面，可選參數(shù)放后面。

this

在JS中的this指向問(wèn)題很惱火，this的指向是在函數(shù)被調(diào)用時(shí)進(jìn)行指定的，但是得整明白函數(shù)調(diào)用的上下文是什么，這是比較困擾的。其實(shí)兩者沒(méi)多大區(qū)別。

幸運(yùn)的是，TS能夠通知你錯(cuò)誤地使用了this的地方。

函數(shù)重載

函數(shù)重載或方法重載是使用相同名稱(chēng)和不同參數(shù)數(shù)量或類(lèi)型創(chuàng)建多個(gè)方法的一種能力。

function addFun(num1:number,num2:number):number; function addFun(num1:string,num2:string):string; function addFun(num1:string,num2:number):string; function addFun(num1:number,num2:string):string; function addFun(num1:any,num2:any):any{   if(typeof num1 === "string" || typeof num2 === "string"){     return num1.toString() + num2.toString();   }   return num1 + num2; } console.log(addFun(1,2));

「蹦蹦」：我們可以看到大多數(shù)的庫(kù)源碼都是進(jìn)行函數(shù)重載的方式，這是為什么?

「跳跳」：這是因?yàn)槭褂煤瘮?shù)重載后，其他人只要看到函數(shù)重載聲明就可以知道函數(shù)的調(diào)用方式。

函數(shù)重載的方式，就是ts會(huì)從一開(kāi)始查找類(lèi)型，如果匹配就返回函數(shù)類(lèi)型，如果不匹配就到下一個(gè)。  因此，在定義重載的時(shí)候，一定要把最精確的定義放在最前面?！竧ips: 維護(hù)一個(gè)公共組件時(shí), 可使用這種方式讓使用者和后面維護(hù)者快速知道函數(shù)的調(diào)用方式.」

類(lèi)

「蹦蹦」：TS的類(lèi)和JS有啥不同?

「跳跳」：在es6前，傳統(tǒng)的Javascript需要使用函數(shù)和原型鏈繼承的方式才能實(shí)現(xiàn)可重用的組件，但是這種對(duì)于不了解JS原型鏈原理的程序員卻顯得困難。而ES6引入了類(lèi)的思想，使得程序員可以基于類(lèi)進(jìn)行面向?qū)ο蟮姆绞骄幊獭?/p>

類(lèi)的屬性和方法

「蹦蹦」：在面向?qū)ο缶幊痰恼Z(yǔ)言中，類(lèi)可以創(chuàng)造對(duì)象的藍(lán)圖，描述所要?jiǎng)?chuàng)建對(duì)象的公共屬性和方法。

class Person{   //實(shí)例屬性   name: string;   age: number;   //私有字段   #score:number;   //靜態(tài)屬性   static height:number = 180;   //   readonly weight:number = 130;   //構(gòu)造函數(shù)   constructor(name:string,age:number,score:number){     this.name = name;     this.age = age;     this.#score = score;   }   //實(shí)例方法   getName(){     return this.name;   }   //靜態(tài)方法   static getAge(){     return this.age;   } }  let person:Person = new Person("wenbo",12); console.log(person.getName()); console.log(Person.height); person.name = "zhaoshun"; console.log(person.getName()); Person.height = 170; console.log(Person.height); person.weight = 110; console.log(person.weight);

• 實(shí)例屬性(成員屬性)：直接在類(lèi)中定義的屬性就是實(shí)例屬性，需要通過(guò)對(duì)象的實(shí)例進(jìn)行訪問(wèn)。

• 靜態(tài)屬性(類(lèi)屬性)：在屬性前使用static關(guān)鍵字可以定義類(lèi)屬性(靜態(tài)屬性)，可以直接通過(guò)類(lèi)進(jìn)行訪問(wèn)。

• 私有字段：在屬性前加上#，即可將屬性變成私有屬性，不能在包含的類(lèi)之外訪問(wèn)，甚至不能被檢測(cè)到。每個(gè)私有屬性都唯一限定了其包含的類(lèi)，不能在私有屬性上使用ts的可訪問(wèn)修飾符(public、private)。

• 構(gòu)造函數(shù)(執(zhí)行初始化操作)：構(gòu)造函數(shù)會(huì)在對(duì)象創(chuàng)建時(shí)調(diào)用，在實(shí)例方法中，this就表示當(dāng)前的實(shí)例.在構(gòu)造函數(shù)中當(dāng)前對(duì)象就是當(dāng)前新建的那個(gè)對(duì)象，可以通過(guò)this向新建的對(duì)象中添加屬性。

• 實(shí)例方法(成員方法)：直接在類(lèi)中定義的方法就是實(shí)例方法，需要通過(guò)對(duì)象的實(shí)例進(jìn)行調(diào)用。在方法中可以通過(guò)this來(lái)表示當(dāng)前調(diào)用方法的對(duì)象。誰(shuí)調(diào)用該方法，就指向誰(shuí)。

• 靜態(tài)方法(類(lèi)方法)：在方法前使用static關(guān)鍵字可以定義類(lèi)方法(靜態(tài)方法)，可以直接通過(guò)類(lèi)進(jìn)行訪問(wèn)。

繼承

基于類(lèi)的程序設(shè)計(jì)中一種最基本的模式是允許使用繼承來(lái)擴(kuò)展現(xiàn)有的類(lèi)。

class Animal {     move(distanceInMeters: number = 0) {         console.log(`Animal moved ${distanceInMeters}m.`);     } }  class Dog extends Animal {     bark() {         console.log('Woof! Woof!');     } }  const dog = new Dog(); dog.bark(); dog.move(10); dog.bark();

如上所示是最基本的繼承：類(lèi)從基類(lèi)中繼承了屬性和方法。這里，Dog是一個(gè)派生類(lèi)，它派生自Animal基類(lèi)，通過(guò) extends關(guān)鍵字。派生類(lèi)通常被稱(chēng)作  子類(lèi)，基類(lèi)通常被稱(chēng)作 超類(lèi)。

因?yàn)镈og繼承了Animal的功能，因此我們可以創(chuàng)建一個(gè)Dog的實(shí)例，它能夠bark()和move()。

公共，私有與受保護(hù)的修飾符

在TS中可以給類(lèi)的屬性、方法及構(gòu)造器設(shè)置修飾符，來(lái)限定它們的作用范圍。默認(rèn)修飾符是public，因此可以當(dāng)前類(lèi)和子類(lèi)自由訪問(wèn)程序中定義的成員。

「tip: 在寫(xiě)類(lèi)時(shí), 要養(yǎng)成隨手添加成員修飾符的習(xí)慣.」

class Father{   //公共成員   public name:string;   //私有成員   private age:number;   //受保護(hù)成員   protected address:string;   public constructor(name:string,age:number,address:string){     this.name = name;     this.age = age;     this.address = address;   }    public eat(meters:number){     console.log(`${this.name} moved ${meters}`);   } }  class Son extends Father{   constructor(){     super()   }   test(){     console.log(this.name);//可訪問(wèn)     console.log(this.age);//屬性“age”為私有屬性，只能在類(lèi)“Father”中訪問(wèn)。     console.log(this.address);//可訪問(wèn)   } }  const bigLiu = new Father("bigLiu",32,"四川省成都市"); console.log(bigLiu.name);//可訪問(wèn) console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類(lèi)“Father”中訪問(wèn)。 console.log(bigLiu.address);//屬性“address”受保護(hù)，只能在類(lèi)“Father”及其子類(lèi)中訪問(wèn)。   const smallLiu = new Son(); console.log(bigLiu.name);//可訪問(wèn) console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類(lèi)“Father”中訪問(wèn)。 console.log(bigLiu.address);//屬性“address”受保護(hù)，只能在類(lèi)“Father”及其子類(lèi)中訪問(wèn)。

訪問(wèn)器(存取器)

TypeScript支持通過(guò) getters/setters來(lái)截取對(duì)對(duì)象成員的訪問(wèn)。它能幫助你有效的控制對(duì)對(duì)象成員的訪問(wèn)。

class Greeter {    constructor(message: string) {        this.greeting = message;    }    greeting: string;    get hello() {        return this.greeting;    }    set hi(x) {        this.greeting = x;    } } const x = new Greeter('eeee') x.hi('22'); x.hello = '2' // 報(bào)錯(cuò), 不能修改

實(shí)際上就是使用getters/setters來(lái)截取對(duì)對(duì)象成員的訪問(wèn)。解析出來(lái)的源碼如下:

抽象類(lèi)

使? abstract  關(guān)鍵字聲明的類(lèi)，我們稱(chēng)之為抽象類(lèi)。抽象類(lèi)不能被實(shí)例化，因?yàn)樗??包含?個(gè)或多個(gè)抽象?法。所謂的抽象?法，是指不包含具體實(shí)現(xiàn)的?法：

abstract class Person { constructor(public name: string){} abstract say(words: string) :void; } // Cannot create an instance of an abstract class.(2511) const lolo = new Person(); // Error

抽象類(lèi)不能被直接實(shí)例化，我們只能實(shí)例化實(shí)現(xiàn)了所有抽象?法的?類(lèi)。具體如下所示：

abstract class Person {   constructor(public name: string){}     // 抽象?法     abstract say(words: string) :void;   }   class Developer extends Person {   constructor(name: string) {   super(name); } say(words: string): void {   console.log(`${this.name} says ${words}`);   } } const lolo = new Developer("lolo"); lolo.say("I love ts!"); // lolo says I love ts!

讀到這里，這篇“TypeScript中函數(shù)與類(lèi)怎么定義”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：TypeScript中函數(shù)與類(lèi)怎么定義
本文地址：http://muchs.cn/article32/gddssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、App設(shè)計(jì)、網(wǎng)站收錄、自適應(yīng)網(wǎng)站、小程序開(kāi)發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)