關於typescript之定義變量和數據類型那點事

JavaScript雖然說深受萬千程序員喜好，卻有着對於企業大規模開發很難管理的缺陷。這時候，TypeScript的優點便體現出來。接下來，咱們會先接觸在TypeScript中定義變量相關的問題。以後再來了解JavaScript類型在TypeScript中的變化以及TypeScript中新增的類型。但願這些內容能夠幫助你對typescript更加了解。

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

咱們已經強調過不少次，在TypeScript中定義變量須要指定 標識符 的類型。

因此完整的聲明格式以下：

var/let/const 標識符: 數據類型 = 賦值;

好比咱們聲明一個message，完整的寫法以下：

注意：這裏的string是小寫的，和String是有區別的
string是TypeScript中定義的字符串類型，String是ECMAScript中定義的一個類

let message: string = "Hello World";

message = "Hello TypeScript"; // 正確的作法
message = 20; // 錯誤的作法，由於message是一個string類型

1.2. 聲明變量的關鍵字

在TypeScript定義變量（標識符）和ES6以後一致，可使用var、let、const來定義：

var myname: string = "abc";
let myage: number = 20;
const myheight: number = 1.88;
可是，咱們會發現使用var關鍵字會有一個警告：

var關鍵字警告

可見，在TypeScript中並不建議再使用var關鍵字了，主要緣由和ES6升級後let和var的區別是同樣的，var是沒有塊級做用域的，會引發不少的問題，這裏再也不展開探討。

因此，在以後的開發中，咱們定義變量主要使用let和const

1.3. 變量的類型推斷

在開發中，有時候爲了方便起見咱們並不會在聲明每個變量時都寫上對應的數據類型，咱們更但願能夠經過TypeScript自己的特性幫助咱們推斷出對應的變量類型：

let message = "Hello World";

上面的代碼咱們並無指定類型，可是message實際上依然是一個字符串類型：
Image02

給message賦值一個number
這是由於在一個變量第一次賦值時，會根據後面的賦值內容的類型，來推斷出變量的類型：

上面的message就是由於後面賦值的是一個string類型，因此message雖然沒有明確的說明，可是依然是一個string類型

let message = "Hello World"; // string類型
let age = 20; // number類型
let isFlag = true; // boolean類型

1.4. 聲明name報錯

咱們在TypeScript的文件中聲明一個name（不少其餘的名字也會）時，會報錯：
image03

聲明name報錯信息
主要錯誤信息：

沒法從新聲明塊範圍變量「name」
咱們前面明明（明明說管我什麼事）沒有聲明name，可是卻說咱們重複聲明瞭

此次是由於咱們的typescript 將 DOM typings 做爲全局的運行環境；
因此當咱們聲明 name時， 與 DOM 中的全局 name 屬性出現了重名；

image04

name的聲明位置
如何解決這個問題呢？

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

可是這種辦法對於咱們來講並不合適，由於咱們依然但願在DOM下編譯咱們的TypeScript代碼
image05

刪除DOM typing

方式二：聲明咱們的ts文件爲一個模塊

既然與全局的變量出現重名，那咱們將腳本封裝到模塊（module）中，由於模塊有屬於本身的做用域，就不會和全局的產生衝突：

在 Typescript 中，咱們可使用ES6的export來導出一個對象，而且該文件被視爲 module
let name = "coderwhy";

export {};
1.5. console.log報錯

另外爲了測試方便咱們常用console.log來進行測試，可是使用時會報一個警告：

console.log警告
這個時候，咱們能夠配置
image06

配置tslint
"no-console": false

二. JavaScript數據類型
2.1. number類型

數字類型是咱們開發中常用的類型，TypeScript和JavaScript同樣，不區分整數類型（int）和浮點型（double），統一爲number類型。

// 1.數字類型基本定義
let num = 100;
num = 20;
num = 6.66;
若是你學習過ES6應該知道，ES6新增了二進制和八進制的表示方法，而TypeScript也是支持二進制、八進制、十六進制的表示：

// 2.其餘進製表示
num = 100; // 十進制
num = 0b110; // 二進制
num = 0o555; // 八進制
num = 0xf23; // 十六進制
2.2. boolean類型

boolean類型只有兩個取值：true和false，很是簡單

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

string類型是字符串類型，可使用單引號或者雙引號表示：

注意：若是打開了TSLint，默認狀況下推薦使用使用雙引號
// string類型表示
let message: string = "Hello World";
message = 'Hello TypeScript';
同時也支持ES6的模板字符串來拼接變量和字符串：

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類型

數組類型的定義也很是簡單，有兩種方式：

可是TSLint會推薦咱們使用上面這種方式
const names1: string[] = ["why", "abc", "cba"];
const names2: Array<string> = ["why", "abc", "cba"];
2.5. object類型

object對象類型能夠用於描述一個對象：

// object類型表示
const myinfo: object = {
name: "why",
age: 20,
height: 1.88,
};
可是上面的代碼會報一個警告：

image07

object定義後警告
這是由於TSLint建議咱們全部的key按照字母進行排序，可是這個並非特別有必要，咱們仍是能夠關閉掉：

image08

關閉TSLint字母排序
"object-literal-sort-keys": false
屬性是不能夠訪問的

若是咱們訪問myinfo中的屬性，會發現報錯：

image09

找不到name屬性
這是由於TypeScript並不知道某一個object類型上面就有一個name的屬性。

可是若是咱們讓它是類型推斷的，就能夠正常的訪問：

這是由於推導出來的類型，是以下的類型
image10

myinfo的類型
還有一種方法是定義後面會學到的接口，TypeScript一個很是好用的特性就是接口interface，後續咱們會進行很是詳細的學習

2.6. symbol類型

在ES5中，若是咱們是不能夠在對象中添加相同的屬性名稱的，好比下面的作法：

const person = {
identity: "程序員",
identity: "老師",
}
一般咱們的作法是定義兩個不一樣的屬性名字：好比identity1和identity2。

可是咱們也能夠經過symbol來定義相同的名稱，由於Symbol函數返回的是不一樣的值：

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

const person = {

};
這是Symbol的一個用法，更多其餘用法你們能夠自行學習，或者等到後續確實須要用到時，咱們再詳細講解。

2.7. null和undefined

在 JavaScript 中，undefined 和 null 是兩個基本數據類型。

在TypeScript中，它們各自的類型也是undefined和null，也就意味着它們既是實際的值，也是本身的類型：

const n: null = null;
const u: undefined = undefined;
三. TypeScript數據類型
TypeScript在原有的JavaScript基礎上引入了不少好用的類型：enum枚舉類型、tuple元組類型、any類型、void類型、never類型等」
3.1. enum類型

3.1.1. 枚舉的基本定義

枚舉類型在不少語言都有的類型，好比C++、Java等等，而且也很是好用，因此TypeScript引入了enum類型，讓咱們開發更好的方便和安全。

枚舉類型一般是定義一組數據：

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

const d1 = Direction.EAST;
const d2 = Direction.NORTH;
3.1.2. 枚舉類型的值

枚舉類型有本身的值，好比打印上面的d1和d2
image11

打印d1和d2結果
默認狀況下，枚舉中的數據是從0開始的，咱們能夠改變它的初始化值，好比下面的代碼：

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

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

console.log(d1); // 10
console.log(d2); // 12
也能夠所有本身來指定：

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
咱們也能夠經過對應的值去獲取對應的數據名稱：

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

3.2.1. tuple的基本使用

tuple是元組類型，不少語言中也有這種數據類型，好比Python、Swift等。

const tInfo: [string, number, number] = ["why", 18, 1.88];
const item1 = tInfo[0]; // why, 而且知道類型是string類型
const item2 = tInfo[1]; // 18, 而且知道類型是number類型
3.2.1. tuple和數組類比

初學tuple會以爲它和數組很是類似

可是數組中一般會定義一組相同的數據，若是數據不一樣會形成類型的丟失：

注意：這裏我使用了一種聯合類型，後面會講到
const aInfo: Array<string|number> = ["why", 18, 1.88];
const itema = aInfo[0]; // why，可是並不知道itema是string類型仍是number類型
3.3. any類型

在某些狀況下，咱們確實沒法肯定一個變量的類型，而且可能它會發生一些變化，這個時候咱們可使用any類型（相似於Dart語言中的dynamic類型）

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

const aArray: any[] = ["why", 18, 1.88];
3.4. void類型

void類型一般用於函數沒有返回值時來使用：

首先咱們須要說明的是，在TypeScript中函數也是有類型的
下面的函數，雖然咱們沒有指定它的類型，可是它會經過類型推導出來：

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

// 至關於下面的寫法
const sum: (num1: number, num2: number) => number = (num1: number, num2: number) => {
return num1 + num2;
};
image12
sum函數的類型
若是一個函數沒有返回值，那麼它的返回值類型就是void

咱們能夠將null和undefined賦值給void類型，也就是函數能夠返回null或者undefined
const sayHello: (name: string) => void = (name: string) => {
console.log("hello " + name);
};
3.5. never類型

never類型表示一種歷來不會存在的值的類型，有點繞，咱們來這樣理解：

若是一個函數中是一個死循環，那麼這個函數會返回東西嗎？不會，那麼寫void類型或者其餘類型做爲返回值類型都不合適，咱們就可使用never類型。
若是一個函數是拋出一個異常，那麼這個函數是否是也沒有返回值呢？這個時候咱們也可使用never類型。
image13
死循環的函數
image14拋出異常的函數備註：全部內容首發於公衆號Flutter、TypeScript、React、Node、uniapp、小程序開發、數據結構與算法等等，也會更新一些本身的學習心得等，歡迎你們關注。最後我想說的是，變量及數據類型猶如在茫茫TS宇宙中的一顆行星，想要更加深刻了解TS，光看這些是遠遠不夠的，若是你對此有興趣，接下來我會分享更多關於TS的內容，固然你也能夠自行研究，但願這些內容能夠幫你在編程道路上更進一步。