TypeScript 基礎

TypeScript 是 JavaScript 的超集, 支持 JavaScript 的寫法，而且提供類型檢查，TypeScript 提供了一些面向對象編程的能力。

數據類型

JavaScript 目前的基礎數據類型有 Number， String ，Boolean， Null ，Undfiend ，Symbol ，BigInt,引用數據類型 Array Object Function、Date等 TypeScript 在 JavaScript 的基礎上添加了 Never Any Enum Tuple Void這些基礎數據類型

Never 表示永遠不存在值的類型，沒有值能夠賦值給 Never 類型

Any 表示能夠成爲任何類型，好比設定一個變量 沒想好它是什麼類型的，可是又要經過類型檢查，能夠設定爲 Any

Void 表示沒有任何類型,好比一些函數沒有返回值，能夠把這個函數設置爲 void 型

Enum 枚舉 枚舉是爲一組數據賦予了名字，便於讀取這組數據中的元素，例如

enum Color {Red = 1, Green = 2, Blue = 4}
let c:Color = Color.Red;
console.log(c) // outut: 1
複製代碼

Tuple 元組 當你想表示一個已知元素數量和類型的數組，各元素的類型不相同，能夠使用元組，例如

let  arr:[string, number]
arr = ['a',1]
複製代碼

類型斷言

類型斷言就是書寫自己去肯定數據類型，不通過類型檢查

有兩種寫法

// 尖括號
let str:any = 'xxx'
let strlength = (<string>str).length

複製代碼

// as
let str:any = 'xxx'
let strlength = (<str as string).length
複製代碼

接口

TypeScript 的核心思想是提供類型檢查，接口 interface 就相似於一個契約，咱們提早約定一個類型限制

對屬性的約束

interface Value {
  label: string;
}
function check(obj:Value){
    consle.log(obj.label)
}
let a  = {age:17,label:'xxx'}

check(a) // output : 'xxx'

複製代碼

對函數的約束

對函數的約束能夠變量不一樣，可是類型要一致

interface Func{
name:string;
num:number;
}
function getdata:Func(name:string,value:number){
    console.log(value, name)
}
getdata({name:'xxx',vakue:16})
複製代碼

可索引的接口

// 定義一個數組

interface Arr{
    [index:number]:number
}
let array:Arr = [1,2,3,4]
console.log(array[0]) // output:1

let brr:Arr = ['xxx','yyy'] // error!
複製代碼

可選屬性預約義

對一些可能存在存在的屬性進行提早定義

interface data{
    name ?:string;
    age ?:number;
}

function check(obj:data):{name:number,sex:number}{
let newvalue = {name:'xxx',sex:'fexmal'}
return newSquare
}

check({name:'yyy'})

複製代碼

readonly / const

const 用於聲明一個常量，readonly 用於定義接口中的只讀屬性

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5 // error!
複製代碼

泛型

泛型能夠幫助咱們複用組件，不限制傳入的數據類型

假設咱們使用 any 來定義函數，也能夠不限制輸入的數據類型,可是這種作法就沒有辦法控制函數的返回類型，能夠輸出任意的類型

function func(arg: any):any{
   return arg;
}
複製代碼

可是咱們假設設置一個 T 變量幫咱們捕獲數據類型，限制函數返回的也是這個類型，這種類型的函數被稱爲泛型

function identity<T>(arg: T): T {
    return arg;
}
複製代碼

泛型類

class Min<T>{
    public arr:T[]=[];
    add(value:T){
        this.arr.push(value);
    }
}
var m1=new MinClassT<number>();
m1.add(123)
複製代碼

泛型函數

function getData<T>(value:T):T{
        return value;
    }
     getData<number>(123);

     getData<string>('1214231');
複製代碼

泛型接口

interface ConfigFn{
     <T>(value:T):T;
}

var getData:ConfigFn=function<T>(value:T):T{
    return value;
}
    getData<string>('張三');
    getData<string>(1243);  //error!
複製代碼

函數

類型推論

類型推論也和類型檢查有關，當咱們沒有特地指明類型時，TypeScript 會自動進行類型推論來肯定類型

通用

let x = 3 // success ，這裏x被推論出是number型的
複製代碼

上下文類型

有的時候 TypeScript 會根據所處的上下文進行推論 好比咱們一般的寫法：

window.onmousedown = function(mouseEvent) {
    console.log(mouseEvent.button);  // Error！
};
複製代碼

上面這種寫法沒有指明 mouseEvent 的類型，TypeScript 會根據 window.onmousedown 來推論，可是把 mouseEvent 設置爲 any 類型就能夠經過類型檢查了