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 = n
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'
}

文章標題：TypeScript 全面進階指南之類型篇
當前路徑：http://vcdvsql.cn/article24/dsdecje.html

成都網站建設公司_創新互聯，為您提供Google、服務器托管、品牌網站建設、網站收錄、品牌網站設計、

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯