當前位置 博文首頁 > 信息技術智庫:? 就這?TypeScript其實并不難。ńㄗh收藏)?

    信息技術智庫:? 就這?TypeScript其實并不難。ńㄗh收藏)?

    作者:[db:作者] 時間:2021-09-13 19:02

    🎈 作者:不吃西紅柿

    🎈 簡介: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() 
    
zxbackspace的博客:Visual Studio Code 編輯后同步至 GitHub zxbackspace的博客:Python實現定時在微信群發送消息 zxbackspace的博客:Linux-UOS系統使用命令安裝Java hallobike的博客:從單幅圖像學習生成模型,可應用于多種圖像處 hallobike的博客:win10+tomcat 8的安裝和環境配置 hallobike的博客:Win10系統 Visual Studio 2015+openCV3.4.1安 hallobike的博客:win10系統下調通SeetaFace1.0人臉識別引擎 hallobike的博客:win10系統下Qt和VS環境配置問題 hallobike的博客:SeetaFace6人臉識別算法 hallobike的博客:人臉識別的介紹 hallobike的博客:win10系統下基于SeetaFace2.0的人臉識別系統的 hallobike的博客:神經網絡和深度學習的介紹 hallobike的博客:第三屆全國高校綠色計算系列大賽-任務挑戰組預 hallobike的博客:Python中PyTorch環境配置 hallobike的博客:數據結構課設(C++版) hallobike的博客:Win10下Tesseract-OCR安裝 hallobike的博客:使用OpenCV進行圖像全景拼接 hallobike的博客:讀COMPUTING MACHINERY AND INTELLIGENCE有感 hallobike的博客:利用OpenCV實現圖像修復 hallobike的博客:基于自適應顯著性的圖像分割 hallobike的博客:TensorFlow2.0簡介和線性回歸 hallobike的博客:邏輯回歸與交叉熵 hallobike的博客:梯度下降和多層感知器 hallobike的博客:多分類情況使用softmax函數激活 hallobike的博客:優化函數、學習速率、反向傳播 hallobike的博客:Dropout與過擬合抑制、函數式API hallobike的博客:使用遺傳算法計算函數最大值(C++代碼) hallobike的博客:python中使用matplotlib.pyplot畫函數圖像 hallobike的博客:網絡優化、超參數選擇、過擬合處理 hallobike的博客:使用tf.data數據轉換來訓練MNIST數據集 hallobike的博客:卷積深網絡CNN簡介 hallobike的博客:TensorFlow2.0的Eager模式 hallobike的博客:TensorFlow2.0批標準化 hallobike的博客:深度學習中常見的圖像處理任務 hallobike的博客:TensorFlow2.0中圖運算模式和GPU調用規則 hallobike的博客:圖像語義分割 hallobike的博客:語義分割網絡――FCN hallobike的博客:中藥槲皮素-AKT1與木犀草素IL6/VEGFA直接結合 hallobike的博客:Meat quality evaluation based on computer v hallobike的博客:京東開源FaceX-Zoo,一站式人臉識別研究平臺 hallobike的博客:目標檢測與分類API(TensorFlow官方) hallobike的博客:深度學習圖像處理相關文獻 hallobike的博客:圖像分類中的深度學習網絡匯總 hallobike的博客:一文看懂網絡中間層特征矩陣和卷積層參數 hallobike的博客:python移動文件到新的文件夾并重命名 hallobike的博客:解決OpenCV讀取視頻結束后報錯的問題 貓耳山在天邊:《Linux命令行與shell腳本編程大全》(第三版)讀 英雄哪里出來:??13萬字《C語言動漫對話教程(入門篇)》??(建議收 lyndon:CPU 上下文切換 lyndon:printf()、printk()、消息級別、日志級別 .net平臺的rabbitmq使用封裝demo詳解 C++類的特種函數生成機制詳解 Python調用百度AI實現圖片上表格識別功能 node自定義安裝更改npm全局模塊默認安裝路徑的步驟 帶你用C語言實現strtok和字符串分割函數 靜態網頁和靜態網頁性能比較 網頁標題優化原則和描述優化原則 php 怎么設置cookie記住密碼 php設置時區無效怎么辦 php __autoload 失效怎么辦 有關PHP調試的小技巧,看看吧! 從0開始:教你微信小店怎么開! 成本5元竟然賣50元 微信朋友圈賣面膜真黑啊 HashMap原理及put方法與get方法的調用過程 基于IDEA 的遠程調試 Weblogic的操作過程 UTC時間、GMT時間、本地時間、Unix時間戳的具體使用 如何利用SwiftUI實現可縮放的圖片預覽器 網站怎么利用內容更新雙重境界快速提高網站權重? php顯示繁體亂碼怎么辦 php不能開啟php_curl怎么辦
A级免费视频