TypeScript 全面進階指南之類型篇

来源:https://www.cnblogs.com/adore/archive/2022/11/14/16848531.html
-Advertisement-
Play Games

TypeScript 是對 JavaScript 的補充，將 JavaScript 由動態類型、弱類型語言轉為靜態類型、強類型的語言 簡介 TypeScript 由三個部分組成： 類型：為 JavaScript 代碼添加類型與類型檢查來確保健壯性，進入學習 語法：提前使用新語法或新特性來簡化代碼，進 ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • FusionInsight MRS Flink DataStream API讀寫Hudi實踐
    摘要：目前Hudi只支持FlinkSQL進行數據讀寫，但是在實際項目開發中一些客戶存在使用Flink DataStream API讀寫Hudi的訴求。 本文分享自華為雲社區《FusionInsight MRS Flink DataStream API讀寫Hudi實踐》，作者： yangxiao_mr ...
  • MongoDB - 入門指南
    簡單瞭解 MongoDB 的基本概念之後，就需要瞭解其提供的一些工具和數據邏輯結構，以真正開始入門 MongoDB 的學習。 ...
  • AI音樂創作，讓每一個人都成為音樂家
    從錄音帶、MP3到專業的耳機、音箱，隨著音樂消費方式的不斷升級，音樂創作的專業“門檻”也在AI技術的加持下逐漸大眾化，創作者的創新設計、創作頻率也在持續增強，能降低創作門檻且智能化的創作工具就顯得尤為重要。 懷揣著“人人都能玩點音樂”的初衷，唱鴨搭建了自己的音樂社區，希望為普通用戶提供智能有趣的音樂 ...
  • AR Engine光照估計能力，讓虛擬物體在現實世界更具真實感
    AR是一項現實增強技術，即在視覺層面上實現虛擬物體和現實世界的深度融合，打造沉浸式AR交互體驗。而想要增強虛擬物體與現實世界的融合效果，光照估計則是關鍵能力之一。 人們所看到的世界外觀，都是由光和物質相互作用而決定的，當光源照射到物體上時，光線通過被吸收、反射和透射等方式，傳遞給人們物體的顏色、亮度 ...
  • 線上客服系統源碼開發實戰總結：動態載入js文件實現粘貼一段js的sdk代碼，直接引入插件效果
    常見的線上客服系統中，或者是統計代碼中，粘貼一段js代碼，就能引入某個插件的效果。這個是怎麼實現的呢？ 原理非常的簡單： 對於不同的載入文件類型創建不同的節點，然後添加各自的屬性，最後扔到head 標簽裡面。 經測試，本方法相容各瀏覽器，安全、無毒、環保，是 web 開發人員工作常備代碼。 //動態 ...
  • Vue2.x下的各組件如何傳遞信息？（不使用Vuex）
    Vue2（選項式）一,父組件向子組件傳遞數據： 介紹：在引用的子組件中定義 自定義屬性 msg與user.可以通過v-bind 綁定要發送的數據。 在子組件中使用 props 接收自定義屬性msg與user. 可以直接在模板中使用。但是如果想要修改的話建議傳到data中，再進行修改。 代碼如下： 二 ...
  • vue腳手架的使用
    vue腳手架的使用 搭建vue腳手架環境 1.傻瓜式安裝node: 官網下載：https://nodejs.org/zh-cn/ 2.安裝cnpm: >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安裝vue最新 ...
  • 線上客服系統源碼開發實戰總結：H5 Notifications瀏覽器桌面通知
    在瀏覽器訪問網站，想在瀏覽器最新化的情況下，也能收到右下角的消息通知 這個時候就會用到H5 Notifications 具體效果可以參照演示頁面 演示頁面-唯一線上客服系統 實現代碼js function notify(title, options, callback) { // 先檢查瀏覽器是否支 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類