typescript 入門教程一

從今天開始,持續更新typescript入門教程系列....

目前ts越來越火,主流的前端框架,好比angular,vue 3均是採用ts來編寫,所有很多公司的項目都是用ts來寫的,所有是時候認真學習ts
ts來源於微軟公司,越是大的公司,越是大的項目,越是推薦使用ts來編碼,ts是js的超集,在js上面增加一些內容,相對於js,ts具有以下的優點:

  • 支持面向對象方法,之前js實現面向對象是通過prototype,function實現的,有點繁瑣。ts提供了Class,Interface
  • 類型檢查。ts能夠在編譯的階段就可以發現錯誤,減少bug率。在實際開發中,需要將ts編譯成js,而且目前瀏覽器支持的是es5版本
  • 自帶文檔特性。通過類型註解,很容易知道某一個參數或者變量是什麼類型
  • IDE或者是編輯工具支持良好(自動完成提示)

總的來說ts=js+type+(一些其他特性:枚舉,接口等)
使用ts之前,首先需要安裝node,安裝好node之後會自帶npm,npm是node包管理工具,其可以下載一些社區常用的包,我們通過npm來安裝ts編譯工具typescript , npm install typescript -g
編寫一個ts文件:index.ts,通過下面命令行工作tsc index,.ts,就可以將index.ts編譯成index.js,最後在瀏覽器中運行(ts是沒法在瀏覽器中運行的,必須進行編譯)

var a:number
a=10
console.log(a)

上面就是定義了a的變量類型是number類型,如果這時候傳string類型賦值給a,編譯器就會保存
數據類型主要有:

  • number,string,boolean,Array

示例,定義數組有兩種方法:

let myArr1:string[]=["st1","st2"]
let myArr2:Array<string>=["st1","st2"]

也可以給函數參數添加類型限制,這時如果傳入的參數個數和類型和定義的形參不匹配,編譯時候就會報錯:

const add=(a:number,b:number)=>{
    return a+b
}
console.log(add(2,4))

也可以爲函數返回值添加類型

const add=(a:number,b:number):number=>{
    return a+b
}

也可以給函數加上默認的參數,如果函數的返回值是空,可以設置返回值類型是void

const add=(a:number=8,b:number=10):void=>{
    console.log(a+b)
}

也可以設置可選參數,如下:這時候b可以傳可以不傳

const add=(a:number=8,b?:number):void=>{ 
    console.log(a+b)
}

如果需要將一個變量設置爲任何類型。可以使用any,但是儘量少用any

let a:any;
a=10;
a="str"
a=[1,2,3]

如果需要設置一個變量爲兩種或者更多類型,可以使用聯合類型的方式,|

let a:number | string

很多語言具有面向對象的屬性,包括ts,面向對象三大屬性:封裝,繼承,多態了,可以將現實生活中的一切內容看成類或者對象一個Class,通過new()得到一個對象,一個對象有屬性和方法(方法就是對屬性進行操作)

class Person{
    // 構造方法
    constructor(fn:string,ln:string){
        this.firstName=fn
        this.lastName=ln
    }
    firstName:string;
    lastName:string;
 }

通過extends關鍵字,可以讓一個類繼承已有類的屬性和方法:

class Person{
    firstName:string
    lastName:string
 }
 class Programmer extends Person{
 }
 let p=new Programmer()
 p.firstName='jack'
 p.lastName='chen'
 console.log(p)

子類如果調用某個方法,如果在子類中已有該方法,則直接調用該方法,如果沒有,則去調用父類的方法,如果強制調用父類的方法,可以把this換成super
類成員的可見性主要有public,private,protected
public:在類中和類的外面均是可以調用,默認就是public
private:只能在類中調用,子類和類外面是不能調用的,如果要調用私有的屬性或者方法,可以通過公有的方法來訪問,對外暴露公有的方法,子類也是可以繼承父類的私有的方法和屬性,但是必須通過父類暴露的公有方法進行訪問
protected:只能在類中或者是子類中調用 ,即使子類和父類生成的對象也是不能訪問
總的來說權限範圍:public>protected>private
未完待續。。。


*如果覺得本文有收穫,請我喝杯咖啡吧,你們的支持是我最大的動力*
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章