說好的每周一篇博客，就這樣拖著拖著，上周的博客拖到了這周周一，一個是因為項目確實忙 ，另一個是周末也比較忙（打開電腦的機會都沒有，這個時候不禁感嘆，時間都去哪了）
多希望有一夜突然驚醒，發(fā)現(xiàn)自己在一節(jié)課上睡著了，一覺醒來還在高中的教室里，老師的粉筆迎面而來砸到你的臉上，提醒你，上課不要睡覺。你告訴同桌，說做了個好長的夢，同桌罵你白癡，叫你好好聽課，你看著窗外的球場，陽光灑在臉上，一切都那么熟悉，一切還充滿希望
但是 回不去了
一入程序深似海，回首已是百年身

感慨過了，開始正題，上周沒有發(fā)生什么有趣的難題，所以準備系統(tǒng)的寫一篇關于typescript的入門教程（不禁感嘆是誰給我的勇氣）
現(xiàn)在最適合入門的教程是TypeScript中文文檔，鏈接https://www.tslang.cn/docs/handbook/basic-types.html
而我這篇文章也是基于這個寫的，因為翻譯的大牛很多知識點是一筆帶過，對于接觸js不久，或者沒有系統(tǒng)的學過后臺語言的新手，還是有很多問題或者疑惑的地方，我之前也遇到很多疑惑的地方，有的經過多方查找資料和網(wǎng)上很多教程相互印證，現(xiàn)在已經理解的比較明白了，所以ts這一系列的文章就是，對我自己學習的一個總結

基礎類型篇

ts基礎類型 沿用js

js就有的 ----布爾值,數(shù)字,字符串,,Null 和 Undefined，數(shù)組，Object
js沒有的 ----Tuple,enum,Any,Void,Never,類型斷言

看一下具體的用法，基本都是變量后面跟一個 let xx：類型 = 值

let decLiteral: number = 6; //十六，十，八，二（進制）
let sentence: string = `Hello, my name is ${ name }.`
let list: number[] = [1, 2, 3]; 
let list: Array<number> = [1, 2, 3]; //泛型模式

上面比較特殊的一個是模板字符串，
1.對比于js的字符串，多了一個多行字符串的功能，不用多個=>字符串 + 字符串 + 變量......，直接一個xxxxx ${name}xxxx,就可以代替之前繁瑣的寫法，很贊的一個功能。
2.如果一個字符串模板，當作參數(shù)傳遞，ts有自動拆分字符串的功能

let tname: string = "zxw"
let getAge = function () {
    return 27
}


function f(template,tname,age) {
   console.log(tname)
    console.log(age)
}
f`my name is ${tname},my age is ${getAge()}`  //zxw 27

ts基礎類型 新增

Tuple         已知類型和數(shù)量
enum         enum Color {Red, Green, Blue}
any            任意類型
void           沒有任何類型，常用于函數(shù)無返回值
Never        永不存在得值類型
類型斷言     xxx as 類型

這里面說一下枚舉 enum

top不賦值情況下永遠是0，其余在前一個基礎上+1

enum handle{top,right,bottom,left}
console.log(top)      //0
console.log(right)   //1
console.log(bottom)  //2
console.log(left)    //3

如果在中間賦值----top還是0，
被賦值后就等于被賦予的值
如果當前元素的前一個元素被賦值了 當前元素的值=前一個元素的值+1

enum handle{top,right,bottom=3,left}
console.log(top)      //0
console.log(right)   //1
console.log(bottom)  //3
console.log(left)    //4

列舉一個試用場景，比如有一個簡單的游戲需要上下左右四個按鍵操作，就可以寫成這樣

enum handle{top=1,right,bottom,left}
console.log(top)      //1
console.log(right)   //2
console.log(bottom)  //3
console.log(left)    //4
switch (n){
    case top:
       //dosomething
        break;
    case right:
        //dosomething
        break;
    case bottom:
        //dosomething
        break;
    case left:
        //dosomething
        break;
    default:
    //dosomething
}

說一下類型斷言

其實中文文檔上面說的已經比較清楚了

你會比TypeScript更了解某個值的詳細信息。 通常這會發(fā)生在你清楚地知道一個實體具有比它現(xiàn)有類型更確切的類型。
兩種實現(xiàn)方式 --- 第一種

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

第二種

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

兩種形式是等價的。 至于使用哪個大多數(shù)情況下是憑個人喜好；然而，當你在TypeScript里使用JSX時，只有 as語法斷言是被允許的。

let和const

let

不存在變量提升，如果未定義使用會報錯

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

暫時性死區(qū),未申明不能賦值

x = 5  // 報錯ReferenceError
let x 

不允許重復申明

let x = 5
let x = 6  // 報錯ReferenceError

塊級作用域

{
  let x = 5
}
console.log(x) //undefind

const

對于普通類型，被賦予的值是不能修改的
對于引用類型，棧地址是不允許修改的，但堆里面的內容是可以修改的

我理解的堆棧.png

關于let和const還有一個比較有意思的改變
let const聲明的變量都不是掛載在window上的，而是掛在全局對象global上

let x = 10
console.log(window.x) // undefind