TypeScript--deno前置學習

時間 2019-11-20

標籤 typescript deno 前置學習简体版

原文原文鏈接

第一節：前言：

1.JavaScript 的發展簡史圖：javascript

2.關於node與deno:html

（1）Node與Deno 的區別：Node 能夠工做，而 Deno 不行,Deno 只是一個原型或實驗性產品。前端

（2）Deno 的目標是不兼容 Node，而是兼容瀏覽器。Deno 不是要取代 Node.js，也不是下一代 Node.js，也不是要放棄 npm 重建 Node 生態。deno 的目前是要擁抱瀏覽器生態。java

（3）使用deno就須要加載一個 TypeScript 編譯器node

其實TypeScript如今用的已經很普遍了，不管你使用ng、React仍是Vue均可以使用TypeScript來實現的你JavaScript代碼。程序員

3. TypeScript是什麼web

typeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，TypeScript 在 JavaScript 的基礎上添加了可選的靜態類型和基於類的面向對象編程。其實TypeScript就是至關於JavaScript的加強版，可是最後運行時還要編譯成JavaScript。TypeScript最大的目的是讓程序員更具創造性，提升生產力，它將極大加強JavaScript編寫應用的開發和調試環節，讓JavaScript可以方便用於編寫大型應用和進行多人協做。正則表達式

4.TypeScript和JavaScript的對比typescript

ypeScript 與JavaScript二者的特性對比，主要表現爲如下幾點：npm

（1）TypeScript是一個應用程序級的JavaScript開發語言。（這也表示TypeScript比較牛逼，能夠開發大型應用，或者說更適合開發大型應用）

（2）TypeScript是JavaScript的超集，能夠編譯成純JavaScript。這個和咱們CSS離的Less或者Sass是很像的，咱們用更好的代碼編寫方式來進行編寫，最後仍是有好生成原生的JavaScript語言。

（3）TypeScript跨瀏覽器、跨操做系統、跨主機、且開源。因爲最後他編譯成了JavaScript因此只要能運行JS的地方，均可以運行咱們寫的程序，設置在node.js裏。

（4）TypeScript始於JavaScript，終於JavaScript。遵循JavaScript的語法和語義，因此對於咱們前端從業者來講，學習前來駕輕就熟，並無太大的難度。

（5）TypeScript能夠重用JavaScript代碼，調用流行的JavaScript庫。

（6）TypeScript提供了類、模塊和接口，更易於構建組件和維護。

第二節：開發環境的安裝（windows環境下）

1.安裝Node.js

安裝Node.js很是簡單，只要到Node官網下載一個最新版本就能夠了，相關安裝步驟參考連接：http://www.javashuo.com/article/p-mpdcimfc-hw.html

安裝好後，能夠打開命令行工具，同時按下win+R，而後輸入cmd就能夠打開，打開後輸入

node -v

npm -v

若是看到相關的版本號說明已經安裝成功了，看不到版本號就說明你的node.js沒有安裝成功。

2.安裝TypeScript包

在剛纔的命令行窗口繼續輸入以下命令：

npm install typescript -g

而後，輸入以下命令，查看相關版本號，正常顯示則說明包安裝成功。

tsc --version

3.編寫HelloWorld程序

1.初始化項目：進入你的編程文件夾後，可使用 npm init -y來初始化項目，生成package.json文件。

2.建立tsconfig.json文件，在終端中輸入tsc --init：它是一個TypeScript項目的配置文件，能夠經過讀取它來設置TypeScript編譯器的編譯參數。

3.安裝@types/node,使用npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。

4.編寫HelloWorld.ts文件，而後進行保存，代碼以下。

var a:string = "HelloWorld"
console.log(a)

5.使用webstorm 建立helloWorld.ts文件，詳細可參考 http://www.javashuo.com/article/p-tbuiagsc-z.html

6.在webstorm終端中輸入node helloWorld.js就能夠看到結果了。

第三節：變量類型

TypeScript最大的一個特色就是變量是強類型的，也就是說，在聲明變量的時候，咱們必須給他一個類型。

TypeScript中的數據類型有：

Undefined :
Number:數值類型;
string : 字符串類型;
Boolean: 布爾類型；
enum：枚舉類型；
any : 任意類型，一個牛X的類型；
void：空類型；
Array : 數組類型;
Tuple : 元祖類型；
Null ：空類型。

（1）Undefined類型

在js中當你定義了一個變量，但沒有給他賦予任何值的時候，他就是Undefined類型。

咱們如今來看一個例子，好比咱們要聲明一個年齡的變量age,咱們要使用數值類型，也就是Number,可是咱們不給他任何的值，咱們只是在控制檯給它輸出，而後咱們來看結果。

新建demo01.ts文件，下入下面代碼：

//聲明數值類型的變量age，但不予賦值
var age:number
console.log(age)

寫完後保存代碼，進行運行任務，而後生成demo01.js，在終端中使用node demo01.js來進行查看運行結果。控制檯輸出了undefined。

（2）Number類型

在TypeScript中，全部的數字都是Number類型，這不分是整數仍是小數。好比下面咱們聲明一個年齡是18歲，身高是178.5釐米。

新建一個文件demo01_1.ts文件，寫入下面代碼：

var age:number = 18
var stature:number = 178.5
console.log(age)
console.log(stature)

而後執行轉換，查看結果，咱們能夠在控制檯看到結果已經順利輸出，沒有任何意外。

在TypeScrip中有幾種特殊的Number類型 咱們須要額外注意一下：

NaN：它是Not a Number 的簡寫，意思就是否是一個數值。若是一個計算結果或者函數的返回值本應該是數值，可是因爲種種緣由，他不是數字。出現這種情況不會報錯，而是把它的結果當作了NaN。（這就比如咱們去泰國外，找了一個大長腿、瓜子臉、水蛇腰的女神。房也開好了，澡也洗完了，發現跟咱們的性別統一，咱們只能吃個啞吧虧，你毫不會聲張）
Infinity :正無窮大。
-Infinity：負無窮大。

（3）string類型

由單引號或者雙引號括起來的一串字符就是字符串。好比："demo",'121222'

var demo:string = "demo 12121"
console.log(demo)

這時候控制圖就會輸出 demo 12121 。

（4）boolean布爾類型

布爾類型主要用於邏輯判斷，經過對與錯的判斷是最直觀的邏輯處理，boolean類型只有兩種值，true和false。

var b:boolean = true
var c:boolean = false

（5）enum 類型

這個世界有不少值是多個而且是固定的，好比：

世界上人的類型：男人、女人。
一年的季節：春、夏、秋、冬。

這種變量的結果是固定的幾個數據時，就是咱們使用枚舉類型的最好時機：

demo01_3.ts

enum REN{ nan , nv }
console.log(REN.nan)  //返回了0，這是索引index。

給這些枚舉賦值，能夠直接使用=,來進行賦值。

enum REN{
    nan = '男',
    nv = '女',
}
console.log(REN.nan)  //返回了男 這個字

（6）any類型

TypeScript友好的爲咱們提供了一種特殊的類型any，好比咱們在程序中不斷變化着類型，又不想讓程序報錯，這時候就可使用any了。

var t:any =10 
t = "wfaceboss"
t = true
console.log(t)

（7）Null類型

與 Undefined 相似，都表明空。Null 表明是引用類型爲空。

注意：剩餘的數組、元組、void 會在後續學到。

第四節：TypeScript的函數

函數能夠理解爲：把功能相近的需求封裝成一個獨立的代碼塊，每次傳入不一樣的變量或參數，就能夠實現不一樣的結果。

1.定義函數

函數就至關於一個工具，若是你想使用這個工具，就要先製做這個工具。這就是咱們說的定義函數。在TypeScript裏定義函數跟JavaScript稍微有些不一樣。咱們來定義找姐姐的函數吧。

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'歲的姐姐' 
}
var age:number = 18
var result:string = searchXiaoJieJie(age)
console.log(result) //找到了18歲的姐姐

上面的程序，先用function關鍵字聲明瞭一個searchXiaoJieJie的方法，而後咱們使用了他，並返回了給咱們結果。

須要注意的是：

聲明（定義）函數必須加 function 關鍵字；
函數名與變量名同樣，命名規則按照標識符規則；
函數參數無關緊要，多個參數之間用逗號隔開；
每一個參數參數由名字與類型組成，之間用分號隔開；
函數的返回值無關緊要，沒有時，返回類型爲 void；
大括號中是函數體。

2.形參和實參

（1）形參的使用
函數定義的時候寫的參數是形參。從字面意義上咱們能夠看出，形參就是形式上的參數。咱們定義了形參也就規定了此函數的參數個數和參數類型，規範了函數。

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'歲的姐姐' 
}

好比這個函數，就定義了一個形參，它的類型是數值類型。

（2）實參的使用

調用函數時傳遞的具體值就是實參。一樣從字面理解，實參就是真實的參數，咱們在使用的時候，具體真實傳遞過去的就是實參，好比18，20，22，這些具體的參數就是實參。

var age:number=18
var result:string = searchXiaoJieJie(age)

此時傳遞的age就是實參。

注意：

在函數調用的時候，咱們須要按照形參的規則傳遞實參，有幾個形參就要傳遞幾個實參，而且每個實參的類型要與對應的形參類型一致。

3. TypeScript語言中的函數參數

TypeScript的函數參數是比較靈活的，它不像那些早起出現的傳統語言那麼死板。在TypeScript語言中，函數的形參分爲：可選形參、默認形參、剩餘參數形參等。

（1）有可選參數的函數

可選參數，就是咱們定義形參的時候，能夠定義一個可傳可不傳的參數。這種參數，在定義函數的時候經過 ?標註。

好比咱們繼續做找姐姐的函數，這回不只能夠傳遞年齡，還能夠選擇性的傳遞身材。咱們來看如何編寫。

function searchXiaoJieJie2(age:number,stature?:string):string{
    let yy:string = ''
    yy = '找到了'+age+'歲'
    if(stature !=undefined){
        yy = yy + stature
    }
    return yy+'的小姐姐'
}
var result:string  =  searchXiaoJieJie2(22,'大長腿')
console.log(result) //找到了22歲大長腿的小姐姐

var result1=string=searchXiaoJieJie2(22)
console.log(result1)//找到了22歲的小姐姐

（2）有默認參數的函數

有默認參數就更好理解了，就是咱們不傳遞的時候，他會給咱們一個默認值，而不是undefined了。咱們改造上邊的函數，也是兩個參數，可是咱們把年齡和身材都設置默認值。

function searchXiaoJieJie2(age:number=18,stature:string='大胸'):string{
    let yy:string = ''
    yy = '找到了'+age+'歲'
    if(stature !=undefined){
        yy = yy + stature
    }
    return yy+'的小姐姐'
}
var result:string  =  searchXiaoJieJie2()
console.log(result)//找到了18歲大胸的小姐姐

（3）有剩餘參數的函數

有時候咱們有這樣的需求，我傳遞給函數的參數個數不肯定。

剩餘參數就是形參是一個數組，傳遞幾個實參過來均可以直接存在形參的數組中。

function searchXiaoJieJie3(...xuqiu:string[]):string{
    let  yy:string = '找到了'
    for (let i =0;i<xuqiu.length;i++){
        yy = yy + xuqiu[i]
        if(i<xuqiu.length){
            yy=yy+'、'
        }
    }
    yy=yy+'的小姐姐'
    return yy
}
var result:string  =  searchXiaoJieJie3('22歲','大長腿','瓜子臉','水蛇腰')
console.log(result)//找到了22歲、大長腿、瓜子臉、水蛇腰、的小姐姐

第五節：三種函數的定義方式

1.函數聲明法

函數聲明法建立函數是最經常使用的函數定義法。使用function關鍵字和函數名去定義一個函數。

function add(n1:number,n2:number):number{
    return n1+n2
}

2.函數表達式法

函數表達式法是將一個函數賦值給一個變量，這個變量名就是函數名。經過變量名就能夠調用函數了。這種方式定義的函數，必須在定義以後，調用函數。下面例子中等號右邊的函數沒有函數名，稱爲匿名函數。

var add = function(n1:number,n2:number):number{
    return n1+n2
}
console.log(add(1,4))

3.箭頭函數

箭頭函數是 ES6 中新增的函數定義的新方式，咱們的 TypeScript 語言是徹底支持 ES6 語法的。箭頭函數定義的函數通常都用於回調函數中。

var add = (n1:number,n2:number):number=>{
    return n1+n2
}
console.log(add(1,4))

第六節：函數中變量的做用域

定義在函數內部的變量與定義在函數外部的變量是不同的，做用的範圍也不同。

每一個變量都有一個起做用的範圍，這個範圍就是變量的做用域。在TypeScript語言中變量做用域劃分是以函數爲標準的。

1.函數做用域演示

咱們來舉個例子，如今要製做一個整形的方法，而後在函數裏用var定義一個shape的變量,咱們再函數的外部讀取這個變量，你會發現是讀取不到的。

function zhengXing():void{
    var  shape = '劉德華'
    console.log( shape)
}
zhengXing()
console.log(shape)//報錯，shape is not defined

2.認識全局變量和局部變量

局部變量：函數體內定義的變量就是局部變量。
全局變量: 函數體外定義的變量就是全局變量。

咱們改造上邊的程序，把shape辦理移動到全局，而後再進行輸出。

var shape= '劉德華'
function zhengXing():void{
    console.log('你被整造成了'+shape+'的樣子')
}
zhengXing()//你被整成了劉德華的樣子
console.log(shape)//劉德華

這時候shape變量是全局的，因此在函數內也能夠調用，在函數外也能夠調用。

3.局部變量和全局變量重名

當局部變量與全局變量重名的時候，在函數體內是局部變量起做用；若是重名，就有變量提高。

仍是上邊整形的例子，你是想整造成劉德華，可是函數體內部聲明瞭一個馬德華。雖然一字之差，可是樣子但是徹底不一樣的。咱們來看代碼如何實現：

var shape:string = '劉德華'
function zhengXing():void{
    var shape:string = '馬德華'
    console.log('你被整造成了'+shape+'的樣子')
}
zhengXing()//你被整造成了馬德華的樣子

console.log(shape)//劉德華

這回你會發現，你並無變成劉德華而是變成了馬德華。那你說我我想變成劉德華，我在函數沒聲明新變量前打印到控制檯行不行？

var shape:string = '劉德華'
function zhengXing():void{
    console.log('你整造成了'+shape+'的樣子')
    var shape:string = '馬德華'
    console.log('技術胖整造成了'+shape+'的樣子')
}
zhengXing()
console.log(shape)

代碼改形成了這樣，可是你會發現，咱們輸出的結果以下：

你被整造成了undefined的樣子

產生這個結果的緣由就是變量提高，他的真實代碼是這樣的。

var shape:string = '劉德華'
function zhengXing():void{
    var  yangzi:string
    console.log('技術胖整造成了'+shape+'的樣子')
    shape = '馬德華'
    console.log('技術胖整造成了'+shape+'的樣子')
}
zhengXing()
console.log(shape)

也就是當內部聲明瞭和全局的變量同名時，就會出現變量提高的效果，聲明語句會提高到函數的第一句。這就是變量提高的含有。

4.let關鍵字變量的做用域

在早期javascript的變量做用域只有全局和局部，而且是以函數劃分的，但在其餘語言中，做用域的劃分是以一對大括號做爲界限的。

因此，JavaScript就遭到了無數開發者的吐槽，甚至說javascript不適合開發大型語言，容易內存溢出。JavaScript團隊意識到了這一點，在ES6中推出了let關鍵字。

使用let關鍵字的變量就是一個塊級做用域變量。實際工做中多使用let來聲明你的變量，讓程序更有條例。來看一段程序：

function zhengXing():void{
    var shape_a:string = '劉德華'
    {
        let  shape_b:string = '小瀋陽'
        console.log('技術胖整造成了'+shape_b+'的樣子')
    }
    console.log('你被整造成了'+shape_a+'的樣子')
    console.log('你被整造成了'+shape_b+'的樣子')
}
zhengXing()

注意：這時候編譯後，咱們運行，你會發現是能夠執行的，而且打印到了控制檯正確的結果。這是由於ts編譯成js，他自動給咱們加了ES5的處理，ES5裏是沒有let關鍵字的，如今咱們再改一下編譯好的程序，你會發現shape_b

這個關鍵字就找不到了。

第七節：引用類型-數組

TypeScript中的數據分爲值類型和引用類型。引用類型中封裝了不少對屬性，每一對屬性都有屬性名和屬性值。

在TypeScript中也給咱們提供了一些引用類型，例如：Array（數組）、String（字符串）、Date（日期對象）、RegExp（正則表達式）等

1.初始化數組的兩種方法

建立數組時能夠指定數組的容量，也能夠直接向數組中存儲數據。

聲明數組的方法

聲明數組跟聲明一個普通變量是同樣的，都是經過 var let 關鍵字實現的，只不過數組的類型說明符比較複雜而已。

let arr1:number[ ]     //聲明一個數值類型的數組


let arr2:Array<string>  //聲明一個字符串類型的數組

2.給數組賦值：

數組是存儲大量數據的集合，聲明數組以後，須要給數組存儲數據。這時候有兩種方法：

字面量賦值法：直接使用「[ ]」對數組進行賦值。
構造函數賦值法：

（1）字面量賦值法

//定義一個空數組，數組容量爲0
let arr1:number[] = []
//定義一個數組時，直接給數組賦值
let arr2:number[] = [1,2,3,4,5]
//定義數組 的同事給數組賦值
let arr3:Array<string> = ['a','b','c']
let arr4:Array<boolean> = [ true,false,false]

須要注意的是，在TypeScript中指定數據類型的數組只能存儲同一類型的數組元素。

//報錯！ 必須存儲number類型的數據
let arr5:number[] = [1,2,true]

（2）構造函數賦值法

在 TypeScript 中使用 Array 這個引用類型來表示數組的，那麼每個數組都是 Array 類型的實例。那麼，咱們在建立數組的時候也可使用構造函數來進行賦值。

let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string> = new Array('a','b','c')
let arr4:Array<boolean> = new Array(true,false,false)

3.元組 ---特殊的數組

元組是一種特殊的數組，元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。好比，你能夠定義一對值分別爲string和number類型的元組。

//聲明一個元祖類型
let x : [string,number]
//正確的初始化
x = ['hello',10]
//錯誤的初始化方法
x = [10,'hello']

第八節：引用類型--字符串

在TypeScript中存在兩種類型的字符串：基本類型字符串和引用類型字符串。

字符串的兩種類型：

（1）基本類型字符串：由單引號或者雙引號括起來的一串字符串。

（2）引用類型字符串：用new 實例化的 String類型。

引用類型的出現給字符串增長一系列方法了。以致於能夠更方便操做字符串。

須要說明的是這兩種聲明字符串的方法沒有什麼不一樣。基本類型的字符串能夠直接使用引用類型的屬性和方法。

相關的字符串學習參考：http://www.cnblogs.com/zengfp/p/9883073.html

第九節：引用類型-日期對象

TypeScript中使用Date這個引用類型來存儲日期對象，若是你要聲明一個日期變量時，記得也要註明它的類型是Date。

建立日期對象

日期對象是Date的實例，可使用構造函數的方法進行建立。而且構造函數中能夠傳遞多種類型的參數。

1.不傳遞任何參數

構造函數中不傳遞參數時，Date（）構造函數將根據當前日期和時間建立一個Date對象。咱們看下面的例子理解一下。

let d:Date = new Date()
console.log(d) //2018-12-01T02:51:24.770Z

2.傳遞一個整數

傳遞一個整數，這個整數表明的是距離1970-01-01 00:00:00的毫秒數。例如：傳入參數爲1000，將建立一個表示1970-01-01 00:00:01的日期對象。

咱們舉個例子，傳遞一個整數，看一下結果。

let d:Date = new Date(1000)
let da:Date = new Date(2000)
console.log(d)  //1970-01-01T00:00:01.000Z
console.log(da) //1970-01-01T00:00:02.000Z

3.傳遞一個字符串

若是傳遞一個表示日期的字符串，就會生成相對應的日期對象。字符串的格式經常使用:yyyy/MM/dd hh:mm:ss，yyyy-MM-dd hh:mm:ss，yyyy-MM-ddThh:mm:ss等,具體能夠參看下面的例子。

let d1:Date = new Date('2018/12/01 09:30:00')
let d2:Date = new Date('2018-12-01 09:30:00')
let d3:Date = new Date('2018-12-01T09:30:00')
console.log(d1)
console.log(d2)
console.log(d3)

然，他們打印出來的結果時徹底相同的（都是2018-12-01T01:30:00.000Z），因此在開發中你不用太過於糾結使用哪一種方式進行聲明。

4.傳遞表示年月日時分秒的變量

let d:Date = new Date(year,month,day,hours,minutes,seconds,ms);

year 表示年份，4位數字。
month表示月份，數值是0(1月)~11(12月)之間的整數。
day 表示日期。數值是1~31之間的整數。
hours 表示小時，數值是0-23之間的整數。
minutes 表示分鐘數，數值是0~59之間的整數。
seconds 表示秒數，數值是0~59之間的整數。
ms 表示毫秒數，數值是0~999之間的整數。

第10節:引用類型-正則表達式

用於驗證最好最強大的手段目前爲止就是正則表達式。TypeScript的RegExp類表示正則表達式。

認識正則表達式：

建立正則表達式和字符串猶如一對好基友（相似），建立正則表達式也提供了兩種方法，一種是才採用new 關鍵字，另外一種是採用字面量的方式。

1.構造函數法

構造函數中能夠傳一個參數，也能夠傳遞兩個參數。一個是字符串描述，另外一個是修飾符，好比g是全局修飾符，i是忽略大小寫，m是多行模式。

let reg1:RegExp = new RegExp("baidu.com")  //表示字符串規則裏含有abcefg
console.log(reg1)// 結果爲     /baidu.com/

let reg2:RegExp = new RegExp("baidu.com",'gi')
console.log(reg2) //結果爲     /baidu.com/gi

2.字面量法

簡而言之，直接寫正則表達式。

let reg3:RegExp = /baidu.com/
let reg4:RegExp = /baidu.com/gi

RegExp中的經常使用方法

RegExp對象包含兩個方法：test( )和exec( ),功能基本類似，用於測試字符串匹配。

test(string) ：在字符串中查找是否存在指定的正則表達式並返回布爾值，若是存在則返回 true，不存在則返回 false。
exec(string) : 用於在字符串中查找指定正則表達式，若是 exec() 方法執行成功，則返回包含該查找字符串的相關信息數組。若是執行失敗，則返回 null。

看一個例子：

let reg1:RegExp =  /baidu/i
let website:string = 'baidu.com.com'
let result:boolean = reg1.test(website)
console.log(result)    //true

這時候控制檯打印出來的是true，那麼咱們再來看一下exec的使用方法。

let reg1:RegExp =  /baidu/i
let website:string = 'baidu.com'
console.log(reg1.exec(website))
//[ 'baidu', index: 0, input: 'baidu.com' ]

輸出的結果變爲了[ 'baidu', index: 0, input: 'baidu.com' ]。

相關正則能夠查看一下這篇文章：http://www.runoob.com/regexp/regexp-tutorial.html

第11節: 面向對象編程-類的聲明和使用

類的出現可讓前端程序員抽象層次、增長維護性和複用性。固然這一系列的類的操做，咱們都叫他面向對象編程。TypeScript就是一個基於類的面向對象編程語言。

認識類與對象：

類是對象具體事務的一個抽象，對象是類的具體表現。

類的定義

認識TypeScript基於類的面向對象編程，就須要從一個簡單的類開始。

咱們模擬一個小姐姐的類，小姐姐須要有年齡，有姓名，會說「小哥哥好」。

看下面的例子：

class XiaoJieJie{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name
        this.age = age 
    }
    say(){
        console.log('小哥哥好')
    }
}
let jiejie:XiaoJieJie = new XiaoJieJie('小紅',18)
console.log(jiejie)
jiejie.say()

咱們先用class關鍵字聲明瞭一個類，並在裏邊聲明瞭name和age屬性。constructor爲構造函數。構造函數的主要做用是給類中封裝的屬性進行賦值。

第12節: 面向對象編程-修飾符

訪問修飾符

TypeScript語言和Java還有C#很像（由於我只會這兩個面向對象的語言），類中屬性的訪問能夠用訪問修飾符來進行限制。訪問修飾符分爲：public、protected、private。

public:公有修飾符，能夠在類內或者類外使用public修飾的屬性或者行爲，默認修飾符。
protected:受保護的修飾符，能夠本類和子類中使用protected修飾的屬性和行爲。
private : 私有修飾符，只能夠在類內使用private修飾的屬性和行爲。

咱們仍是寫一個小姐姐的類，可是咱們使用一些訪問修飾符來修飾。

class XiaoJieJie2{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex=sex
        this.name=name
        this.age=age
    }
    public sayHello(){
        console.log('小哥哥好')
    }
    protected sayLove(){
        console.log('我愛你')
    }
}
var jiejie2:XiaoJieJie2 = new XiaoJieJie2('女','熱巴',22)
console.log(jiejie2.sex)
console.log(jiejie2.name)   //報錯
console.log(jiejie2.age)    //報錯
jiejie2.sayHello()
jiejie2.sayLove()

只讀屬性修飾符

使用readonly修飾符將屬性設置爲只讀，只讀屬性必須在生命時或者構造函數裏被初始化（注意）。

咱們聲明一個man的抽象類，裏邊只有一個屬性sex，而且是隻讀。

class Man{
    public readonly sex:string = '男'
}
var man:Man = new Man()
man.sex='女'

在編輯器裏你就會發現報錯了，咱們就不強行編譯了。

第13節: 面向對象編程-繼承和重寫

類的繼承

繼承：容許咱們建立一個類（子類），從已有的類（父類）上繼承全部的屬性和方法，子類能夠新建父類中沒有的屬性和方法。

（1）先來建立一個父類。

class Jspang{
    public name:string
    public age : number
    public skill: string
    constructor(name:string,age:number,skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public interest(){
        console.log('玩')
    }
}
let jspangObj:Jspang = new Jspang('大頭爸爸',18,'web')
jspangObj.interest()

做了一個的抽象類，有姓名，有年齡，有技能，而後還有一個函數是興趣。類建立好以後咱們就進行了實例化。

（2）繼承父類

class JsShuai extends Jspang{
    public xingxiang:string = '帥氣'
    public zhuangQian(){
        console.log('一天賺了一個億')
    }
}
let shuai = new JsShuai("小頭兒子",15,'領導力')
shuai.interest()
shuai.zhuangQian()

extends關鍵字就是繼承的重點，是關鍵詞。TypeScript不支持多重繼承。

類方法的重寫

重寫就是在子類中重寫父類的方法。

好比：在子類中重寫父類中的interest方法。

class JsShuai extends Jspang{
    public xingxiang:string = '帥氣'
    public interest(){
        super.interest()
        console.log('創建電商平臺')
    }
    public zhuangQian(){
        console.log('一天賺了一個億')
    }
}

先是繼承了父類的方法，而後經過super關鍵字調用了父類的方法，實現了技能的增長。

第14節:面向對象編程-接口

在一般狀況下，接口是用來定義一些規範，使用這些接口，就必須實現按照接口中的規範來走。

認識接口

定義接口的關鍵字是interface。咱們如今就來定義一個接口，這個接口是用來規範丈夫的。

interface Husband {
    sex:string
    interest:string
}
let myhusband:Husband ={ sex:'男',interest:'看書、運動'}
console.log(myhusband)

咱們經過接口，定義了一個找老公的接口，而且給他了兩個必選項：性別和興趣愛好.

可選參數的接口

對老公的標準若是咱們有一些可選項，這些並非都須要顯示出來的，在有些狀況下，咱們只須要傳入部分參數。咱們可使用問號?的形式來設置可選參數。

好比:如今咱們還但願老公的標準，有一條是給我「買包包」，可是這個是隱喻的，不是直接顯示出來的。咱們修改咱們的接口。

interface Husband {
    sex:string
    interest:string
    maiBaoBao?:Boolean
}
let myhusband:Husband ={ sex:'男',interest:'看書、運動',maiBaoBao:true}
console.log(myhusband)

上面的代碼maiBaoBao選項就是可選的，能夠寫也能夠不寫。

規範函數類型接口

咱們還可使用接口來規範函數類型的接口，好比如今要找老公這件事，咱們規定有一些資源，而後咱們須要哪些資源，在函數中進行匹配，最後返回是否匹配成功。

interface  SearchMan{
    (source:string,subString:string):boolean
}
let mySearch:SearchMan

mySearch = function(source:string,subString:string):boolean{
    let flag =source.search(subString)
    return (flag != -1)
} 
console.log(mySearch('高、富、帥、德','胖')) //false

第15節:面向對象編程-命名空間

在製做大型應用的時候，爲了讓程序更加有層次感和變量之間不互相干擾，咱們可使用命名空間來構建程序。

舉個小例子：好比「德華」這件事，帥哥也有叫德華的，二師兄也有叫德華的。那咱們要如何區分呢？。

命名空間的使用

固然命名空間就是解決這個問題的，命名空間，又稱內部模塊，被用於組織有些具備內在聯繫的特性和對象。咱們來看一個例子：

namespace shuaiGe{
    export class Dehua{
        public name:string = '劉德華'
        talk(){
            console.log('我是帥哥劉德華')
        }
    }
}
namespace bajie{
    export class Dehua{
        public name:string = '馬德華'
        talk(){
            console.log('我是二師兄馬德華')
        }
    }
}
let dehua1:shuaiGe.Dehua   = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()

經過命名空間咱們很好的把程序變的清晰了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。