一文讀懂TS索引簽名

来源:https://www.cnblogs.com/UmaruChan/archive/2022/05/19/16287509.html
-Advertisement-
Play Games

索引:對象或數組的對應位置的名字 數組的索引就是 number 類型的 0,1,2,3... 對象的索引就是 string 類型的屬性名 數字索引簽名:通過定義介面用來約束數組 type numberIndex{ [index:number]:string } const testArray:num ...


索引:對象或數組的對應位置的名字

數組的索引就是 number 類型的 0,1,2,3...
對象的索引就是 string 類型的屬性名

數字索引簽名:通過定義介面用來約束數組

type numberIndex{
    [index:number]:string
}
const testArray:numberIndex = ["1","2",3]// 不能將類型“number”分配給類型“string”。ts(2322) 所需類型來自此索引簽名

可以看到 testArray 數組的第三位不符合 numberIndex 的約束.

TIP
索引簽名的名稱如[index:number]:string里的index除了可讀性外,並無任何意義.但有利於下一個開發者理解你的代碼.

字元串索引簽名:用於約束對象

type objectType{
    [propName:string]:number
}
const testObj:objectType = {
    "name":100,
    "age":"200" // 不能將類型“string”分配給類型“number”。ts(2322) 所需類型來自此索引簽名。
}

可以看到 testObj 的第二個對象不符合 objectType 的約束.

註意事項

可以看到上述的例子我都沒有在類型別名中添加其他的約束條件,僅寫了一個索引簽名約束

type attentionType{
    name: string; // Ok
    age?: number; // 類型“number | undefined”的屬性“age”不能賦給“string”索引類型“string”。ts(2411)
    sex?: undefined; // OK
    [propName: string]: string | undefined;
}

上述例子說明瞭,一旦定義了索引簽名,那麼確定屬性和可選屬性的類型都必須是它的類型的子集


可以同時使用兩種類型的索引,但是數字索引的返回值必須是字元串索引返回值類型的子類型。 這是因為當使用 number 來索引時,JavaScript 會將它轉換成 string 然後再去索引對象。

interface Animal {
  name: string;
}
interface Dog extends Animal {
  breed: string;
}

interface NotOkay {
  [x: string]: Dog;
  [x: number]: Animal; // Error
}

interface Okay {
  [x: string]: Animal;
  [x: number]: Dog; // OK
}

參考鏈接: https://juejin.cn/post/7003171767560716302#heading-21


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

-Advertisement-
Play Games
更多相關文章
  • 今天我們來認識一位接觸 OpenHarmony 不到一年,便帶領團隊成功開發出一款“啟航 KP“智能開發套件的開發者——軟通動力資深項目經理許北林。 ...
  • 這次更新的設計規範不僅新增了更多應用場景案例,幫助大家高效設計不同類型的業務應用,還通過清晰直觀的案例對比圖,幫助大家有效避坑。 ...
  • 在音視頻應用中我們經常涉及到耳機麥克風和設備麥克風的切換。不同聲道的配置。在遇到這種情況的時候,我們如何配置呢? 耳返即耳機採集監聽,在設備上插入耳機(普通耳機或藍牙耳機)後,能從本機耳機側聽到本設備麥克風采集的聲音。 雙聲道即兩個聲音通道,聽到聲音時可以根據左耳和右耳對聲音相位差來判斷聲源的具體... ...
  • 對於運營者來說,消息推送一直是提升用戶活躍與轉化的重要工具,如何在提升轉化的情況下,同時不降低用戶的接受程度,這一直是運營不斷追求的目標。 好的推送不只在於優質的推送內容,還需要把握合適的時機。在合適時機把用戶喜歡的內容推送給他們,才能有效促進推送轉化。作為一名用戶,大家每天都會在各個時間點收到不同 ...
  • 堆積了兩天一起發的,先祝大家節日快樂 後面任務很繁重,還有登錄註冊組件還有後臺管理頁面,真的繁重,我現在感覺每天全天時間都在學都不一定學得完,主要想在六月一號之前把整個項目過一遍。看看能不能創造奇跡 一.防抖和節流 拋出一個問題,就是我們的三級聯動,正常情況你慢慢的去滑動是沒有bug的,但是當你快速 ...
  • 一、引言 繼上次實現文件上傳功能後,產品經理又提出了新的需求:上傳圖片預覽及進度條效果。本次就來搞定這個功能,這次開發基於上次的隨筆,需要的小伙伴們自取 -- 如何使用Ajax實現簡單的文件上傳。 二、瞭解原理 要想實現文件預覽效果,這裡使用的是 FileReader 對象。使用它的 readAsD ...
  • /* 下述代碼近供參考 水仙花數是指一個3位數,它的每個位上的數字3次冪之和等於它本身。 例如:(1的3次方+5的3次方+3的3次方=153),請列印所有的水仙花數。 */ // 第一種方式 for(var a=0;a<10;a++) { for(var b=0;b<10;b++) { for( v ...
  • in操作符作用: 遍歷類型 基本用法 type roles = "tester" | "developer" | "manager"; const staffCount: { [k in roles]: number } = { tester: 100, developer: 200, manage ...
一周排行
    -Advertisement-
    Play Games
  • 什麼是工廠模式 工廠模式是最常用的設計模式之一,屬於創建型模式。 有點: 解耦,可以把對象的創建和過程分開 減少代碼量,易於維護 什麼時候用? 當一個抽象類有多個實現的時候,需要多次實例化的時候,就要考慮使用工廠模式。 比如:登錄的抽象類ILoginBusiness,它有2個實現,一個用用戶名密碼登 ...
  • 這次iNeuOS升級主要升級圖形渲染引擎和增加豐富的圖元信息,可以很快的方案應用。總共增加41個通用和行業領域的圖元應用,增加2154個圖元信息,現在iNeuOS視圖建模功能模塊總共包括5894個行業圖元信息。現在完全支持製作高保真的工藝流程和大屏展示效果。 ...
  • 效果圖先附上: 首先 這是我是參考 教程:使用 SignalR 2 和 MVC 5 實時聊天 | Microsoft Docs 先附上教程: 在“添加新項 - SignalRChat”中,選擇 InstalledVisual> C#>WebSignalR>,然後選擇 SignalR Hub 類 (v ...
  • 一、前言 項目中之前涉及到胎兒心率圖曲線的繪製,最近項目中還需要添加心電曲線和血樣曲線的繪製功能。今天就來分享一下心電曲線的繪製方式; 二、正文 1、胎兒心率曲線的繪製是通過DrawingVisual來實現的,這裡的心電曲線我也是採用差不多相同的方式來實現的,只是兩者曲線的數據有所區別。心電圖的數據 ...
  • 安裝 Redis # 首先安裝依賴gcc, 後面需要使用make編譯redis yum install gcc -y # 進入 /usr/local/src 目錄, 把源碼下載到這裡 cd /usr/local/src # 下載 redis 7.0.2 的源碼,github被牆,可以使用國內的地址 ...
  • Redis 的定義? 百度百科: Redis(Remote Dictionary Server ),即遠程字典服務,是一個開源的使用ANSI C語言編寫、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。 中文官網: Redis是一個開源(BSD許可),記憶體存 ...
  • 事情的起因是收到了一位網友的請求,他的java課設需要設計實現迷宮相關的程式——如標題概括。 我這邊不方便透露相關信息,就只把任務要求寫出來。 演示視頻指路👉: 基於JavaFX圖形界面的迷宮程式演示_嗶哩嗶哩_bilibili 完整代碼鏈接🔎: 網盤:https://pan.baidu.com ...
  • Python中的字典 Python中的字典是另一種可變容器模型,且可存儲任意類型對象。鍵值使用冒號分割,你可以看成是一串json。 常用方法 獲取字典中的值 dict[key] 如果key不存在會報錯,建議使用dict.get(key),不存在返回None 修改和新建字典值 dict[key]=va ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“加班使我快樂”。 面試官: 看你簡歷上用過MySQL,問你幾個簡單的問題吧。什麼是聚簇索引和非聚簇索引? 這個問題難不住我啊。來之前我看一下一燈M ...
  • tunm二進位協議在python上的實現 tunm是一種對標JSON的二進位協議, 支持JSON的所有類型的動態組合 支持的數據類型 基本支持的類型 "u8", "i8", "u16", "i16", "u32", "i32", "u64", "i64", "varint", "float", "s ...