天天看點

[TypeScript]簡介、開發環境搭建、基本類型

TypeScript簡介

說到TypeScript我們不得不提到JavaScript,JS是由網景公司發明的一款弱類型動态腳本語言。說到弱類型,我們也就知道它非常的靈活,但是這個靈活是一把雙刃劍。這就導緻有些錯誤可能在編譯時發現不了,直到運作的時候才會報錯。這非常不利于我們後期的維護,而現在很多企業的大型項目轉而去使用TypeScript來解決這個問題。

産生背景:TypeScript 起源于使用JavaScript開發的大型項目 。由于JavaScript語言本身的局限性,難以勝任和維護大型項目開發。是以微軟開發了TypeScript ,使得其能夠勝任開發大型項目。

TypeScript是微軟開發的一個開源的程式設計語言,通過在JavaScript的基礎上添加靜态類型定義建構而成。TypeScript通過TypeScript編譯器或Babel轉譯為JavaScript代碼,可運作在任何浏覽器,任何作業系統。

[TypeScript]簡介、開發環境搭建、基本類型
  1. TypeScript是JavaScript的超集。
  2. 它對JS進行了擴充,向JS中引入了類型的概念,并添加了許多新的特性。
  3. TS代碼需要通過編譯器編譯為JS,然後再交由JS解析器執行。
  4. TS完全相容JS,換言之,任何的JS代碼都可以直接當成JS使用。
  5. 相較于JS而言,TS擁有了靜态類型,更加嚴格的文法,更強大的功能;TS可以在代碼執行前就完成代碼的檢查,減小了運作時異常的出現的幾率;TS代碼可以編譯為任意版本的JS代碼,可有效解決不同JS運作環境的相容問題;同樣的功能,TS的代碼量要大于JS,但由于TS的代碼結構更加清晰,變量類型更加明确,在後期代碼的維護中TS卻遠遠勝于JS。
[TypeScript]簡介、開發環境搭建、基本類型

TypeScript 開發環境搭建

  1. 下載下傳Node.js
    • 64位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
    • 32位:https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
因為TS需要編譯才能轉換為JS,是以這個時候我們需要一個TS的解析器,而TS的解析器隻用nodejs寫的,是以這個時候我們要安裝TS的解析器,我們需要先安裝nodejs。
[TypeScript]簡介、開發環境搭建、基本類型

左邊的LTS代表長期維護,也就是穩定版

而右邊的current代表最新版

  1. 安裝Node.js
在指令行輸入node -v進行驗證:
[TypeScript]簡介、開發環境搭建、基本類型
  1. 使用npm全局安裝typescript
    • 進入指令行
    • 輸入:npm i -g typescript
npm是node的包管理工具,我們可以使用在指令行輸入tsc來證明你的安裝成功:
[TypeScript]簡介、開發環境搭建、基本類型
  1. 建立一個ts檔案
以ts結尾就行
[TypeScript]簡介、開發環境搭建、基本類型
  1. 使用tsc對ts檔案進行編譯
    • 進入指令行
    • 進入ts檔案所在目錄
    • 執行指令:tsc xxx.ts

結果:

[TypeScript]簡介、開發環境搭建、基本類型
在webstorm中,你編譯成功之後,他會用一種折疊的方式顯示它們的關系:
[TypeScript]簡介、開發環境搭建、基本類型

基本類型

類型聲明

  • 類型聲明是TS非常重要的一個特點
  • 通過類型聲明可以指定TS中變量(參數、形參)的類型
  • 指定類型後,當為變量指派時,TS編譯器會自動檢查值是否符合類型聲明,符合則指派,否則報錯
    [TypeScript]簡介、開發環境搭建、基本類型
    即使報錯了,但是如果仍然符合js文法,那麼ts檔案還是會被成功編譯為js檔案
  • 簡而言之,類型聲明給變量設定了類型,使得變量隻能存儲某種類型的值
  • 文法:
    • let 變量: 類型;
      
      let 變量: 類型 = 值;
      
      function fn(參數: 類型, 參數: 類型): 類型{
          ...
      }
                 
在ts中你傳入參數的數量是嚴格控制的(在js中不會報錯):
[TypeScript]簡介、開發環境搭建、基本類型

自動類型判斷

  • TS擁有自動的類型判斷機制
  • 當對變量的聲明和指派是同時進行的,TS編譯器會自動判斷變量的類型
  • 是以如果你的變量的聲明和指派時同時進行的,可以省略掉類型聲明
// 聲明一個變量a,同時指定它的類型為number
let a: number;

// a 的類型設定為了number,在以後的使用過程中a的值隻能是數字
a = 10;
a = 33;
// a = 'hello'; // 此行代碼會報錯,因為變量a的類型是number,不能指派字元串
let b: string;
b = 'hello';
// b = 123;

// 聲明完變量直接進行指派
// let c: boolean = false;

// 如果變量的聲明和指派是同時進行的,TS可以自動對變量進行類型檢測
let c = false;
c = true;

// JS中的函數是不考慮參數的類型和個數的
// function sum(a, b){
//     return a + b;
// }
           
==我們将冒号後面的内容了解為對目前變量的限定條件。==

類型

  • 類型:
    類型 例子 描述
    number 1, -33, 2.5 任意數字
    string 'hi', "hi",

    hi

    任意字元串
    boolean true、false 布爾值true或false
    字面量 其本身 限制變量的值就是該字面量的值
    any * 任意類型
    unknown * 類型安全的any
    void 空值(undefined) 沒有值(或undefined)
    never 沒有值 不能是任何值
    object {name:'孫悟空'} 任意的JS對象
    array [1,2,3] 任意JS數組
    tuple [4,5] 元素,TS新增類型,固定長度數組
    enum enum{A, B} 枚舉,TS中新增類型

number

let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;
           

boolean

let isDone: boolean = false;
           

string

let color: string = "blue";
   color = 'red';
   
   let fullName: string = `Bob Bobbington`;
   let age: number = 37;
   let sentence: string = `Hello, my name is ${fullName}.
   
   I'll be ${age + 1} years old next month.`;
           

字面量

也可以使用字面量去指定變量的類型,通過字面量可以确定變量的取值範圍

有點js中const的意味

let color: 'red' | 'blue' | 'black';  //color最後取到的值隻能在這三者中産生
   let num: 1 | 2 | 3 | 4 | 5;
           

使用以及注意點:

// 也可以直接使用字面量進行類型聲明
let a: 10;
a = 10;

// 可以使用 | 來連接配接多個類型(聯合類型)
let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = 'hello';
           

除了可以使用

|

之外,我們還可以使用

&

:

// &表示同時
let j: { name: string } & { age: number };
// j = {name: '孫悟空', age: 18};
           

any

let d: any = 4;
   d = 'hello';
   d = true;
           

使用以及注意點:

// any 表示的是任意類型,一個變量設定類型為any後相當于對該變量關閉了TS的類型檢測
// 使用TS時,不建議使用any類型
// let d: any;  (顯示any)

// 聲明變量如果不指定類型,則TS解析器會自動判斷變量的類型為any (隐式的any)
let d;
d = 10;
d = 'hello';
d = true;
           

unknown

let notSure: unknown = 4;
   notSure = 'hello';
           

使用以及注意點:

// unknown 表示未知類型的值
let e: unknown;
e = 10;
e = "hello";
e = true;

let s:string;

// d的類型是any,它可以指派給任意變量
// s = d;

e = 'hello';

// unknown 實際上就是一個類型安全的any
// unknown類型的變量,不能直接指派給其他變量
if(typeof e === "string"){
    s = e;
}

// 類型斷言,可以用來告訴解析器變量的實際類型
/*
* 文法:
*   變量 as 類型
*   <類型>變量
*
* */
s = e as string;
s = <string>e;

           

void

let unusable: void = undefined;
           

使用以及注意點:

// void 用來表示空,以函數為例,就表示沒有傳回值的函數
function fn(): void{
}
           

never

function error(message: string): never {
     throw new Error(message);
   }
           
never代表什麼都不傳回,連undefined都沒有,是以一般用來抛出一異常,這種類型用的少。

object

let obj: object = {};
           

使用以及注意點:

// object表示一個js對象
let a: object;
a = {};
a = function () {
};

// {} 用來指定對象中可以包含哪些屬性
// 文法:{屬性名:屬性值,屬性名:屬性值····} 注意這裡是嚴格滿足,規定的屬性必須有
// 在屬性名後邊加上?,表示屬性是可選的
let b: {name: string, age?: number};
b = {name: '孫悟空', age: 18};

// [propName: string]: any 表示任意類型的屬性,這個時候屬性的數量不受限制
let c: {name: string, [propName: string]: any};
c = {name: '豬八戒', age: 18, gender: '男'};
           

函數結構的類型聲明:

/*
*   設定函數結構的類型聲明:
*       文法:(形參:類型, 形參:類型 ...) => 傳回值
* */
let d: (a: number ,b: number)=>number;
// d = function (n1: string, n2: string): number{
//     return 10;
// }
           

array

let list: number[] = [1, 2, 3];
   let list: Array<number> = [1, 2, 3];
           

使用以及注意點:

/*
*   數組的類型聲明:
*       類型[]
*       Array<類型>
* */
// string[] 表示字元串數組
let e: string[];
e = ['a', 'b', 'c'];

// number[] 表示數值數值
let f: number[];

let g: Array<number>;
g = [1, 2, 3];

           

tuple

let x: [string, number];
   x = ["hello", 10]; 
           

使用以及注意點:

/*
*   元組,元組就是固定長度的數組  是以這裡的元素數量和類型要嚴格滿足
*       文法:[類型, 類型, 類型]
* */
let h: [string, number];
h = ['hello', 123];
           

enum

enum Color {
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
      Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
      Red = 1,
      Green = 2,
      Blue = 4,
    }
    let c: Color = Color.Green;
           

類型斷言

類型斷言

  • 有些情況下,變量的類型對于我們來說是很明确,但是TS編譯器卻并不清楚,此時,可以通過類型斷言來告訴編譯器變量的類型,斷言有兩種形式:
    • 第一種
      • let someValue: unknown = "this is a string";
        let strLength: number = (someValue as string).length;
                   
      • let someValue: unknown = "this is a string";
        let strLength: number = (<string>someValue).length;
                   

類型别名

// 類型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m: myType;

k = 2;