TypeScript 全面進階指南之型別篇-有解無憂

TypeScript 是對 JavaScript 的補充，將 JavaScript 由動態型別、弱型別語言轉為靜態型別、強型別的語言

簡介

TypeScript 由三個部分組成：

型別：為 JavaScript 代碼添加型別與型別檢查來確保健壯性，進入學習
語法：提前使用新語法或新特性來簡化代碼，進入學習
工程：最侄訓得可用的 JavaScript 代碼，進入學習

環境

npm i typescript ts-node ts-node-dev -g  # 安裝 typescript 和 執行工具

tsc --init  # 在當前目錄生成 typescript 組態檔 tsconfig.json

ts-node index.ts  # 將 typescript 編譯成 nodejs 并執行，常用引數有
# -P：指定 ts 組態檔位置，默認使用專案下的 tsconfig.json 檔案
# -T：禁用型別檢查
# --emit --compilerHost：執行并輸出編譯后的檔案在 .ts-node 檔案夾下

ts-node-dev index.ts  # 監聽檔案改變并自動執行
# --respawn：啟用監聽重啟
# --transpile-only```：禁用型別檢查，更快的編譯速度

原始型別

const nam: string = 'zsg'
const bol: boolean = false
const age: number = 18
const bigint: bigint = 222222222n
const undef: undefined = undefined
const nul: null = null
const symbol: symbol = Symbol('hell')
const obj: object = {}

null 和 undefined

在 JavaScript 中 null 表示這里有值，但是個空值， undefined 表示這里沒有值
在 TypeScript 中沒有開啟 strictNullChecks 檢查的情況下 null 和 undefined 會被視作其他型別的子型別

const str: string = null
const num: number = undefined
const nul: undefined = null
const undef: null = undefined

void

void 在 JavaScript 中表示執行后面的運算式或括號中的運算式并回傳 undefined
void 在 TypesScript 中用于描述一個沒有 return 任何值的函式的回傳值，undefined 能夠賦值給 void

const s: void = undefined
function f():void { }

陣列的型別注解

有兩種方式宣告一個陣列

const arr1: string[] = ['a', 'b']
const arr2: Array<number> = [3, 4]

對于定長的陣列，使用 Tuple 型別，越界訪問就會報錯

const arr3: [string, string, number] = ['a', 'b', 4]

為陣列的設定可選成員，可選成員值默認為 undefined

const arr4: [string, string?, number?] = ['a', undefined]

使用具名元組

const arr5: [name: string, age: number, sex?:boolean] = ['z', 10]

物件的型別注解

使用 interface 宣告一個介面結構，使用這個結構作為物件的注解

interface People {
    name: string,
    age: number,
    sex: boolean
}

const obj1: People = {
    name: 'z',
    age: 10,
    sex: true
}

可選屬性和只讀屬性

interface People {
    name: string,
    readonly age: number,
    sex?: boolean
}

const obj2: People = {
    name: 'z',
    age: 10
}

Object 和 object

Object 包含了所有的型別，object 包含所有非原始型別的型別即陣列，物件，函式

const s1: Object = 12
const s2: Object = []

const s3: object = {}
const s4: object = []
const s5: object = () => {}

字面量型別和聯合型別

字面量型別主要包括字串字面量，數字字面量，布爾字面量，物件字面量，他們可以直接作為型別標注

const str1: 9 = 9

聯合型別是一組型別的可用集合

const str2: 9 | 'a' | true = true

type users = {bol: true, aaa: string} | {bol: false, bbb: string}  // 創建型別別名
const user: users = {  // 實作互測驗性
    bol: false,
    bbb: 'a'
}

列舉

數字列舉默認從 0 開始，以 1 遞增，數字列舉是可以雙向映射的，而字串列舉是單向的

enum Items1 {
    name = 'zsg',
    age = 1,
    sex
}
console.log(Items1.name, Items1.age, Items1.sex, Items1[1])  // zsg 1 2 age

常量列舉，只能通過列舉成員訪問列舉值，不能反向訪問

const enum Items2 {
    name = 'zsg',
    age = 1,
    sex
}

函式

function fun1(name: string): number{
    return name.length
}
const fun2: (name: string) => number = function(name) {
    return name.length
}

type Fun1 = (name: string) => number  // 使用別名
const fun3: Fun1 = name => name.length

interface Fun2 {  // 使用介面
    (name: string): number
}
const fun4: Fun2 = name => name.length

function fun5(): void{ }  // 函式沒有回傳值就是 void 型別

函式引數

function fun1(name: string, age?: number): void { }  // 可選引數，默認為 undefined
function fun2(name: string, age: number=12): void { }  // 可選引數，并設定了默認值
function fun3(name: string, ...rest: string[]): void{ }  // rest 引數為一個陣列

函式多載，實作與入參關聯的回傳值型別，最后是函式的實作需包含所有可能情況

function fun1(name: string): string
function fun1(name: number): number
function fun1(name: string | number): number | string {
    return name
}

Class 類

class Foo{
    public name: string  // 此類成員在類／類的實體／子類中都能被訪問
    readonly version = "1.0.1"  // 只讀成員
    static size = "1024G"  // 靜態成員
    constructor(name: string) {
        this.name = name
    }
    log(text: string): void {
        this._name = text
    }
    protected get _name(): string {  // 此類成員只能在類與子類中被訪問
        return this.name + '!'
    }
    private set _name(v: string) {  // 此類成員僅能在類的內部被訪問
        this.name = v
    }
}

在建構式中的引數加上訪問性修飾符即可自動賦值

class Foo{
    constructor(public name: string, private age: number) { }
}

繼承中使用 override 覆寫基類中原有的屬性或方法，若基類不存在會報錯

class Foo { name = 1 }
class Boo extends Foo{
    override name = 2
}

使用抽象類

abstract class Boo{
    abstract name: string
    abstract log(text: string): string
}

class Foo implements Boo{
    name = 'zzz'
    log(text: string) {
        return 'zzz'
    }
}

使用介面 interface

interface Boo{
    // new(): Foo  類似于描述函式的方式  
    name: string
    log(text: string): string
}

class Foo implements Boo{
    name = 'zzz'
    log(text: string) {
        return 'zzz'
    }
}

面向物件的五項基本原則

S 單一功能原則：一個類應該僅具有一種職責
O 開放封閉原則：一個類應該是可擴展但不可修改的
L 里式替換原則：一個派生類可以在程式的任何一處對其基類進行替換
I 介面分離原則：類的實作方應當只需要實作自己需要的那部分介面
D 依賴倒置原則：對功能的實作應該依賴于抽象層

any，unknown，never

any 型別

TypeScript 提供了的內置型別 any，來表示接收任意型別
只宣告未提供初始值的變數和不為函式引數提供型別標注時，都將被隱式推導為 any
當啟用了 noImplicitAny 時，不為函式引數提供型別標注時會報錯
它可以在宣告后再次接收任意型別，同時可以賦值給任意型別的變數

let bol: any = true
bol = 1

let str: string = bol

let arr: any[] = [1, true, 'a']

function fun(a, b) {}

unknown 型別

unknown 表示任意型別，且可以再次賦值為任意型別
只能賦值給 any 和 unknown 型別

let unk: unknown = true
unk = 1
let b: any = unk

never 型別是空型別，不攜帶任何型別資訊，描述根本不存在的型別

type sn = string & number  // never
function aa(): never {
    throw new Error()
}

型別斷言

型別斷言能夠顯式告知型別檢查程式當前這個變數的型別，其實就是一個將變數的已有型別更改為新指定的型別

let unk: unknown = { name: 'zzz' }
console.log((unk as {name: string}).name, (<{name: string}>unk).name)

使用雙重斷言

let str: string = 'zz'
console.log((str as unknown as {name: string}).name)

使用非空斷言，使用 ! 和可選鏈 ? 的用法類似，表示前面的生命一定非空，即排除了 null 和 undefined 型別

let str: {func?: () => number|null} = {
    func: () => null
}

console.log(str.func!()!.toFixed)
console.log(str.func?.()?.toFixed)

實作部分介面

interface a{
    name1: string,
    age: number
}

const b = <a>{
    name1: 'aa'
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/533546.html

標籤：JavaScript

上一篇：Flask框架：如何運用Ajax輪詢動態繪圖

下一篇：在線客服系統原始碼開發實戰總結：H5 Notifications瀏覽器桌面通知