typeScript入門基礎(chǔ)介紹

第typeScript入門基礎(chǔ)介紹目錄一、安裝TS二、Vscode自動編譯ts三、入門TS基礎(chǔ)數(shù)據(jù)類型接口類TS的特點：

始于javaScript歸于javaScript。強大的類型系統(tǒng)。先進的javaScript。適合開發(fā)大型項目，編譯成純js代碼，js可以運行在任何瀏覽器上。

typeScript是區(qū)分大小寫的一門語言，本篇文章主要帶你了解ts的安裝，環(huán)境配置，以及簡單的入門。

一、安裝TS

使用之前需要安裝：

npminstall-gtypescript

安裝完成之后，使用tsc-v檢查安裝之后的版本。

第一個ts文件：01.ts，代碼如下：

(()={

functionshow(msg){

return"字符串："+msg

letstr="前端"

console.log(show(str))

})()

通過script引入html文件

script

src="./01.ts"/script

頁面正常運行，因為ts能夠支持js語法，所以文件內(nèi)直接引入使用是沒問題的，除此之外，還可以使用node命令運行該文件，也是可以正常執(zhí)行的。

如果此時，在ts文件內(nèi)加入ts語法：

//添加類型支持

(()={

functionshow(msg:string){

//添加string的意義在于傳入的msg值只能是字符串，不可以是其他類型

return"字符串："+msg

letstr="前端"

console.log(show(str))

})()

此時瀏覽器運行時，會報錯，無法繼續(xù)執(zhí)行。

此時就需要將ts文件編譯為js文件，打開命令行工具，運行：

tsc01.ts

運行后會自動生成一個01.js文件，查看js代碼內(nèi)容如下：

functionshow(msg){

return"字符串："+msg;

(function(){

varstr="前端";

console.log(show(str));

})();

總結(jié)：

ts文件內(nèi)直接輸入js文件，在html文件引入ts文件，在瀏覽器內(nèi)是可以直接運行的。ts文件內(nèi)如果有ts語法代碼，若在html文件內(nèi)引入ts文件，直接在瀏覽器運行會報錯，此時需要先編譯為js文件。在ts文件函數(shù)中的形參，如果使用了某個類型進行修飾，那么在最終編譯的js文件中是沒有該類型的。ts內(nèi)地let修飾符，編譯后的js文件內(nèi)變成了var。

二、Vscode自動編譯ts

新建一個項目目錄，當前目錄下打開命令行工具，執(zhí)行

tsc--init

自動生成tsconfig.json文件，代碼如下：

{

"compilerOptions":{

"target":"es2016",

"module":"commonjs",

"outDir":"./js",

"esModuleInterop":true,

"forceConsistentCasingInFileNames":true,

"strict":true,

"skipLibCheck":true

}

注：

outDir表示的是ts文件編譯之后生成js文件的存放目錄。如果屬性值之后的文件夾不存在時，就會自動創(chuàng)建。

strict表示是嚴格模式。

新建index.ts文件，代碼如下：

(()={

functionshowStr(str:string){

returnstr

leta:string="前端人"

//調(diào)用函數(shù)

console.log("a",showStr(a));

})()

類型注解：函數(shù)地形參后加修飾符，用來限制傳入?yún)?shù)的類型，string表示只能為字符串類型。

在命令行運行

tsc-w

tsc-watch

自動生成js文件夾，包括index.js文件。運行該命令后，只要ts文件發(fā)生改變，就會自動編譯。

一切運行正常，沒有任何錯誤。

如果調(diào)用函數(shù)的參數(shù)傳為數(shù)值時：

console.log(showStr(123));

此時編輯器內(nèi)報錯：類型number的參數(shù)不能賦給類型string的參數(shù)。

ts能夠智能提示問題，是因為ts提供了靜態(tài)代碼分析，可以分析代碼結(jié)構(gòu)和提供的類型注解。

但是tsc編譯的時候，雖然會提示錯誤，但它依舊會編譯為js文件，js在執(zhí)行的時候不會報錯，因為js是弱類型語言。

三、入門TS

基礎(chǔ)數(shù)據(jù)類型

為布爾值類型。如：letisDone:boolean=false;number為數(shù)值類型，ts能夠支持二、八、十、十六進制數(shù)據(jù)。如：letdecLiteral:number=6;string為字符串類型。如：letname:string=bob表示數(shù)組類型。數(shù)組名后加元素類型[]加數(shù)組值。如：letlist:number[]=[1,2,3];元組類型。如：letarr:[string,number,boolean]=[str,1,true]枚舉，為一組數(shù)值賦予友好名字。如：enumColor{red,green,blue}任意類型，有時不確定傳入的值是什么類型，就可以使用any類型。如：letnotSure:any=1空值，與any正好相反，表示沒有任何類型。如：functionshow():void{}null和undefinednever類型，表示永不存在的值。functionerror(message:string):never{thrownewError(message);}

接口

接口簡單點講就是一種約束。在ts里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

TypeScript中的接口是一個非常靈活的概念，除了可用于對類的一部分行為進行抽象以外，也常用于對「對象的形狀(Shape)」進行描述。

使用形式：

(()={

//定義一個接口

interfacePerson{

firstName:string,//添加類型限定

lastName:string

functionshowFullName(person:Person){

//添加類型限定之后，內(nèi)部會自動提示接口內(nèi)的字段

returnperson.firstName+'_'+person.lastName

constp={

firstName:"Hello",

lastName:"World"

console.log("姓名",showFullName(p));

})()

如果把p中的firstName注釋掉，就會報錯，提示：

在本實例中，接口的意義就是限定傳入showFullName函數(shù)內(nèi)的數(shù)據(jù)屬性的限制。

接口優(yōu)點：自動檢測傳入的數(shù)據(jù)是否符合接口規(guī)范，如果不符合則會報錯。

類

Typescript類介紹

傳統(tǒng)的JavaScript的程序使用函數(shù)和基于原型的繼承來創(chuàng)建可重用的組件，但對于熟悉使用面向?qū)ο蠓绞降某绦騿T來講就有些棘手，因為他們用的是基于類的繼承并且對象是由類構(gòu)建出來從ECMAScript2015，也就是ECMAScript6開始，JavaScript程序員將能夠使用基于類的面向?qū)ο蟮姆绞?。使用TypeScript，我們允許開發(fā)者現(xiàn)在就使用這些特性，并且編譯后的JavaScript可以在所有主流瀏覽器和平臺上運行，而不需要等到下個JavaScript的版本。

ts的類只是一個語法糖，本質(zhì)還是js函數(shù)實現(xiàn)的。

使用示例：

(()={

//定義一個接口

interfacePerson{

firstName:string,

lastName:string

//定義一個類

classPersonal{

//定義公共的字段屬性

firstName:string

lastName:string

fullName:string

//構(gòu)造函數(shù)

constructor(firstName:string,lastName:string){

//更新屬性數(shù)據(jù)

this.firstName=firstName

this.lastName=lastName

th