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
未完待續。。。