一、類型聲明

(一) 類型聲明

• 類型聲明是TS非常重要的一個特點

• 通過類型聲明可以指定TS中變量（參數、形參）的類型

• 指定類型后，這些指定的類型也稱為“靜態類型”為，就是你一旦定義了，就不可以再改變了。當為變量賦值時，TS編譯器會自動檢查值是否符合類型聲明，符合則賦值，否則報錯

• 簡而言之，類型聲明給變量設置了類型，使得變量只能存儲某種類型的值

• 語法：

  • let 變量: 類型;let 變量: 類型 = 值;function fn(參數: 類型, 參數: 類型): 類型{... }

（二）定義變量

之前在js中定義一個變量可以這樣定義：

var num=12; //num是數值類型的 var num="hello" //num是字符類型的

也就是說我們在給變量賦值的時候可以不指定變量的數據類型，數據類型根據變量的值而定。

但是在ts中定義一個變量要給變量指定它的數據類型。在ts中變量的使用分為兩步：1.聲明變量并指定類型 2.給變量賦值。

//第一種定義方式： let age : number; //age為number類型age=12;//第二種定義方式：let age:number=12;

二、類型注解和類型推斷

1.類型注解

為了方便大家更好的理解給變量添加數據類型，我們可以引入“類型注解”的概念。

類型注解：是一種為變量添加類型約束的方式。

程序員 和 TS 有個約定。約定了什么類型，就只能給變量賦什么類型的值

比如剛才我們給age指定的類型為number，這時候如果給age賦值的類型為number那就會報錯

我們現在使用的編輯器是vscode，有一個好處就是當我們把鼠標放在變量上的時候，相應的數據類型就會顯示出來。

2.類型推斷

自動類型判斷

• TS擁有自動的類型判斷機制
• 當對變量的聲明和賦值是同時進行的，TS編譯器會自動判斷變量的類型
• 所以如果你的變量的聲明和賦值時同時進行的，可以省略掉類型聲明

let money= 888;

這時候我并沒有顯示的定義變量num是一個數字類型，但是如果你把鼠標放到變量上時，你會發現 TypeScript 自動把變量注釋為了number（數字）類型，也就是說它是有某種推斷能力的，通過你的代碼 TS 會自動的去嘗試分析變量的類型。

接下來我們來計算兩個數之和：

const num1 = 10;const num2 = 20;const add = num1 + num2; console.log(add);//30

這個時候num1和num2沒有定義數據，得到的結果也是正確的。

我們嘗試封裝一個兩個數相加的方法。

function total(a,b){return a+b;}console.log(total("皮皮蝦",30));

a和b會顯示為any類型。這時候如果你傳字符串，你的業務邏輯就是錯誤的，所以你必須加一個類型注解.修改代碼：

function total(a:number,b:number){return a+b;}console.log(total(20,30));

在寫 TypeScript 代碼的一個重要宗旨就是每個變量，每個對象的屬性類型都應該是固定的，如果你推斷就讓它推斷，推斷不出來的時候你要進行注釋。

三、基本靜態類型

TypeScript 中的數據類型分為兩大類：1 原始類型（基本數據類型） 2 對象類型（復雜數據類型）。有的也說基本靜態類型和對象類型。

TypeScript支持與JavaScript幾乎相同的數據類型，此外還提供了實用的枚舉類型方便我們使用。

• 類型

  類型例子描述

  number	1, -33, 2.5	任意數字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true、false	布爾值true或false
  字面量	其本身	限制變量的值就是該字面量的值
  any	*	任意類型
  unknown	*	類型安全的any
  void	空值（undefined）	沒有值（或undefined）
  never	沒有值	不能是任何值
  object	{name:‘孫悟空’}	任意的JS對象
  array	[1,2,3]	任意JS數組
  tuple	[4,5]	元素，TS新增類型，固定長度數組
  enum	enum{A, B}	枚舉，TS中新增類型

  1.數字類型（number）

數字類型：包含整數值和浮點型（小數）值。

// 數字類型：整數let age : number = 18; // 數字類型：小數 let score : number = 88.6;

2 .字符串類型(string)

var str:string='this is ts';str='周杰倫'; //正確str=123; //錯誤

3.布爾類型（boolean）

//es5的寫法 ：var flag=true;flag=456;//typescript中為了使編寫的代碼更規范，更有利于維護，增加了類型校驗// 寫ts代碼必須指定類型var flag:boolean=true;// flag=123; //錯誤flag=false; //正確console.log(flag);

4.undefined 、 null
共同特點：只有一個值，值為類型本身

undefined：表示聲明但未賦值的變量值（找不到值）。

null：表示聲明了變量并已賦值，值為 null（能找到，值就是 null）

類型為：undefined let food : undefined = undefined //類型為：null let money : null = null

5.symbol

var b=Symbol();var c=Symbol();console.log(b==c);var c=Symbol("我是描述地址的屬性");//獲取描述信息console.log(c.description);//第一種定義對象屬性var obj={name:'kelly',age:12,// [c]:'中山西路'}//第二種定義屬性的方法obj[c]="江山路8888";console.log(obj);//獲取屬性console.log(obj[c])

tsconfig.js中需要更改compilerOptions選項下的lib屬性，這樣就可以正常解析了。

"lib": ["es6","DOM","ES2019"],

6.任意類型（any）

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

let userInput: any = 10; userInput = "用戶輸入的是字符串"; userInput = false; // OK

當你只知道一部分數據的類型時，any類型也是有用的。 比如，你有一個數組，它包含了不同的類型的數據：

let list: any[] = [1, true, "free"]; list[1] = 100;

any的用法：在我們獲取元素設置樣式的時候，需要制定類型，這時又不確定數據類型，可以設置為any

var box=document.querySelector("#box"); //錯誤寫法box.style.color="red"; var box：any=document.querySelector("#box"); //正確寫法box.style.color="red";

7.Void

某種程度上來說，void類型像是與any類型相反，typescript中的void表示沒有任何類型，一般用于定義方法的時候方法沒有返回值。

function run(): void {console.log("沒有任何返回數據"); }

聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：

let grass: void = undefined;

8.never

never類型表示的是那些永不存在的值的類型。是其他類型 （包括 null 和 undefined）的子類型，也可以賦值給任何類型，代表從不會出現的值。

這意味著聲明never的變量只能被never類型所賦值。 never類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型； 變量也可能是 never類型，當它們被永不為真的類型保護所約束時。

//never 類型var a:never;a=123; //錯誤的寫法a=(()=>{ //正確寫法throw new Error('錯誤');})()

// 返回never的函數必須存在無法達到的終點 function error(message: string): never {throw new Error(message); }// 推斷的返回值類型為never function fail() {return error("Something failed"); }// 返回never的函數必須存在無法達到的終點 function infiniteLoop(): never {while (true) {} }

四、數組類型

（1）數組

TypeScript像JavaScript一樣可以操作數組元素。 有兩種方式可以定義數組。 第一種，可以在元素類型后面接上 []，表示由此類型元素組成的一個數組：

let arr: number[] = [1, 2, 3]; //正確 let arr:number[]=["hello",1,2,3]; //錯誤，數組中的數據類型不是聲明的數據類型

第二種方式是使用數組泛型，Array<元素類型>：

let list: Array<number> = [1, 2, 3]; //正確 let list2:Array<string>=["javascript",'css',2] //錯誤

數組中對象類型的定義：

const ice: { name: string, price: Number }[] = [{ name: "哈根達斯", price: 56 },{ name: "八喜", price: 32 }, ];const coffee:{name:string,price:Number}[]=[{name:'海鹽芝士',price:35},{name:"隕石拿鐵",price:32} ]

這種形式看起來比較麻煩，而且如果有同樣類型的數組，寫代碼也比較麻煩，TypeScript 為我們準備了一個概念，叫做類型別名(type alias)。

比如剛才的代碼，就可以定義一個類型別名，定義別名的時候要以type關鍵字開始。現在定義一個goods的別名。

type goods = { name: string, age: Number };

有了這樣的類型別名以后哦，就可以把上面的代碼改為下面的形式了。

type goods= { name: string, price: Number };const ice:goods[]=[{ name: "哈根達斯", price: 56 },{ name: "八喜", price: 32 }, ];const coffee:goods[]=[{name:'海鹽芝士',price:35},{name:"隕石拿鐵",price:32} ]console.log(coffee[1].name); //隕石拿鐵

（2）元組Tuple

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

let person: [string, number]; person= ['Kelly', 20]; // 正確 x = [20, 'kelly']; // Error

當訪問一個已知索引的元素，會得到正確的類型：

console.log(person[0].substr(1)); // 正確 console.log(person[1].substr(1)); // Error, 'number' does not have 'substr'

當訪問一個越界的元素，會使用聯合類型替代：

person[3] = 'world'; // OK, 字符串可以賦值給(string | number)類型console.log(person[5].toString()); // OK, 'string' 和 'number' 都有 toStringx[6] = true; // Error, 布爾不是(string | number)類型

（3）枚舉（enum）

enum類型是對JavaScript標準數據類型的一個補充。 像C#等其它語言一樣，使用枚舉類型可以為一組數值賦予友好的名字。

隨著計算機的不斷普及，程序不僅只用于數值計算，還更廣泛地用于處理非數值的數據。例如：性別、月份、星期幾、顏色、單位名、學歷、職業等，都不是數值數據。 在其它程序設計語言中，一般用一個數值來代表某一狀態，這種處理方法不直觀，易讀性差。
如果能在程序中用自然語言中有相應含義的單詞來代表某一狀態，則程序就很容易閱讀和理解。
也就是說，事先考慮到某一變量可能取的值，盡量用自然語言中含義清楚的單詞來表示它的每一個值， 這種方法稱為枚舉方法，用這種方法定義的類型稱枚舉類型。

格式：

enum 枚舉名 { 標識符[=整型常數], 標識符[=整型常數], ... 標識符[=整型常數], } ;

定義表示顏色的枚舉類型：

//顏色enum Color {red,orange,yello,green}; let c:Color=Color.yello; console.log(c); // 2

默認情況下，從0開始為元素編號。 你也可以手動的指定成員的數值。

比如，我們用一個變量表示狀態，1代表成功，2代表失敗。

enum Flag {success=1,error=2};let s:Flag=Flag.success;console.log(s); //1

枚舉類型提供的一個便利是你可以由枚舉的值得到它的名字。 例如，我們知道數值為2，但是不確定它映射到Color里的哪個名字，我們可以查找相應的名字：

enum Color {red=1,orange,yello,green} let colorName: string = Color[2]; console.log(colorName); // 顯示'orange'因為這里的代碼里它的值是2

3.類類型

class Person {} const lucky: Person = new Person();

這個意思就是lucky必須是一個Person類對應的對象才可以。我們還可以定義一個，并確定返回值。代碼如下：

4.函數類型

定義一個函數并確定返回值,函數類型后續會詳細說。

const run: () => string = () => {return "run"; };

總結

以上是生活随笔為你收集整理的02ts中数据类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。