TypeScript知識初探

  之前匆匆的看了一些內容,沒有深入的去學習,時間久了也都忘了😔。趁着現在的機會好好的深入學習一下TypeScript中的奧祕。因爲我也是邊學習邊分享,所以分享的知識可能很淺顯,適合初學的人。

本篇文章的目錄

  • 安裝/編譯TypeScript
  • 編譯工具中配置TypeScript
  • 說說TypeScript中的幾種類型

全局安裝TypeScript

npm install typescript -g   //可以使用npm或者cnpm 等

  安裝完之後在新建的文件夾中輸入 tsc --init 會自動創建一個tsconfig.json文件。目前已經可以在你的文件夾中編寫ts文件啦,(ps:typescript文件必須以.ts文件爲後綴)。

//編譯ts文件
  tsc index.ts   //在命令窗口中編譯文件
 //運行文件
 node index.js   //使用node運行 (此時運行的是.js文件)編譯過後會生成.js文件

在這裏插入圖片描述
好了,現在我們已經掌握了怎樣編譯/運行一個文件。但我們平常都是在編輯器裏面進行我們的項目,那現在就來說說怎麼在編輯器裏面自動編譯我們的文件吧!

VScode中進行設置

  生成json文件後,在編輯器裏面選中 “終端-運行任務-tsc:watch -tsconfig.json” ,這樣每次保存的時候就會自動編譯,並且還會檢測到錯誤。
PS:如果你想編譯出來的js文件在一個單獨的目錄裏面的話,可以打開tsconfig.json文件,把裏面的 “outDir” : " ./js (文件夾名稱)"

HBuilder中進行設置

  1. 點擊工具-插件安裝
  2. 點擊下方瀏覽 Eclipse 插件市場,搜索 typescript 插件進行安裝
  3. 安裝完成後重啓編譯器,點擊菜單欄工具-選項 選擇編譯 ts 文件
  4. 項目上右鍵點擊–配置–Enable TypeScript Builder,之後你再保存.ts 文件時會自動在當前目錄編譯出對應的.js 文件
  5. 選中 Compile all TypeScript files on build ,再點擊確定;

以上就是我們在編輯器裏面的自動編譯啦!下面講講ts中的幾種類型。

TypeScript中的幾種類型

  在ts中分爲number、string、boolean、Array、tuple(元組)、any、null、

undefined、void、enum、never這幾種類型。其中一些是在js中常見的基礎類型,而其他

的幾種是新增的。TypeScript是javascript的超集,它添加了類型校驗、接口、類、泛型的

概念,它幫助開發人員利用面向對象編程原理生成更好的JavaScript 。

number

//定義一個變量a,並聲明爲number類型,在後面的程序中也只能是number類型
   let  a:number = 123; 

在這裏插入圖片描述
  從上面可以看出,變量類型一旦聲明就不能更改,在瀏覽器中可以運行出結果,但在編譯的時候會報錯,並且編譯器會給出錯我的解釋。

  string、boolean和number類型是一樣的效果就不細講啦,下面說說其他的幾種。

數組Array

//定義數組的兩種方式
1、var arr:number[]=[1,2,3,4];  //聲明一個類型爲number的數組
2、var arr1:Array<number>=[1,2,3,4];

//遍歷
   for(var item of arr){
      console.log(item);
   }

  和上面定義基本變量一樣,一旦定義了類型就不能更改啦。比如上面的數組,裏面的值只能是number類型(如果想要不同類型的值可以聲明爲any類型,後面會介紹)。

元組Tuple

  元組類型允許表示一個已知元素數量和類型的數組,各元素的類型不必相同。 比如,你可以定義一對值分別爲string和number類型的元組。

var arr:[number,string] = [10,"tyj"];   //參數和類型必須得對照着
arr = ["tyj",10]  //Error

使用元組時必須確定每個元素的類型,它屬於數組的一種(數組元素的精確賦值)。

any任意類型
  有時候,我們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容,比如來自用戶輸入或第三方代碼庫。 這種情況下,我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那麼我們可以使用any類型來標記這些變量。

var arr:any=[1,"2",false,{a:1}];   //數組可以定義任意類型的數據,並且不會報錯

//any的意思是數據可以是任意的一種類型
//當然定義的遍歷如果開始不明確是什麼類型的話,可以定義爲any類型,這樣在後面還可以修改
//在ts裏面獲取dom元素 會標出錯誤
let box:any=document.getElementById("root");  //定義爲any類型
box.style.color='red';   //不設定類型的話會報錯,但不耽誤頁面顯示

在這裏插入圖片描述
enum枚舉類型

  枚舉類型它是把你的值給枚舉出來,讓你的值的狀態更加的可視化,便於理解。比如,平常項目中判斷登錄的時候後臺返回值:1代表已登錄,-1代表未登錄,0代表去註冊。可能時間久了對於這些數字就不那麼敏感了,或者並不理解什麼意思。那麼我們就可以採用枚舉類型把原本狀態的含有保存起來。

//把狀態列舉出來
enum Status {'login', 'unlogin'=-1, 'regist'};
let c: string = Status[0];  //regist 如果賦值了的話,就改變了默認的下標(默認從0開始)
let n: Status = Status.login;
console.log(c);   //regist 
console.log(n);  // 0  如果標識符沒有賦值,返回它的下標

  每個元素可以賦值,默認爲它的下標,這樣等於更改了下標。比如上面例子中 regist的下標就是 4。有人會想,能不能設置默認值爲其他類型的呢😲?試試唄😏

enum Status {'login', 'unlogin'="tyj", 'regist'}
let n: Status = Status['tyj'];
console.log(n) 

在這裏插入圖片描述
  可以看到會報錯 error: Enum member must have initializer,所以不建議將枚舉項的值設置爲字符串類型。

  類型中的null,undefined是兩種類型,它是任何類型的子類型。

// 常規定義
let a:undefined = undefined; //定義爲undefined類型
let a:null = null //定義爲null類型

//舉個栗子
let num : number;
console.log(num); //會報錯,但是可以打印 爲undefined
//改進
let num : number|undefined
console.log(num);  //不報錯,打印爲undefined

  void類型常常用來定義方法的時候,方法沒有返回值

function show(str):void{
  console.log(str);  //無返回值,直接輸出
}
show("i have a dream");

  never類型表示的是那些永不存在的值的類型。 例如,never類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型; 變量也可能是never類型,當它們被永不爲真的類型保護所約束時。

function failCallback() {
    return error("error message");
}

  以上就是本片文章要將的知識點了,後面也會持續更新博客,方便大家瞭解也方便我以後查看。

  如有錯誤或解釋不恰當的地方,歡迎大家支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章