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 的約束.

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

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
更多相關文章
  • 本文介紹什麼是 SQL 視圖,它們怎樣工作,何時使用它們。視圖提供了一種封裝 SELECT 語句的層次,可用來簡化數據處理,重新格式化或保護基礎數據。 一、視圖 視圖是虛擬的表。與包含數據的表不一樣,視圖只包含使用時動態檢索數據的查詢。 說明:SQLite 的視圖 SQLite 僅支持只讀視圖,所以 ...
  • 本文介紹如何使用 SQL CREATE TABLE 創建新表,DROP TABLE 用來完整地刪除一個表,ALTER TABLE 用來更改表列或其他諸如約束或索引等對象。 一、創建表 SQL 不僅用於表數據操縱,而且還用來執行資料庫和表的所有操作,包括表本身的創建和處理。 一般有兩種創建表的方法: ...
  • 為了助力開發者高效解決崩潰問題,HarmonyOS服務開放平臺推出了“崩潰服務能力”。你是否也好奇崩潰服務能力有哪些功能?如何集成該能力?讓我們一起往下看吧~ ...
  • 之前Content Provider,Room,DataStore一起弄,對於蒟蒻我來說步子邁得太大了,bug滿天飛(DataStore一直給我報錯說同時打開了多個DataStore,卻又找不到問題所在),遂不得不暫且拋下DataStore換回SharedPreference,後來才發現是被Hook ...
  • 5月18日晚上19點,戰“碼”先鋒第一期直播《如何成為一名優秀的OpenHamrony 貢獻者?》,在OpenHarmony社群內成功舉行。 ...
  • 現如今,視頻是用戶記錄生活最熱門的方式,各種App在發佈視頻界面都提供了視頻簡單剪輯的功能。除了增加音樂、濾鏡、貼紙這些基礎功能以外,用戶越來越追求鏡頭感,這往往需要通過專業的視頻剪輯軟體手動打上關鍵幀,進行放大、縮小、移動等操作才能實現,這增加了用戶分享視頻的門檻,不利於UGC內容的生產。 有沒有 ...
  • 1 var a,b,c,swap; 2 a=+prompt(); 3 b=+prompt(); 4 c=+prompt(); 5 //冒泡排序:最壞情況:比較n*(n-1)/2輪,以下是3個數比較,考慮最壞情況要比較3輪 6 if(a>b) 7 { 8 swap=a;//判斷表達式中:第一個值>第二 ...
  • 背景 如今的前端是一個涉獵領域很廣的職業。作為一名前端,我們不僅要開發管理系統、數據中台、還要應對年報開發、節日活動等場景。不僅要會增刪改查,編寫表單,還要具備開發動畫、H5 游戲等能力。能做出很 Cool 的動畫效果,也是一種前端特有的成就感。所以,我們從動畫的實現方法入手,瞭解瀏覽器的渲染,以及 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文將以 C# 語言來實現一個簡單的布隆過濾器,為簡化說明,設計得很簡單,僅供學習使用。 感謝@時總百忙之中的指導。 布隆過濾器簡介 布隆過濾器(Bloom filter)是一種特殊的 Hash Table,能夠以較小的存儲空間較快地判斷出數據是否存在。常用於允許一定誤判率的數據過濾及防止緩存 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 「簡單有價值的事情長期堅持做」 這是成功最簡單,但也最難學的秘訣。不經過訓練,人很難意識到時間複利的威力。 仙劍奇俠傳的「十里坡劍神」和金庸群俠傳的「十級野球拳」,就是簡單的事情持之以恆反覆做,最後就有巨大的威力 唐家三少成為網文收入第一,最重要的一步是十四年從未斷日更 這樣的案例很多,一開始可能成 ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“我愛加班”。 面試開始,直入正題。 面試官: 看你簡歷上面寫著精通MySQL,我先問你事務的特性是什麼? 老生常談,這個還有誰不會背的嗎? 我: ...
  • 基礎知識 python是一門腳本語言,它是解釋執行的。 python使用縮進做為語法,而且python2環境下同一個py文件中不能同時存在tab和空格縮進,否則會出錯,建議在IDE中顯示縮進符。 python在聲明變數時不寫數據類型,可以type(xx)來獲取欄位的類型,然後可以int(),list ...
  • 為什麼要多線程下載 俗話說要以終為始,那麼我們首先要明確多線程下載的目標是什麼,不外乎是為了更快的下載文件。那麼問題來了,多線程下載文件相比於單線程是不是更快? 對於這個問題可以看下圖。 橫坐標是線程數,縱坐標是使用對應線程數下載對應文件時花費的時間,藍橙綠代表下載文件的大小,每個線程下載對應文件2 ...
  • 詳細講解python爬蟲代碼,爬微博搜索結果的博文數據。 爬取欄位: 頁碼、微博id、微博bid、微博作者、發佈時間、微博內容、轉發數、評論數、點贊數。 爬蟲技術: 1、requests 發送請求 2、datetime 時間格式轉換 3、jsonpath 快速解析json數據 4、re 正則表達式提... ...
  • 背景: 一般我們可以用HashMap做本地緩存,但是HashMap功能比較弱,不支持Key過期,不支持數據範圍查找等。故在此實現了一個簡易的本地緩存,取名叫fastmap。 功能: 1.支持數據過期 2.支持等值查找 3.支持範圍查找 4.支持key排序 實現思路: 1.等值查找採用HashMap2 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 本章是系列文章的第八章,用著色演算法進行寄存器的分配過程。 本文中的所有內容來自學習DCC888的學習筆記或者自己理解的整理,如需轉載請註明出處。周榮華@燧原科技 寄存器分配 寄存器分配是為程式處理的值找到存儲位置的問題 這些值可以存放到寄存器,也可以存放在記憶體中 寄存器更快,但數量有限 記憶體很多,但 ...