TypeScript 是對 JavaScript 的補(bǔ)充，將 JavaScript 由動態(tài)類型、弱類型語言轉(zhuǎn)為靜態(tài)類型、強(qiáng)類型的語言

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù)，網(wǎng)站設(shè)計(jì)，網(wǎng)站托管維護(hù)等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出成都創(chuàng)新互聯(lián)公司。

簡介

TypeScript 由三個部分組成：

• 類型：為 JavaScript 代碼添加類型與類型檢查來確保健壯性，進(jìn)入學(xué)習(xí)
• 語法：提前使用新語法或新特性來簡化代碼，進(jìn)入學(xué)習(xí)
• 工程：最終獲得可用的 JavaScript 代碼，進(jìn)入學(xué)習(xí)

環(huán)境

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

tsc --init  # 在當(dāng)前目錄生成 typescript 配置文件 tsconfig.json

ts-node index.ts  # 將 typescript 編譯成 nodejs 并執(zhí)行，常用參數(shù)有
# -P：指定 ts 配置文件位置，默認(rèn)使用項(xiàng)目下的 tsconfig.json 文件
# -T：禁用類型檢查
# --emit --compilerHost：執(zhí)行并輸出編譯后的文件在 .ts-node 文件夾下

ts-node-dev index.ts  # 監(jiān)聽文件改變并自動執(zhí)行
# --respawn：啟用監(jiān)聽重啟
# --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 中表示執(zhí)行后面的表達(dá)式或括號中的表達(dá)式并返回 undefined
void 在 TypesScript 中用于描述一個沒有 return 任何值的函數(shù)的返回值，undefined 能夠賦值給 void

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

數(shù)組類型

有兩種方式聲明一個數(shù)組

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

對于定長的數(shù)組，使用 Tuple 類型，越界訪問就會報(bào)錯

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

為數(shù)組的設(shè)置可選成員，可選成員值默認(rèn)為 undefined

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

使用具名元組

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

對象類型

使用 interface 聲明一個接口結(jié)構(gòu)，使用這個結(jié)構(gòu)作為對象的注解

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 包含所有非原始類型的類型即數(shù)組，對象，函數(shù)

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

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

字面量類型和聯(lián)合類型

字面量類型主要包括字符串字面量，數(shù)字字面量，布爾字面量，對象字面量，他們可以直接作為類型標(biāo)注

const str1: 9 = 9

聯(lián)合類型是一組類型的可用集合

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

type users = {bol: true, aaa: string} | {bol: false, bbb: string}  // 創(chuàng)建類型別名
const user: users = {  // 實(shí)現(xiàn)互斥屬性
    bol: false,
    bbb: 'a'
}

枚舉

數(shù)字枚舉默認(rèn)從 0 開始，以 1 遞增，數(shù)字枚舉是可以雙向映射的，而字符串枚舉是單向的

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
}

函數(shù)

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{ }  // 函數(shù)沒有返回值就是 void 類型

函數(shù)參數(shù)

function fun1(name: string, age?: number): void { }  // 可選參數(shù)，默認(rèn)為 undefined
function fun2(name: string, age: number=12): void { }  // 可選參數(shù)，并設(shè)置了默認(rèn)值
function fun3(name: string, ...rest: string[]): void{ }  // rest 參數(shù)為一個數(shù)組

函數(shù)重載，實(shí)現(xiàn)與入?yún)㈥P(guān)聯(lián)的返回值類型，最后是函數(shù)的實(shí)現(xiàn)需包含所有可能情況

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  // 此類成員在類／類的實(shí)例／子類中都能被訪問
    readonly version = "1.0.1"  // 只讀成員
    static size = "1024G"  // 靜態(tài)成員
    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) {  // 此類成員僅能在類的內(nèi)部被訪問
        this.name = v
    }
}

在構(gòu)造函數(shù)中的參數(shù)加上訪問性修飾符即可自動賦值

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

繼承中使用 override 覆蓋基類中原有的屬性或方法，若基類不存在會報(bào)錯

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  類似于描述函數(shù)的方式  
    name: string
    log(text: string): string
}

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

面向?qū)ο蟮奈屙?xiàng)基本原則

• S 單一功能原則：一個類應(yīng)該僅具有一種職責(zé)
• O 開放封閉原則：一個類應(yīng)該是可擴(kuò)展但不可修改的
• L 里式替換原則：一個派生類可以在程序的任何一處對其基類進(jìn)行替換
• I 接口分離原則：類的實(shí)現(xiàn)方應(yīng)當(dāng)只需要實(shí)現(xiàn)自己需要的那部分接口
• D 依賴倒置原則：對功能的實(shí)現(xiàn)應(yīng)該依賴于抽象層

any，unknown，never

any 類型

• TypeScript 提供了的內(nèi)置類型 any，來表示接收任意類型
• 只聲明未提供初始值的變量和不為函數(shù)參數(shù)提供類型標(biāo)注時，都將被隱式推導(dǎo)為 any
• 當(dāng)啟用了 noImplicitAny 時，不為函數(shù)參數(shù)提供類型標(biāo)注時會報(bào)錯
• 它可以在聲明后再次接收任意類型，同時可以賦值給任意類型的變量

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()
}

類型斷言

類型斷言能夠顯式告知類型檢查程序當(dāng)前這個變量的類型，其實(shí)就是一個將變量的已有類型更改為新指定的類型

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

使用雙重?cái)嘌?/p>

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)

實(shí)現(xiàn)部分接口

interface a{
    name1: string,
    age: number
}

const b = {
    name1: 'aa'
}