TypeScript入门(三)面向对象特性
一、類(Class)
類是ts的核心,使用ts開發時,大部分代碼都是寫在類里面。
1、類的聲明
多個對象有相同的屬性和方法,但是狀態不同。
聲明類的屬性和方法時可以加 訪問控制符,作用是:類的屬性和方法是否可以在類的外部訪問到。
默認public,還可以取值private,protected。
對應prototype
2、類的構造函數
構造函數是類的特殊方法,只有在類被實例化的時候調用,而且只被調用一次。
構造函數名:constructor,不能在外部被訪問。
作用:實例化一個人的時候必須指定名字。
class Person{name;constructor(name:string) {console.log("haha");}eat() {console.log("i am eating");} }var p1 = new Person("batman"); p1.eat();var p2 = new Person("superman"); p2.eat();簡寫如下,非常常用:注意簡寫時候constructor必須聲明訪問控制符。
class Person{constructor(public name:string) {}eat() {console.log(this.name);} }var p1 = new Person("batman"); p1.eat();var p2 = new Person("superman"); p2.eat();在構造函數時必須明確指定訪問控制符。 constructor(public name:string)和 constructor(name:string)是不一樣的。
3、類的繼承
涉及到2個關鍵字
extends:用來聲明類的繼承關系
super:調用父類的構造函數或者方法
繼承關系是一種是的關系。
extends關鍵字介紹:
class Person{constructor(public name:string) {}eat() {console.log(this.name);} }class Employee extends Person{code: string;work() {} }var e1 = new Employee("name");var p1 = new Person("batman"); p1.eat();var p2 = new Person("superman"); p2.eat(); View Codesuper關鍵字:
2個用法:
- 調父類的構造函數
- 調父類的其他方法
規定: 子類的構造函數必須調用父類的構造函數。
class Person{constructor(public name: string) {console.log(this.name+" haha");}eat() {} }class Employee extends Person{constructor(name: string, code: string) {super(name);this.code = code;console.log(this.code + " xixi");}code: string;work() {} }var e1 = new Employee("name","1");調父類的其他方法
class Person{constructor(public name: string) {console.log("haha");}eat() {console.log("i am eating");} }class Employee extends Person{constructor(name: string, code: string) {super(name);this.code = code;console.log("xixi");}code: string;work() {super.eat();this.doWork();}private doWork() {//私有方法console.log("i am working");} }var e1 = new Employee("name","1"); e1.work();二、范型generic
范型是一種參數化的類型,一般用來限制集合的內容。
約束傳入類型,防止傳入數據錯誤。
//數組的范型 var workers: Array<Person> =[];三、接口
用來建立某種代碼約定,使得其它開發者在調用某個方法或創建新的類時必須遵循接口所定義的代碼約定。
兩個關鍵字
interface聲明接口
implements實現接口
2種使用方式:
接口作為方法的參數的類型聲明
interface IPerson{name: string;age: number; }class Person{//接口作為方法的參數的類型聲明 constructor(public config: IPerson) {} }var pa = new Person({name: "zs",age:18 });用接口聲明方法
interface Animal{eat(); }class Sheep implements Animal{eat() {console.log("i eat grass");} }所有聲明實現這個接口的類必須實現這個方法。
四、模塊Module
模塊可以幫助開發者將代碼分割為可重用的單元。開發者可以自己決定將模塊中的哪些資源(類、方法、變量)暴露出去供外部使用,哪些資源只在模塊內使用。
在ts中一個文件就是一個模塊。
模塊內部有export和import關鍵字。
export:模塊對外暴露哪些資源。(prop,function,class)
import:需要別的模塊為你提供什么。
五、注解 annotation
注解為程序的元素(類,方法,變量)加上更直觀更明了的說明,這些說明信息與程序的業務邏輯無關,而是供指定的工具或框架使用的。
Angular 2中的Angular2框架提供的Component注解
AppComponent類上面有一個@Component注解,注解里有一些屬性會告訴Angular2框架怎樣來處理AppComponent類。
也可以注解在屬性上,注解在方法上。
六、類型定義文件
如何在ts中用jquery?
類型定義文件(*.d.ts):幫助開發者在TypeScript中使用已有的JavaScript的工具包,如:JQuery.
?
實際上就是一個TypeScript模塊,把你要使用的avaScript的工具包里面的工具以TypeScript的類或者是模塊的方式暴露出來供你在你的模塊里去import。
ts中使用jquery:
jquery的類型定義文件就是jquery.d.ts拷貝到目錄下即可。
或者通過?npm install --save @types/jquery 來安裝類型定義文件。
?
工具:Typings 專門用來安裝類型定義文件的。
?
本文作者starof,因知識本身在變化,作者也在不斷學習成長,文章內容也不定時更新,為避免誤導讀者,方便追根溯源,請諸位轉載注明出處:http://www.cnblogs.com/starof/p/6961783.html?有問題歡迎與我討論,共同進步。
2017-06-08
轉載于:https://www.cnblogs.com/starof/p/6963377.html
總結
以上是生活随笔為你收集整理的TypeScript入门(三)面向对象特性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: javascript代码块概念及预编译机
- 下一篇: move_uploaded_file()