typescript如何定義變量和數(shù)據(jù)類(lèi)型

小編給大家分享一下typescript如何定義變量和數(shù)據(jù)類(lèi)型，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一. 變量聲明方式
1.1. 聲明變量的格式

我們已經(jīng)強(qiáng)調(diào)過(guò)很多次，在TypeScript中定義變量需要指定 標(biāo)識(shí)符 的類(lèi)型。

所以完整的聲明格式如下：

var/let/const 標(biāo)識(shí)符: 數(shù)據(jù)類(lèi)型 = 賦值;

比如我們聲明一個(gè)message，完整的寫(xiě)法如下：

注意：這里的string是小寫(xiě)的，和String是有區(qū)別的
string是TypeScript中定義的字符串類(lèi)型，String是ECMAScript中定義的一個(gè)類(lèi)

let message: string = "Hello World";

message = "Hello TypeScript"; // 正確的做法
message = 20; // 錯(cuò)誤的做法，因?yàn)閙essage是一個(gè)string類(lèi)型

1.2. 聲明變量的關(guān)鍵字

在TypeScript定義變量（標(biāo)識(shí)符）和ES6之后一致，可以使用var、let、const來(lái)定義：

var myname: string = "abc";
let myage: number = 20;
const myheight: number = 1.88;
但是，我們會(huì)發(fā)現(xiàn)使用var關(guān)鍵字會(huì)有一個(gè)警告：

   var關(guān)鍵字警告

可見(jiàn)，在TypeScript中并不建議再使用var關(guān)鍵字了，主要原因和ES6升級(jí)后let和var的區(qū)別是一樣的，var是沒(méi)有塊級(jí)作用域的，會(huì)引起很多的問(wèn)題，這里不再展開(kāi)探討。

所以，在之后的開(kāi)發(fā)中，我們定義變量主要使用let和const

1.3. 變量的類(lèi)型推斷

在開(kāi)發(fā)中，有時(shí)候?yàn)榱朔奖闫鹨?jiàn)我們并不會(huì)在聲明每一個(gè)變量時(shí)都寫(xiě)上對(duì)應(yīng)的數(shù)據(jù)類(lèi)型，我們更希望可以通過(guò)TypeScript本身的特性幫助我們推斷出對(duì)應(yīng)的變量類(lèi)型：

let message = "Hello World";

上面的代碼我們并沒(méi)有指定類(lèi)型，但是message實(shí)際上依然是一個(gè)字符串類(lèi)型：

給message賦值一個(gè)number
這是因?yàn)樵谝粋€(gè)變量第一次賦值時(shí)，會(huì)根據(jù)后面的賦值內(nèi)容的類(lèi)型，來(lái)推斷出變量的類(lèi)型：

上面的message就是因?yàn)楹竺尜x值的是一個(gè)string類(lèi)型，所以message雖然沒(méi)有明確的說(shuō)明，但是依然是一個(gè)string類(lèi)型

let message = "Hello World"; // string類(lèi)型
let age = 20; // number類(lèi)型
let isFlag = true; // boolean類(lèi)型

1.4. 聲明name報(bào)錯(cuò)

我們?cè)赥ypeScript的文件中聲明一個(gè)name（很多其他的名字也會(huì)）時(shí)，會(huì)報(bào)錯(cuò)：

聲明name報(bào)錯(cuò)信息
主要錯(cuò)誤信息：

無(wú)法重新聲明塊范圍變量“name”
我們前面明明（明明說(shuō)管我什么事）沒(méi)有聲明name，但是卻說(shuō)我們重復(fù)聲明了

這次是因?yàn)槲覀兊膖ypescript 將 DOM typings 作為全局的運(yùn)行環(huán)境；
所以當(dāng)我們聲明 name時(shí)， 與 DOM 中的全局  name 屬性出現(xiàn)了重名；

name的聲明位置
如何解決這個(gè)問(wèn)題呢？

有兩種方案：去掉 DOM typings 的環(huán)境和聲明模塊
方式一：刪除DOM typings的環(huán)境

但是這種辦法對(duì)于我們來(lái)說(shuō)并不合適，因?yàn)槲覀円廊幌Ｍ贒OM下編譯我們的TypeScript代碼

刪除DOM typing

方式二：聲明我們的ts文件為一個(gè)模塊

既然與全局的變量出現(xiàn)重名，那我們將腳本封裝到模塊（module）中，因?yàn)槟K有屬于自己的作用域，就不會(huì)和全局的產(chǎn)生沖突：

在 Typescript 中，我們可以使用ES6的export來(lái)導(dǎo)出一個(gè)對(duì)象，并且該文件被視為 module
let name = "coderwhy";

export {};
1.5. console.log報(bào)錯(cuò)

另外為了測(cè)試方便我們經(jīng)常使用console.log來(lái)進(jìn)行測(cè)試，但是使用時(shí)會(huì)報(bào)一個(gè)警告：

console.log警告
這個(gè)時(shí)候，我們可以配置

配置tslint
"no-console": false

二. JavaScript數(shù)據(jù)類(lèi)型
2.1. number類(lèi)型

數(shù)字類(lèi)型是我們開(kāi)發(fā)中經(jīng)常使用的類(lèi)型，TypeScript和JavaScript一樣，不區(qū)分整數(shù)類(lèi)型（int）和浮點(diǎn)型（double），統(tǒng)一為number類(lèi)型。

// 1.數(shù)字類(lèi)型基本定義
let num = 100;
num = 20;
num = 6.66;
如果你學(xué)習(xí)過(guò)ES6應(yīng)該知道，ES6新增了二進(jìn)制和八進(jìn)制的表示方法，而TypeScript也是支持二進(jìn)制、八進(jìn)制、十六進(jìn)制的表示：

// 2.其他進(jìn)制表示
num = 100; // 十進(jìn)制
num = 0b110; // 二進(jìn)制
num = 0o555; // 八進(jìn)制
num = 0xf23; // 十六進(jìn)制
2.2. boolean類(lèi)型

boolean類(lèi)型只有兩個(gè)取值：true和false，非常簡(jiǎn)單

// boolean類(lèi)型的表示
let flag: boolean = true;
flag = false;
flag = 20 > 30;
2.3. string類(lèi)型

string類(lèi)型是字符串類(lèi)型，可以使用單引號(hào)或者雙引號(hào)表示：

注意：如果打開(kāi)了TSLint，默認(rèn)情況下推薦使用使用雙引號(hào)
// string類(lèi)型表示
let message: string = "Hello World";
message = 'Hello TypeScript';
同時(shí)也支持ES6的模板字符串來(lái)拼接變量和字符串：

const name = "why";
const age = 18;
const height = 1.88;

const info = my name is ${name}, age is ${age}, height is ${height};
console.log(info);
2.4. array類(lèi)型

數(shù)組類(lèi)型的定義也非常簡(jiǎn)單，有兩種方式：

但是TSLint會(huì)推薦我們使用上面這種方式
const names1: string[] = ["why", "abc", "cba"];
const names2: Array<string> = ["why", "abc", "cba"];
2.5. object類(lèi)型

object對(duì)象類(lèi)型可以用于描述一個(gè)對(duì)象：

// object類(lèi)型表示
const myinfo: object = {
name: "why",
age: 20,
height: 1.88,
};
但是上面的代碼會(huì)報(bào)一個(gè)警告：

object定義后警告
這是因?yàn)門(mén)SLint建議我們所有的key按照字母進(jìn)行排序，但是這個(gè)并不是特別有必要，我們還是可以關(guān)閉掉：

關(guān)閉TSLint字母排序
"object-literal-sort-keys": false
屬性是不可以訪問(wèn)的

如果我們?cè)L問(wèn)myinfo中的屬性，會(huì)發(fā)現(xiàn)報(bào)錯(cuò)：

找不到name屬性
這是因?yàn)門(mén)ypeScript并不知道某一個(gè)object類(lèi)型上面就有一個(gè)name的屬性。

但是如果我們讓它是類(lèi)型推斷的，就可以正常的訪問(wèn)：

這是因?yàn)橥茖?dǎo)出來(lái)的類(lèi)型，是如下的類(lèi)型

myinfo的類(lèi)型
還有一種方法是定義后面會(huì)學(xué)到的接口，TypeScript一個(gè)非常好用的特性就是接口interface，后續(xù)我們會(huì)進(jìn)行非常詳細(xì)的學(xué)習(xí)

2.6. symbol類(lèi)型

在ES5中，如果我們是不可以在對(duì)象中添加相同的屬性名稱(chēng)的，比如下面的做法：

const person = {
identity: "程序員",
identity: "老師",
}
通常我們的做法是定義兩個(gè)不同的屬性名字：比如identity1和identity2。

但是我們也可以通過(guò)symbol來(lái)定義相同的名稱(chēng)，因?yàn)镾ymbol函數(shù)返回的是不同的值：

const s1 = Symbol("identity");
const s2 = Symbol("identity");

const person = {

};
這是Symbol的一個(gè)用法，更多其他用法大家可以自行學(xué)習(xí)，或者等到后續(xù)確實(shí)需要用到時(shí)，我們?cè)僭敿?xì)講解。

2.7. null和undefined

在 JavaScript 中，undefined 和 null 是兩個(gè)基本數(shù)據(jù)類(lèi)型。

在TypeScript中，它們各自的類(lèi)型也是undefined和null，也就意味著它們既是實(shí)際的值，也是自己的類(lèi)型：

const n: null = null;
const u: undefined = undefined;
三. TypeScript數(shù)據(jù)類(lèi)型
?TypeScript在原有的JavaScript基礎(chǔ)上引入了很多好用的類(lèi)型：enum枚舉類(lèi)型、tuple元組類(lèi)型、any類(lèi)型、void類(lèi)型、never類(lèi)型等”
3.1. enum類(lèi)型

3.1.1. 枚舉的基本定義

枚舉類(lèi)型在很多語(yǔ)言都有的類(lèi)型，比如C++、Java等等，并且也非常好用，所以TypeScript引入了enum類(lèi)型，讓我們開(kāi)發(fā)更好的方便和安全。

枚舉類(lèi)型通常是定義一組數(shù)據(jù)：

enum Direction {
EAST,
WEST,
NORTH,
SOUTH,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;
3.1.2. 枚舉類(lèi)型的值

枚舉類(lèi)型有自己的值，比如打印上面的d1和d2
image11

打印d1和d2結(jié)果
默認(rèn)情況下，枚舉中的數(shù)據(jù)是從0開(kāi)始的，我們可以改變它的初始化值，比如下面的代碼：

enum Direction {
EAST = 10,
WEST,
NORTH,
SOUTH,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;

console.log(d1); // 10
console.log(d2); // 12
也可以全部自己來(lái)指定：

enum Direction {
EAST = 10,
WEST = 20,
NORTH = 30,
SOUTH = 40,
}

const d1 = Direction.EAST;
const d2 = Direction.NORTH;

console.log(d1); // 10
console.log(d2); // 30
我們也可以通過(guò)對(duì)應(yīng)的值去獲取對(duì)應(yīng)的數(shù)據(jù)名稱(chēng)：

console.log(Direction[10]); // EAST
console.log(Direction[30]); // NORTH
3.2. tuple類(lèi)型

3.2.1. tuple的基本使用

tuple是元組類(lèi)型，很多語(yǔ)言中也有這種數(shù)據(jù)類(lèi)型，比如Python、Swift等。

const tInfo: [string, number, number] = ["why", 18, 1.88];
const item1 = tInfo[0]; // why, 并且知道類(lèi)型是string類(lèi)型
const item2 = tInfo[1]; // 18, 并且知道類(lèi)型是number類(lèi)型
3.2.1. tuple和數(shù)組類(lèi)比

初學(xué)tuple會(huì)覺(jué)得它和數(shù)組非常相似

但是數(shù)組中通常會(huì)定義一組相同的數(shù)據(jù)，如果數(shù)據(jù)不同會(huì)造成類(lèi)型的丟失：

注意：這里我使用了一種聯(lián)合類(lèi)型，后面會(huì)講到
const aInfo: Array<string|number> = ["why", 18, 1.88];
const itema = aInfo[0]; // why，但是并不知道itema是string類(lèi)型還是number類(lèi)型
3.3. any類(lèi)型

在某些情況下，我們確實(shí)無(wú)法確定一個(gè)變量的類(lèi)型，并且可能它會(huì)發(fā)生一些變化，這個(gè)時(shí)候我們可以使用any類(lèi)型（類(lèi)似于Dart語(yǔ)言中的dynamic類(lèi)型）

let a: any = "why";
a = 123;
a = true;

const aArray: any[] = ["why", 18, 1.88];
3.4. void類(lèi)型

void類(lèi)型通常用于函數(shù)沒(méi)有返回值時(shí)來(lái)使用：

首先我們需要說(shuō)明的是，在TypeScript中函數(shù)也是有類(lèi)型的
下面的函數(shù)，雖然我們沒(méi)有指定它的類(lèi)型，但是它會(huì)通過(guò)類(lèi)型推導(dǎo)出來(lái)：

const sum = (num1: number, num2: number) => {
return num1 + num2;
};

// 相當(dāng)于下面的寫(xiě)法
const sum: (num1: number, num2: number) => number = (num1: number, num2: number) => {
return num1 + num2;
};

sum函數(shù)的類(lèi)型
如果一個(gè)函數(shù)沒(méi)有返回值，那么它的返回值類(lèi)型就是void

我們可以將null和undefined賦值給void類(lèi)型，也就是函數(shù)可以返回null或者undefined
const sayHello: (name: string) => void = (name: string) => {
console.log("hello " + name);
};
3.5. never類(lèi)型

never類(lèi)型表示一種從來(lái)不會(huì)存在的值的類(lèi)型，有點(diǎn)繞，我們來(lái)這樣理解：

如果一個(gè)函數(shù)中是一個(gè)死循環(huán)，那么這個(gè)函數(shù)會(huì)返回東西嗎？不會(huì)，那么寫(xiě)void類(lèi)型或者其他類(lèi)型作為返回值類(lèi)型都不合適，我們就可以使用never類(lèi)型。
如果一個(gè)函數(shù)是拋出一個(gè)異常，那么這個(gè)函數(shù)是不是也沒(méi)有返回值呢？這個(gè)時(shí)候我們也可以使用never類(lèi)型。

死循環(huán)的函數(shù)

拋出異常的函數(shù)

看完了這篇文章，相信你對(duì)“typescript如何定義變量和數(shù)據(jù)類(lèi)型”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！