技術胖TypeScript圖文視頻教程最污的技術課

TypeScript是一個應用程序級的JavaScript開發語言。（這也表示TypeScript比較牛逼，能夠開發大型應用，或者說更適合開發大型應用）
TypeScript是JavaScript的超集，能夠編譯成純JavaScript。這個和咱們CSS離的Less或者Sass是很像的，咱們用更好的代碼編寫方式來進行編寫，最後仍是有好生成原生的JavaScript語言。
TypeScript跨瀏覽器、跨操做系統、跨主機、且開源。因爲最後他編譯成了JavaScript因此只要能運行JS的地方，均可以運行咱們寫的程序，設置在node.js裏。
TypeScript始於JavaScript，終於JavaScript。遵循JavaScript的語法和語義，因此對於咱們前端從業者來講，學習前來駕輕就熟，並無太大的難度。
TypeScript能夠重用JavaScript代碼，調用流行的JavaScript庫。
TypeScript提供了類、模塊和接口，更易於構建組件和維護。

第02節：開發環境的安裝

已經對TypeScript有了大概的瞭解，個人博客全是注重實際，因此不講那麼多理論了，直接開始上手。這節咱們開始搭建TypeScript的開發環境。

點擊觀看免費視頻

1.安裝Node.js

安裝Node.js很是簡單，只要到Node官網下載一個最新版本就能夠了：nodejs.org/zh-cn/.在win… 安裝好後，能夠打開命令行工具，同時按下win+R，而後輸入cmd就能夠打開，打開後輸入

node -v
npm -v
複製代碼

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

2.安裝TypeScript包

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

npm install typescript -g
tsc --version
複製代碼

須要注意的是：若是你是mac電腦，要使用sudo npm install typescript -g指令進行安裝

3.編寫HelloWorld程序

初始化項目：進入你的編程文件夾後，可使用npm init -y來初始化項目，生成package.json文件。
建立tsconfig.json文件，在終端中輸入tsc --init：它是一個TypeScript項目的配置文件，能夠經過讀取它來設置TypeScript編譯器的編譯參數。
安裝@types/node,使用npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。
編寫HelloWorld.ts文件，而後進行保存，代碼以下。

var a:string = "HelloWorld"
console.log(a)
複製代碼

在Vscode的任務菜單下，打開運行生成任務，而後選擇tsc：構建-tsconfig.json，這時候就會生成一個helloWorld.js文件
在終端中輸入node helloWorld.js就能夠看到結果了。

**總結：**這節課雖然簡單，可是小夥伴們必定要動手操做，若是不操做，或者開發環境配置很差，下面的課程就很差學習了。

第03節：變量類型的那些事

這個文章好久沒有更新了，不少小夥伴剛開始看就放下了（我對不起大家），也有不少人認爲技術胖放棄了這篇文章。我是不會放棄的，讓咱們快複習一下前兩節的課程後，繼續學習吧。TypeScript最大的一個特色就是變量是強類型的，也就是說，在聲明變量的時候，咱們必須給他一個類型。好比：字符串、數字、布爾，枚舉........ 就用這節課全面瞭解一下typeScript的聲明類型。

點擊觀看免費視頻

TypeScript中的數據類型有：

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

Undefined類型

在js中當你定義了一個變量，但沒有給他賦予任何值的時候，他就是Undefined類型。這可能和你之前學的語言稍有不一樣，其餘語言會有個類型的默認值。

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

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

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

寫完後保存代碼，進行運行任務，而後生成demo01.js，在終端中使用node demo01.js來進行查看運行結果。控制檯輸出了undefined,跟咱們預想的如出一轍。

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：負無窮大。

string類型

由單引號或者雙引號括起來的一串字符就是字符串。好比：「技術胖」,'jspang.com'。看下面的代碼：

demo01_2.ts

var jspang:string = "技術胖 jspang.com"
console.log(jspang)
複製代碼

這時候控制圖就會乖乖的輸出技術胖 jspang.com.

boolean布爾類型

做任何業務邏輯判斷都要有布爾類型的參與，經過對與錯的判斷是最直觀的邏輯處理。boolean類型只有兩種值，true和false。

var b:boolean = true
var c:boolean = false
複製代碼

enum 類型

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

世界上人的類型：男人、女人、中性
一年的季節：春、夏、秋、冬，有四個結果。

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

demo01_3.ts

enum REN{ nan , nv ,yao}
console.log(REN.yao)  //返回了2，這是索引index，跟數組很想。
複製代碼

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

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

複製代碼

any類型

一個寫慣了前端的人，有時候不自覺的就分不清類型了。這是個很差的習慣，也是前端的痛，就由於這個緣由，JavaScript也屢次被人詬病說大型項目不適合用JavaScript。可是習慣一旦養成，改是須要時間和磨練的。TypeScript友好的爲咱們提供了一種特殊的類型any，好比咱們在程序中不斷變化着類型，又不想讓程序報錯，這時候就可使用any了。

var t:any =10 
t = "jspang"
t = true
console.log(t)
複製代碼

Null類型：

與 Undefined 相似，都表明空。Null 表明是引用類型爲空。意義不大，可是有用。後續學習中會使用到。

注意：剩餘的數組、元組、void 會在後續的章節中講解。

第04節：TypeScript的函數

好比如今咱們有個找小姐姐的需求：

找18歲的小姐姐
找28歲的小姐姐
找38歲的小姐姐

這個時候你會怎麼做？難道要把代碼寫3遍嗎？也許新手會這樣做的，可是做爲一個有多年開車經驗的老司機，技術胖確定會創建一個找小姐姐的機器，這就是函數。

點擊觀看免費視頻

正經點說是：

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

定義函數

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

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

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

須要注意的是：

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

形參和實參

形參的使用

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

function searchXiaoJieJie(age:number):string{
    return '找到了'+age+'歲的小姐姐' 
}
複製代碼

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

實參的使用

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

打個比方，咱們去按摩，須要找技師，當咱們尚未找的時候，這時候就是形參。當一個個技師站好了，讓你選。你最終選擇了一個，這就是實參。實參在真實使用時才傳遞。

var result:string = searchXiaoJieJie(age)
複製代碼

注意

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

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)

複製代碼

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)
複製代碼

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)
複製代碼

有了這個參數形式，咱們好像無所不能了，我愛編程，編程讓我幸福。好吧，這節課咱們就先到這裏，下節課咱們繼續找小姐姐去。不是，不是，是繼續學習。

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

上節課用參數的形式來區分了TypeScript裏函數的定義方法，但這並不能徹底包含全部的定義方法，因此再以聲明的形式，而不是參數來總結幾個方法。

點擊觀看免費視頻

函數聲明法

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

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

複製代碼

函數表達式法

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

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

console.log(add(1,4))

複製代碼

箭頭函數

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

var add = (n1:number,n2:number):number=>{
    return n1+n2
}

console.log(add(1,4))
複製代碼

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

經過兩節對TypeScript的學習，再加上若是你之前JavaScript的知識很紮實，你必定知道函數相似於一個封閉的盒子。盒子裏面的世界和外面的世界是不同的。有點像人的外在表現和內在性格，雖然相輔相成，相生相剋，可是徹底不同。定義在函數內部的變量與定義在函數外部的變量也是不同的，他們起做用的範圍也不同。

點擊觀看免費視頻

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

函數做用域演示

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

function zhengXing():void{
    var yangzi = '劉德華'
    console.log(yangzi)
}
zhengXing()
console.log(yangzi)
複製代碼

認識全局變量和局部變量

如今咱們對函數的做用域有了一點了解，那麼到底什麼是全局變量，什麼又是局部變量那？這個問題不少面試中都會提問，因此跟你的前途息息相關。

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

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

var yangzi = '劉德華'

function zhengXing():void{
    
    console.log('技術胖整造成了'+yangzi+'的樣子')
}
zhengXing()
console.log(yangzi)
複製代碼

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

局部變量和全局變量重名

當局部變量與全局變量重名的時候，在函數體內是局部變量起做用；若是重名，就有變量提高，這是一個坑，小夥伴們必需要注意

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

var yangzi:string = '劉德華'

function zhengXing():void{
    var yangzi:string = '馬德華'

    console.log('技術胖整造成了'+yangzi+'的樣子')
}
zhengXing()
console.log(yangzi)
複製代碼

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

var yangzi:string = '劉德華'

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

    console.log('技術胖整造成了'+yangzi+'的樣子')
}
zhengXing()
console.log(yangzi)
複製代碼

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

技術胖整造成了undefined的樣子
複製代碼

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

var yangzi:string = '劉德華'

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

    console.log('技術胖整造成了'+yangzi+'的樣子')
}
zhengXing()
console.log(yangzi)
複製代碼

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

let關鍵字變量的做用域

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

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

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

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

    console.log('技術胖整造成了'+yangzia+'的樣子')
    console.log('技術胖整造成了'+yangzib+'的樣子')
}
zhengXing()

複製代碼

這時候編譯後，咱們運行，你會發現是能夠執行的，而且打印到了控制檯正確的結果。這是由於ts編譯成js，他自動給咱們加了ES5的處理，ES5裏是沒有let關鍵字的，如今咱們再改一下編譯好的程序，你會發現yangzib這個關鍵字就找不到了（詳情看視頻吧）。

第07節:引用類型-數組

TypeScript中的數據分爲值類型和引用類型。值類型咱們前幾節課講的都是，可是引用類型咱們在這套視頻中尚未講解。咱們先來看一個引用類型的例子，來個初步印象。

點擊觀看免費視頻

初識引用類型

如今把「技術胖」虛擬成一個對象，而後來使用過它，具體看下面的代碼：

let jspang = {
    name:'技術胖',
    website:'jspang.com',
    age:18,
    saySometing:function(){
        console.log('爲了前端技術')
    }
}
console.log(jspang.name)
jspang.saySometing()
複製代碼

經過上面的案例，咱們看到引用類型是一種複合的數據類型，引用類型中封裝了不少對屬性，每一對屬性都有屬性名和屬性值。屬性名是字符串，屬性值是任意類型的數據。能夠經過變量名和屬性名獲取屬性的值或者調用屬性的方法。

在TypeScript中也給咱們提供了一些引用類型，例如：Array（數組）、String（字符串）、Date（日期對象）、RegExp（正則表達式）等。咱們將用幾節課的時間來學習這些用用類型，以及其中封裝的經常使用方法和屬性。

初始化數組的兩種方法

你學習這個課程必定對js中的數組有所瞭解，要使用一個數組，首先要學會建立一個數組。建立數組時能夠指定數組的容量，也能夠直接向數組中存儲數據。

聲明數組的方法

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

let arr1:number[ ]     //聲明一個數值類型的數組
let arr2:Array<string>  //聲明一個字符串類型的數組
複製代碼

給數組賦值

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

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

** 字面量賦值法**

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

複製代碼

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

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

構造函數賦值法

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

let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string> = new Array('jspang','技術胖','金三胖')
let arr4:Array<boolean> = new Array(true,false,false)
複製代碼

這兩種方法，均可以給數組進行賦值，在實際開發中使用哪一種方法都是能夠的。

認識元祖，一種特殊的數組

元祖是一種特殊的數組，元祖類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。好比，你能夠定義一對值分別爲string和number類型的元祖。元祖在實際開發中使用的很是少，你們瞭解一下就能夠了，不作過多介紹。

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

TypeScript中其它的數組知識跟JavaScript中的同樣，我再這裏就不磨磨唧唧的浪費你們時間了。感興趣的能夠寫一下JS中的數組方法。

在實際項目中數組的使用仍是很是很是多的，這也算是一種前端開發者的硬功夫，因此要多練習。

第08節:引用類型-字符串啊

經過上節學習你必定對引用類型有了一個很好的認識。在TypeScript中存在兩種類型的字符串：基本類型字符串和引用類型字符串。

點擊觀看免費視頻

字符串的兩種類型

基本類型字符串：由單引號或者雙引號括起來的一串字符串。
引用類型字符串：用new 實例化的 String類型。

那爲何會出現這種狀況那，有的小夥伴會認爲是否是當時JavaScript的開發人員腦子進水了。其實不是的，在前端開發，操做字符串是最廣泛的一種操做。JavaScript的開發人員爲了你們更容易的操做字符串，有了引用類型的字符串就能夠給字符串增長一系列方法了。

let jspang:string = '技術胖'
let jspanga:String = new String("jspang.com")
console.log(jspang)
console.log(jspanga)
複製代碼

編譯之後咱們使用node 運行這段代碼，你能夠看到控制檯輸出了的結果，這可能跟你內心想的不太同樣。

技術胖
[String: 'jspang.com']
複製代碼

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

字符串的長度length

使用length就能夠來獲取字符串的長度，固然做爲一個男人知道本身的長度是很是有必要的.....很差意思，我又開始污了。那咱們來看看下面獲取長度的列子。

let jspang:string = '技術胖'
let jspanga:String = new String("jspang.com")
console.log(jspang.length)
console.log(jspanga.length)
複製代碼

字符串經常使用的方法

爲了一些剛剛接觸前端的小夥伴，我仍是講解一下字符串的經常使用方法，若是你已經有了很好的JS的基礎，下面的內容能夠徹底跳過的。

查找字符串

從頭部查找字符串直接使用indexOf就能夠了。

基本語法：str.indexOf(subStr)

咱們來一個找小姐姐的例子：如今咱們寫一段話，這段話固然是一個字符串，好比：「清早起來打開窗，心情美美的，我要出去找小姐姐，心情美美的。」而後找出「小姐姐」的位置。

let something:string = "清早起來打開窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.indexOf(xiaoJieJie))   //19
複製代碼

若是咱們查找的字符串沒有找到，則返回-1。

從字符串尾部開始查找字符串的位置，使用lastIndexOf( )

let something:string = "清早起來打開窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.lastIndexOf(xiaoJieJie)) //19
複製代碼

須要注意的是，返回的都是字符串的下標。因此返回的值是相同的。並非返回從後到前的下標位置。這個新手很容易採坑。

截取字符串

基本語法以下：

str.substring(startIndex,[endIndex])
複製代碼

參數 startIndex 表示開始下標，endIndex 表示結束下標，endIndex 參數是可選的。該方法的做用是從指定的開始下標開始截取字符串，截取到 endIndex 的下標以前，若是沒有 endIndex，則截取到字符串結束。

咱們仍是上面的例子，如今咱們截取不一樣的字符串。

let something:string = "清早起來打開窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.substring(8))
console.log(something.substring(8,14))
複製代碼

替換字符串

基本語法以下：

str.replace(subStr,newstr);
複製代碼

substr 表示被替換的子串，newstr 表示要替換成的子串。該方法的做用是在 str 中從頭部開始找 substr 子串，找到以後，把 substr 用 newstr 替換掉。須要注意的是若是 str 中有多個 substr 子串，只有第一個 substr 子串會被替換掉。

如今咱們要把上面字符串裏的小姐姐替換成小哥哥，咱們看看具體代碼的實現。

let something:string = "清早起來打開窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.replace(xiaoJieJie,'小哥哥'))
複製代碼

就給你們講這麼多方法吧，若是你想了解更多操做，能夠看javascript相關的書籍來進行學習。下節課咱們來看看引用類型的-日期相關的操做。

第09節:引用類型-日期對象

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

點擊觀看免費視頻

建立日期對象

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

1.不傳遞任何參數

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

let d:Date = new Date()
console.log(d)
複製代碼

這時候運行node的結果以下：

2018-09-06T06:48:12.504Z
複製代碼

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/09/06 05:30:00')
let d2:Date = new Date('2018-09-06 05:30:00')
let d3:Date = new Date('2018-09-06T05:30:00')
console.log(d1)
console.log(d2)
console.log(d3)
複製代碼

固然，他們打印出來的結果時徹底相同的，因此在開發中你不用太過於糾結使用哪一種方式進行聲明。

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之間的整數。

至於Date類型的方法，跟JavaScript徹底同樣，因此我就不在重複講述了，要不就變成講JavaScript了。

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

前端對用戶輸入的信息進行驗證，好比手機號，年齡，三圍（我又要開始污了）。用於驗證最好最強大的手段目前爲止就是正則表達式。TypeScript的RegExp類表示正則表達式。這節咱們就學習一下TypeScript裏的正則表達式吧。

認識正則表達式

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

點擊觀看免費視頻

構造函數法

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

舉個例子：

let reg1:RegExp = new RegExp("jspang")  //表示字符串規則裏含有jspang
console.log(reg1)
let reg2:RegExp = new RegExp("jspang",'gi')
console.log(reg2)
複製代碼

其實如今打印出來的就是字面量的賦值方法。咱們能夠在視頻中看到輸出的結果。

字面量法

其實構造函數的方法我我的用的是比較少的，我都會使用字面量法來聲明正則表達式。

let reg3:RegExp = /jspang/
let reg4:RegExp = /jspang/gi
複製代碼

RegExp中的經常使用方法

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

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

來看一個test的例子：

let reg1:RegExp =  /jspang/i
let website:string = 'jspang.com'
let result:boolean = reg1.test(website)
console.log(result)    //true
複製代碼

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

let reg1:RegExp =  /jspang/i
let website:string = 'jspang.com'
console.log(reg1.exec(website))
//[ 'jspang', index: 0, input: 'jspang.com' ]
複製代碼

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

剩下的就是正則表達式的語法了，這個好像是學程序的都要進行學習。若是你還不屬性，能夠查看一下這篇文章：www.runoob.com/regexp/rege…

正則在工做中的用法不少，須要你慢慢積累經驗。

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

TypeScript提供了強大的類的支持，做爲一個程序員必定要學會類的使用，由於只有會了類才能夠new出對象來，否者可能會單身一生哦（開個玩笑）。類的出現可讓前端程序員抽象層次、增長維護性和複用性。固然這一系列的類的操做，咱們都叫他面向對象編程。TypeScript就是一個基於類的面向對象編程語言。

點擊觀看免費視頻

認識類與對象

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

舉個例子，好比說，有人給你介紹對象，會問你的要求。那麼，你的要求是：身高165以上，體型偏瘦，長頭髮，大眼睛。從事正當穩定的工做，會作飯等等。這些要求就是對你心中理想伴侶的一個抽象，就是類。介紹人按照你的要求給你找的這些女生，就是類的實例，就是對象。

類的定義

認識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爲咱們準備了豐富的修飾符，小夥伴們能夠和我一塊兒學習一下修飾符。

點擊觀看免費視頻

訪問修飾符

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節: 面向對象編程-繼承和重寫

我錄這節課的時候，炎熱的夏天正好退去，秋高氣爽，天藍雲白，又到了人類繁衍生息的季節(污是必須的)。那咱們就講講繁衍的事情......繼承和重寫。

點擊觀看免費視頻

類的繼承

在使用TypeScript這門語言時，一個最重要基本功就是面向對象編程，那對類的擴展就變的格外重要，擴展常用的手段就是繼承。

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

咱們先來建立一個父類，這個父類徹底抽象了技術胖的特色。

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()
複製代碼

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

如今技術胖要繁衍生息了，跟準備生個兒子（也就是咱們說的子類）。那個人兒子必定要比我強啊，他不只徹底繼承了個人基因，還增長了帥氣的屬性和賺錢的本領。

咱們看看如何用程序實現。

class JsShuai extends Jspang{
    public xingxiang:string = '帥氣'
    public zhuangQian(){
        console.log('一天賺了一個億')
    }
}

let shuai = new JsShuai("技術帥",5,'演講')
shuai.interest()
shuai.zhuangQian()
複製代碼

extends關鍵字就是繼承的重點，它至關於咱們撲倒女神，小蝌蚪從身體內迸發的一瞬間，因此咱們必定要牢記這種感覺.....不，是關鍵詞.

可是有一點須要咱們注意，TypeScript不支持多重繼承。

類方法的重寫

重寫就是在子類中重寫父類的方法。例如，個人兒子「技術帥」發現興趣愛好是找小姐姐，完成不了「」一天賺一個億「」的目標，它須要多個興趣，開平臺網站。這時候咱們就用到了重寫。看下面的列子代碼：

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

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

這節課就到這裏，但願小夥伴們聽過以後都鍛鍊一下生孩子的技能。不是,是寫代碼的技能，實際寫兩遍。

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

做爲一個前端，和後端最多的交流就是向後端要接口，而這些接口是如何定義的，有時候咱們好像不聞不問。其實前端也有接口的定義，特別若是你要靠着前端技術做一個全棧，那接口的編寫也是必不可少的一項技能。

點擊觀看免費視頻

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

在面向對象的語言中，術語interface常常被用來定義一個不包含數據和邏輯代碼可是用來簽名定義了行爲的抽象類型。

認識接口

定義接口的關鍵字是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()
複製代碼