? 就這？TypeScript其實并不難！（建議收藏）?

🎈 作者：不吃西紅柿

🎈 簡介：CSDN博客專家🏆、藍橋簽約作者、Python領域優質創作者、資訊技術智庫公眾號創建者?，技術交流、面試刷題盡管關注咨詢我，

熱門專欄推薦：

🥇 知識集錦專欄：大資料生態硬核學習資料 & 面試真題集錦
🥈 資料倉庫專欄：數倉發展史、建設方法論、實戰經驗、面試真題
🥉 Python專欄：Python相關黑科技：爬蟲、演算法、小工具

（優質好文持續更新中……）?

創作不易，點贊👍 關注💪 鼓勵一下西紅柿吧！

---

目錄

一、什么是 TypeScript？

二、TS和JS的對比

三、TypeScript小課堂

01 TypeScript開發環境的構建

02 開啟我們的helloWorld.ts

03 TS變數型別那些事

04 Ts函式

05 函式的三種定義方式

06 變數的作用域，函式劃分

07 參考型別的陣列

08 參考型別的字串

09 參考型別的日期物件

10 參考型別的正則運算式

11 面向物件編程-類的宣告和使用

12 面向物件編程-類的修飾符

13 面向物件編程-基礎和重寫

14 面向物件編程-介面知識

15 面向物件編程-命名空間

---

一、什么是 TypeScript？

• TypeScript 是一種由微軟開發的自由和開源的編程語言，它是 JavaScript 的一個超集，擴展了 JavaScript的語法，

• TypeScript是屬于編程語言，靜態型別和面向物件，

• TypeScript遵循最新的ES6、ES5規范，它擴展了JS的語法，

• TypeScript可以讓JS開發大型企業應用，即適用于大型應用 或 多人協作

最新的Vue、React也可以集成TypeScript

• 谷歌也在大力支持TypeScript的推廣，谷歌的angular2.x就是基于TypeScript語法

二、TS和JS的對比

1. TS是應用程式

2. TS是JS超集 (less sass---->css) (ts---->js)

3. 跨平臺 + 開源

4. 開始于JS,終止于JS

5. 重用JS，甚至可以引入js流行的庫 echats

6. TypeScript 有 類 介面 模塊

三、TypeScript小課堂

注意：安裝TypeScript環境之前要安裝node環境

01 TypeScript開發環境的構建

安裝node，安裝完之后在cmd查詢 node npm版本號

顯示版本號則說明安裝成功

在終端輸入

npm install typescript -g 

安裝成功之后輸入如下命令，查看版本號

tsc --version  

在終端輸入如下命令進行初始化

npm init -y 

成功之后會出現package.json檔案，-y表示默認

package.json不需要修改什么，因為我們接下來主要是學習語法

接下來輸入如下命令，會生成tsconfig.json檔案，

tsc --init 

這個檔案是我們寫ts檔案之后如何編譯成為js檔案的一個組態檔

接下來我們在終端輸入以下命令

npm install @types/node --dev-save 

它是在我們的開發環境中使用的，它主要解決的是模塊的宣告檔案問題

安裝成功之后就可以查找其版本號啦

02 開啟我們的helloWorld.ts

以上的準備作業弄好之后，我們就可以開始學習我們的ts啦

新建一個檔案helloWorld.ts，就開始在里面寫我們的ts代碼啦

// ts支持強型別，所以我們宣告一個變數a可以給它加上型別var a:string = "HelloWorld"  console.log(a) 

那下一步是什么呢？

就是我們的ts檔案要轉成js檔案

在終端那里選擇運行生成檔案，選擇tsc：構建-tsconfig.json這個選項

注意

• 路徑里面最好不要有中文路徑

• 如果遇到以下報錯資訊，可以使用管理員身份運行 PowerShell， 然后輸入 set-executionpolicy remotesigned，然后選擇yes

這樣就成功解決這個問題啦，我們繼續往下學

構建成功之后它會自動生成一個js檔案,它是嚴格模式，是在tsconfig.json配置的

有了這個檔案，我們就可以在我們的終端輸入以下命令運行檔案

node helloWorld.js 

可以發現被成功列印出來了~

03 TS變數型別那些事

下面我們抽取一些型別來實踐一下吧

• undefined

我們新建一個檔案（demo003.ts）開始我們的測驗

var age:number  console.log(age) 

和上面說的一樣，在終端那里選擇運行生成檔案，選擇tsc：構建-tsconfig.json這個選項來生成我們的demo003.js檔案

然后我們運行我們的檔案

或者在終端輸入以下命令列，實作自動構建

npm tac watch 

我們會發現輸出了undefined

這個時候如果我們給age賦值，運行之后就會顯示出來啦，

var age:number = 18; 

• number

我們的number不僅支持整 數，還支持浮點型數字

var age:number = 18;  var height:number = 165;  console.log(age)  console.log(height) 

• NaN(No a Number)

var age:number = NaN  var height:number =  165;   console.log(age)  console.log(height) 

• string

單引號和雙引號都是可以的

var hls:string =  "hls喜歡 邁克杰克遜"  console.log(hls)  console.log('-------------') var cola:string =  'cola也 喜歡 邁克杰克遜'  console.log(cola)  

• boolean

(ts中布林值只有true和false兩個)

(0和null在ts中不表示false了)

var b:boolean = true    var c:boolean = false   console.log(b)  console.log('-------------')  console.log(c) 

• enum 列舉型別

列舉型別 enum 比如：人有男人，女人，中性 四季有春夏秋冬

enum REN{man,woman,neutral}  console.log(REN.man)  

這里列印出來的是下標，第一個是0（也就是說從零開始）

如果我們要列印出來內容，應該怎么操作呢？

console.log('-------------')   enum REN{man='男人',woman='女人',neutral='妖'}  console.log(REN.man) 

用等于賦值過去即可（注意這里要用=）

• any 萬能型別

它能夠存放任意型別，并且成功輸出

var t:any =10  t=true   t='hls'  console.log('-------------')  console.log(t)

ts和js不同：ts需要宣告我們的變數型別

04 Ts函式

函式定義：

• 把功能相近的需求封裝成一個獨立的代碼塊

• 然后每次傳入不同的變數

• 變數不同，所以呈現的結果就不同

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

在這里我們只需要手動改變age的值就可以了

要注意的地方

• 必須用function這個關鍵字來定義一個函式

• 函式名與變數名是一樣的(都需要遵循加型別的規則)

• 函式的引數可有可無

• 如果引數有多個，用逗號隔開

形參(形式上的引數)和實參(真實傳遞的引數)

• 可選引數的函式

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

• 有默認引數的函式

function searchXiaoJieJie(age:number=18,status:string='小蠻腰'):string {    let yy:string=''    yy='找到了'+age+'歲'    if(status!=undefined){      yy = yy +status    }  return yy+'的小姐姐'  } var result:string=searchXiaoJieJie()  console.log(result) 

如果手動設定傳入也是可以的

var result:string=searchXiaoJieJie(22,'大長腿') console.log(result)  

當我們的需求是不確定的，我們可以這樣寫

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

05 函式的三種定義方式

• 函式宣告法(常用)

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

• 函式運算式法

先宣告一個變數，把這個函式賦值給變數

這個變數就是函式名

通過變數名就可以呼叫這個函式

注意：定義之后要呼叫，否則會報錯

var add = function(n1:num ber,n 2:number):number{    return n1+n2  }console.log(add(1,3)) 

• 箭頭函式完全支持ES6

利于回呼

函式都是有作用域的

var add=(n1:number,n2:number):number=>{     return n1+n2 //this   }console.log(add(3,5) 

06 變數的作用域，函式劃分

function zhengXing():void{    var yangzi:string = '劉亦菲'    console.log(yangzi)  }zhengXing()  console.log(yangzi) 

以上例子說明了，在函式體內，是封閉的

無論是全域宣告，還是什么宣告，都只在函式體內起作用

在外部，所以是不起作用的

什么是全域變數？(函式體外宣告的變數) 什么是區域變數？(函式體內宣告的變數)

var yangzi:string = '劉亦菲'  function zhengXing():void{    console.log('我的女神是'+yangzi)  }zhengXing()    console.log(yangzi) 

小坑:重名會發生變數提升

當重名的時候，內部變數會起作用

var yangzi:string = '劉亦菲'  function zhengXing():void{    var yangzi:string = '黃圣依'    console.log('我的女神是'+yangzi)  }zhengXing()  console.log(yangzi) 

終端顯示結果：

var yangzi:string = '劉亦菲' function zhengXing():void{    //當在函式體內未宣告就使用，會顯示undefined   console.log('我的女神是'+yangzi)   var yangzi:string = '黃圣依'   console.log('我的女神是'+yangzi) }zhengXing() console.log(yangzi)

其實上面那一段變數提升相當于下面的寫法

var yangzi:string = '劉亦菲'  function zhengXing():voi d{    var yangzi:string     console.log('我的女神是'+yangzi)     yangzi = '黃圣依'    console.log('我的女神是'+yangzi)  }zhengXing()  console.log(yangzi) 

所以說，為宣告之前列印會顯示undefined

所以記住第一句列印的是undefined，第二句列印的是函式體內宣告的變數

js早期只有區域變數和全域變數

但是比如我們的大眾語言，java，c++

她們的變數都是以大括號{}為區域劃分的

所以js經常被吐槽說，js不適合大型專案開發

因為很容易引起記憶體溢位

因為它沒有變數作用域

劃分只能靠函式來進行，是非常不方便的

所以在我們的ES6，就使用了let

let關鍵字就可以宣告函式的作用域是塊級作用域

function zhengXing():void{    var yangzia:string="朱茵"    {    let yangzib:string='鞏俐'      console.log('我的女神是'+yangzib+'嗎')    }  console.log('我的女神是'+yangzia+'嗎')    console.log('我的女神是'+yangzib+'嗎')  }zhengXing() 

我們進行構建時終端會報錯錯誤

但是我們運行檔案之后會發現，它還是正常輸出了，為什么？

這是一個小坑：為什么會這樣？

因為它自動幫我們把let轉譯成了var

我們在構建編譯好的js檔案中可以查到

我們嘗試在js檔案中，把var修改成let

我們會發現會報錯，說明我們的塊級作用域還是起作用了

07 參考型別的陣列

我們之前講的都是值型別

比如給一個變數賦一個數值型的值

或者說給一個變數賦一個字串

// 類let person={   name:'hls',    age:'18',    skill:'web',    saySomething:function(){     console.log('不忘初心，砥礪前行')    }}console.log(person.name)  person.saySomething() 

陣列參考型別----比如：array String Date RegExp

陣列的初始化，也就是宣告

下面是陣列的兩種宣告方法

let arr1:number[] //數值型別   let arr2:Array//陣列型別變成了布爾型別 

下面我們看看陣列賦值的兩種方式

• 字面量賦值法

let arr1:number[]=[]   let arr2:number[]=[1,2,3]  ?let arr3:Array<string>=['香蕉','橘子','菠蘿','草莓']  let arr4:Array<boolean>=[true,false,false] 

• 建構式賦值法(建構式:用new來賦值)

let arr1:number[]=new Array()  let arr2:number[]=new Array(1,2,3)  ?let arr3:Array<string>=new Array('香蕉','橘子','菠蘿','草莓')  let arr4:Array<boolean>=new Array(tr ue,false,false)

這兩種方法都闊以，都很直觀鴨

有一種特殊的陣列叫做元組

元組可以在我們的ts中賦值兩種型別

在開發中，元祖還是比較少用的，所以此處略

08 參考型別的字串

基本型別字串：單引號或雙引號字符引起來的字串

參考型別字串：用new實體化的String型別字串

let hls:string = 'hello'  let cola:String = new String('WO')  console.log(hls)  console.log(cola) 

小結：用參考型別或者基本型別宣告的字串，屬性和方法的用法都是一樣的

為什么要有參考型別和基本型別兩種型別呢？

其實很早之前只有普通型別

但是我們的前端人員經常操作我們的string型別

那么為了擴展方法，就加了參考型別

下面我來看看陣列最基本的屬性：length

let hls:string = 'hello'  let cola:String = new String('WO')  ?console.log(hls.length)  console.log(cola.length) 

這個屬性經常使用，所以最好記住

1. 查找字串 indexOf

let something:string='這類框架主要原理就是將 APP的?部分需要動態變動的內容通過H5來實作'  let xiaojiejie:string = 'H5'  console.log(something.indexOf(xiaojiejie)) 

2. 從后面開始查找字串 lastIndexOf（查無的話就回傳-1）

let something:string='這類框架主要原理就是將APP的?部分需要動態變動的內容通過H5來實作'  let xiaojiejie:string = 'H'  console.log(something.lastIndexOf(xiaojiejie)) 

3. 截取字串

let something:string='這類框架主要原理就是將APP的?部分需要動態變動的內容通過H5來實作'  let xiaojiejie:string = 'H'  console.log(something.substring(8)) 

let something:string='這類框架主要原理就是將APP的?部分需要動態變動的內容通過H5來實作'  let xiaojiejie:string = 'H'  console.log(something.substring(8,4)) 

4. 替換字串:replace

let something:string='多學習，多練習，HTML，css，javascript'  let xiaojiejie:string = 'typecript'  console.log(something.replace('javascript','typecript')) 

09 參考型別的日期物件

• 不傳遞任何引數

let d:Date = new Date()  console.log(d)  

• 傳遞一個整數

let d1:Date = new Date(1000)//1970-01-01 00:00:00  let d2:Date = new Date(2000)//1970-01-01 00:00:00  console.log(d1)  console.log(d2)

• 傳遞一個字串

let d1:Date = new Date('2020/02/27 14:57:00')  let d2:Date = new Date('2020-02-27 14:57:00')  let d3:Date = new Date('2020-02-27T14:57:00')  console.log(d1)  console.log(d2)  console.log(d3) 

還有更多語法如下，幾乎和js是一樣的，不贅述

let d:Date = new Date('year','month','day','hour','minute','second','microsecond') 

10 參考型別的正則運算式

RegExp 和字串很像

• 建構式宣告法

let reg1:RegExp=new RegExp("helloworld")  console.log(reg1)  let reg2:RegExp=new RegExp("helloworld",'gi')  console.log(reg2) 

• 字面量宣告

let reg11:RegExp=/helloworld/  console.log(reg11)  let reg22:RegExp=/helloworld/gi  console.log(reg22)

正則運算式常用的兩個方法

// test(string)  let reg1:RegExp=/helloworld/i  let website:string='helloworld.com'  let result1:boolean=reg1.test(website)  console.log(result1)  ?//exec(string)   let reg1:RegExp=/helloworld/i  let website:string='helloworld.com'  // let result1:boolean=reg1.test(website)  console.log(reg1.exec(website)) 

11 面向物件編程-類的宣告和使用

要學會使用類，才能new出物件來

類是物件具體事物的一個抽象

物件是類的具體表現

類的出現-增加代碼復用性和維護性

一系列類的使用，都叫做面向物件編程

ts就是基于類的面向物件編程語言

如何宣告類？大駝峰命名法

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('HLS',18) console.log(jiejie) jiejie.say()  

12 面向物件編程-類的修飾符

• public 共有的

• protected

• private

class XiaoJieJie{   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 jiejie:XiaoJieJie=new XiaoJieJie('女','亦舒',22) console.log(jiejie.sex) // console.log(jiejie.name) // console.log(jiejie.age) jiejie.sayHello() // jiejie.sayLove()

注意私有的是不能訪問的，VSCode會直接提示你

只讀修飾符 readonly 不能改

• 只讀屬性必須在宣告屬性時就直接給它賦值，不要給空，它會報錯

class Man{   public readonly sex:String='男' }var man:Man=new Man() //不能改,改的話會報錯man.sex='女' 

13 面向物件編程-基礎和重寫

類必須有擴展能力

繼承：允許我們創建一個類(子類)，從已有的類(父親)上繼承所有的屬性和方法，子類可以新建父類中沒有的屬性和方法

父類：

class Hls{   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 hlsObj:Hls = new Hls('離散',18,'coding') hlsObj.interest() 

子類繼承：

ts不支持多重繼承

class Cola extends Hls{     public xingxiang:string='魅力'     public zhuangQian(){       console.log('賺了一個億')     }}let cola=new Cola('演員',3,'表演') cola.interest() cola.zhuangQian()

重寫interest方法

class Cola extends Hls{   public xingxiang:string='魅力'   public interest(){     super.interest()     console.log('建立電商平臺')   }  public zhuangQian(){    console.log('賺了一個億')  }}let cola=new Cola('演員',3,'表演') cola.interest()    

14 面向物件編程-介面知識

介面:定義規范，就是規劃程式化的東西

interface Hasband{   sex:string   interest:string   //介面可選引數，有個問號  maiBaoBao?:Boolean }let myhusband:Hasband={sex:'男',interest:'看書',maiBaoBao:true} console.log(myhusband) 

定義一個函式

interface SearchMan{   (source:string,subString:string):boolean }//宣告let mySearch:SearchMan mySearch=function(source :string,subString:string):boolean{   //宣告一個內部變數flag進行search(查找)  let flag=source.search(subString)   //不等于-1 就是true  //等于-1 就是false  return (flag!=-1) }//呼叫console.log(mySearch('高，富，帥，德','胖')) 

介面還可以規范類，和規范函式差不多

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:bajie.Dehua=new bajie.Dehua() dehua1.talk() dehua2.talk()  

熱門專欄推薦：

? 知識集錦專欄：大資料生態硬核學習資料 & 面試真題集錦 ?
? 資料倉庫專欄：數倉發展史、建設方法論、實戰經驗、面試真題 ?
? Python專欄：Python相關黑科技：爬蟲、演算法、小工具 ?

點贊、關注不迷路！！