初探TypeScript 基礎篇

前言

因爲本身目前在學習typescript;想着邊學習變作筆記，日後也能夠翻出來看看，也分享出來給像我同樣的初學者一塊兒學習。望各位大佬指教。

簡介

什麼是TypeScript

TypeScript是Javascript的類型的超級，它能夠編輯成Javascript，編譯出來的代碼能夠運行在任何瀏覽器上，TypeScript編譯工具能夠運行在任何服務器和系統上，而且它是開源的。
複製代碼

爲何要選擇TypeScript

1. TypeScript增長了代碼的可讀性和可維護性
    能夠在編輯的夾斷就發現大部分錯誤，比在運行程序的時候發現錯誤更加直觀；
    加強了編輯器和IDE的功能，包括代碼補全、接口提示等等
2. 擁有活躍的社區
    大部分第三方庫都有提供TypeScript的類型定義文件
複製代碼

安裝TypeScript

TypeScript 的命令行工具安裝方法以下：

npm i -g typescript

以上命令會在全局環境下安裝 tsc 命令，安裝之後咱們就能夠在任何終端執行tsc命令了。咱們能夠簡單的建立一個文件 hello.tsc 咱們能夠經過命令到當前文件所在目錄，執行命令

tsc hello.tsc

編輯前代碼 hello.tsc

function sayHello(person: string) {
    return `Hello,${person}`;
}
let user = 'Mark';
console.log(sayHello(user));
複製代碼

執行tsc hello.tsc後咱們會看到同級目錄下面會自動生成一個hello.js

function sayHello(person) {
    return `Hello,${person}`;
}
let user = 'Mark';
console.log(sayHello(user));
複製代碼

加入咱們在sayHello方法中傳入的是一個非string類型的參數 會發生什麼呢

function sayHello(person: string) {
    return `Hello,${person}`;
}
let user = 10010;
console.log(sayHello(user));
複製代碼

編輯器中會提示錯誤，編譯的時候也會出錯：Argument of type 'number' is not assignable to parameter of type 'string'. 此時你會發現 TypeScript 編譯的時候即便報錯了，仍是會生成編譯結果，咱們仍然可使用這個編譯以後的文件。

基礎

上面簡單的介紹了下TypeScript的安裝及簡單的hello實例，下面會介紹TypeScript 中的經常使用類型和一些基本概念，這樣能夠對TypeScript有個初步的瞭解；

原始數據類型

原始數據類型只要包括：boolean number string null undefined 以及es6中新的類型Symbol； 下面咱們介紹：boolean number string null undefined在TypeScript中的使用

boolean

boolean是最基礎的數據類型，在TypeScript 使用boolean定義布爾值類型；

let isSay: boolean = false; //編譯經過
    // 咱們在看下面一個 假如咱們使用構造函數建立一個布爾值是否會編譯用過呢？？？？
    let createBoolean: boolean = new Boolean(8); // Type 'Boolean' is not assignable to type 'boolean'.
    // 因此使用構造函數 Boolean 創造的對象不是布爾值：
複製代碼

number

使用number定義數值類型：

let age: number = 25 // 編譯經過
    // 一樣若是咱們age變量賦值的爲非number 編譯就會報錯
複製代碼

string

使用string定義數值類型：

let name: string = 'mark' // 編譯經過
    // 一樣若是咱們name變量賦值的爲非string 編譯就會報錯
複製代碼

空值

在JavaScript中是沒有空值（Void）的概念，可是在 TypeScript 中，能夠用 void 表示沒有任何返回值的函數：

function sayHello(): void{
        console.log('我沒有任何返回值')；
    }
複製代碼

null & undefined

在 TypeScript 中，可使用 null 和 undefined 來定義這兩個原始數據類型：

let m: undefined = undefined;
    let n: null = null;
複製代碼

注意： 由於undefined 和 null 是全部類型的子類型，因此null undefined能夠賦值給其餘類型

let m: undefined = undefined;
    let age: number = m;
    // 編輯經過
複製代碼

任意值

任意值（any）用來表示容許賦值爲任意類型。

什麼是任意值類型

上面咱們說到，若是是一個普通類型，在賦值的過程當中改變類型是不容許的 可是若是是any類型，那麼容許被賦值爲任意類型。

let age: number = 1; // 普通類型只能賦值number
    age = 'one'; // 報錯
    let anyAge: any = 'one'; 
    anyAge = 1; // 編輯經過
複製代碼

類型推論

若是沒有明確的指定類型，那麼 TypeScript 會依照類型推論的規則推斷出一個類型。 例如：

let age = 1;
    age = 'one';
    //TypeScript 會在沒有明確的指定類型的時候推測出一個類型 
    等價於
    let age: number = 1;
    age = 'one';
複製代碼

聯合類型

聯合類型？

聯合類型表示取值能夠爲多種類型中的一種。

let age: string | number;
    age = 1;
    age = 'one';
    // 以上編譯是經過的;
    // 若是age是boolean呢
    age = false; // 編譯報錯
複製代碼

經過以上代碼 能夠獲得一個結論：let age: string | number時，age的類型只能是string or number ，不能是其餘類型。

訪問聯合類型的屬性和方法

當 TypeScript 不肯定一個聯合類型的變量究竟是哪一個類型的時候，咱們只能訪問此聯合類型的全部類型裏共有的屬性或方法：

let age: string | number;
    age = 1;
    console.log( age.length ); // 編譯時報錯
    age = 'one';
    console.log( age.length ); // 3
複製代碼

對象的類型

對象的類型在 TypeScript 中咱們使用接口來定義-- interfaces

interface Person {
    name: string;
    age: number;
}
let user: Person = {
    name: 'mark',
    age: 1,
}
// 假如咱們
let user1: Person = {
    name: 'mark',
}
// or
let user2: Person = {
    name: 'mark',
    age: 1,
    work: 'web',
}
// 編輯報錯
複製代碼

定義得變量比接口少了一些屬性和多了一些屬性都是不容許的，編譯都會報錯，因此在賦值的時候，變量的形狀必須和接口保持一致。

假如咱們想不要徹底匹配一個形狀 能夠隨意添加和減小怎麼辦呢？這個時候能夠用到可選屬性和任意屬性 可選屬性：該屬性能夠不存在 任意屬性： 該屬性能夠是任意類型，可是要注意： 一旦定義了任意屬性，那麼肯定屬性和可選屬性的類型必須是它的類型的子集。

insterface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let user: Person = {
    name: 'mark',
    age: 1,
    work: 'web'
};
// 若是任意類型定義爲string 那麼 上面代碼會報錯。
insterface Person {
    name: string;
    age?: number;
    [propName: string]: string; //error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'
}

複製代碼

咱們在日常工做中常常會但願有些字段只能在建立的時候被賦值，好比數據中的id； 在TypeScript中如何定義只讀屬性呢？

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let user: Person = {
    id: 1,
    name: 'mar;',
    work: 'web'
};
user.id = 2;
// 報錯 Cannot assign to 'id' because it is a constant or a read-only property.
複製代碼

數組的類型

數組類型的表示方法：

類型+[] 表示法

let ages: number[] = [1,2,3,4,5];
let ages1: number[] = [1, 2, 3, '4']; // 報錯
ages.push('2'); // 報錯
複製代碼

數組泛型 Array<類型>

let ages: Array<number> = [1, 2, 3];
複製代碼

用接口表示數組

interface NumberArray {
    [index: number]: number;
}
let ages: NumberArray = [1, 1, 2, 3, 5];
複製代碼

函數的類型

一個函數有輸入和輸出，要在 TypeScript 中對其進行約束，須要把輸入和輸出都考慮到，其中函數聲明的類型定義較簡單：

function sum(x: number, y: number): number {
    return x + y;
}
// es6 => 用來表示函數的定義，左邊是輸入類型，須要用括號括起來，右邊是輸出類型
let sum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

複製代碼

一樣 跟其餘類型同樣 輸入多餘的（或者少於要求的）參數，是不被容許的：

總結

以上是對TypeScript基礎的一個學習。也是本身學習的一個筆記。奈何水平有限，望各位大佬指出問題，謝謝！