TypeScript之元組、數(shù)組及as?const的使用
一、元組 && 數(shù)組
在 TS 中,元組表示 這個(gè)數(shù)組有不同的類(lèi)型 。簡(jiǎn)單的一句話來(lái)表述,如果類(lèi)型相同的一組數(shù)據(jù)就是數(shù)組,反之就是元組;數(shù)組的 api 對(duì)于元組來(lái)講也是通用的(push、pop等),只是類(lèi)型不同;
1、數(shù)組的定義
//定義數(shù)組的方式 let arr: number[] = [1, 2, 3]; //第一種: 必須全部是number類(lèi)型; let arr2: Array<number> = [1, 2, 3]; // 第二種 let arr3: Array<number> = new Array(4); // 第三種:表示定義一個(gè)數(shù)組的長(zhǎng)度,一般固定一個(gè)數(shù)組的長(zhǎng)度時(shí)這個(gè)方法比較方便 let arr4 = new Array<number>(4); //這種寫(xiě)法和 arr3 效果是一樣的 console.log(arr3.length); // interface 定義 interface NumberArray { [index: number]: number; } let arr5: NumberArray = [1, 2, 3]; //類(lèi)數(shù)組 function sum() { let args: IArguments = arguments; // args.callee() }
2、元組的定義
// 類(lèi)型固定的元組 // let arrAny: any[] = [1, 'TEST']; 奇葩且沒(méi)有意義的寫(xiě)法,不推薦 let tuple1: [number, string, boolean] = [1, 'TEST', false]; // 數(shù)組和元組的區(qū)別 // 利用函數(shù)動(dòng)態(tài)拼合一個(gè)元組 function useFetch() { const response: string = "Barry"; const age: number = 25; return [response, age] as const; } // 這里如果不使用 as const 會(huì)發(fā)現(xiàn) 我們結(jié)構(gòu)出來(lái)的數(shù)組類(lèi)型是response: string | number // 使用完 as const 以后 為string,as const 也叫類(lèi)型斷言 const [response] = useFetch() // 發(fā)現(xiàn) const response: string | number // 數(shù)組轉(zhuǎn)化元組 泛型 function useFetch2() { const response: string = "Barry"; const age: number = 25; return tuplify(response, age) } function tuplify<T extends unknown[]>(...elements: T): T { return elements; }
三、as const
1.不強(qiáng)制類(lèi)型轉(zhuǎn)換
as const
被稱(chēng)為 const 類(lèi)型斷言,const 類(lèi)型斷言告訴編譯器,要將這個(gè)表達(dá)式推斷為最具體的類(lèi)型,如果不使用它的話,編譯器會(huì)使用默認(rèn)的類(lèi)型推斷行為,可能會(huì)把表達(dá)式推斷為更通用的類(lèi)型。
注意這里 const 是類(lèi)型斷言,不是強(qiáng)制轉(zhuǎn)換,在 typescript 中,const 類(lèi)型斷言,會(huì)從編譯后的 JavaScript 中完全刪除,所以使用或者不使用 as const
的應(yīng)用程序,在運(yùn)行時(shí)完全沒(méi)有區(qū)別。
所以 as const
只是讓編譯器更好的了解代碼的意圖,讓它更加精確的區(qū)分正確和錯(cuò)誤的代碼。
stack overflow : What does the "as const" mean in TypeScript and what is its use case?
2.強(qiáng)制類(lèi)型轉(zhuǎn)換
// 強(qiáng)制類(lèi)型轉(zhuǎn)換 function getLength(str: string | number): number { // if((<String>str).length) 上下兩種方式 if ((str as string).length) { return (<String>str).length } else { return str.toString().length; } }
3.類(lèi)型別名
// 類(lèi)型別名 type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n } } // interface 實(shí)現(xiàn) 類(lèi)型 interface A { } function helper(options: A): A { return options }
到此這篇關(guān)于TypeScript之元組、數(shù)組以及as const的文章就介紹到這了,更多相關(guān)TypeScript 元組、數(shù)組以及as const內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- TypeScript 數(shù)組Array操作的常用方法
- TypeScript數(shù)組的定義與使用詳解
- typeScript中數(shù)組類(lèi)型定義及應(yīng)用詳解
- TypeScript編寫(xiě)自動(dòng)創(chuàng)建長(zhǎng)度固定數(shù)組的類(lèi)型工具詳解
- TypeScript實(shí)現(xiàn)數(shù)組和樹(shù)的相互轉(zhuǎn)換
- TypeScript調(diào)整數(shù)組元素順序算法
- TypeScript中Array(數(shù)組)聲明與簡(jiǎn)單使用方法
- TypeScript判斷兩個(gè)數(shù)組的內(nèi)容是否相等的實(shí)現(xiàn)
- TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解
- TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及 as const說(shuō)明
相關(guān)文章
Echarts之懸浮框中的數(shù)據(jù)排序問(wèn)題
Echarts非常強(qiáng)大,配置也非常的多,有很多細(xì)節(jié)需要深入研究。這篇文章主要介紹了Echarts之懸浮框中的數(shù)據(jù)排序問(wèn)題,需要的朋友可以參考下2018-11-11如何基于webpack創(chuàng)建plugin并發(fā)布npm包
webpack 插件是一個(gè)具有 apply 方法的 JavaScript 對(duì)象,apply 方法會(huì)被 webpack compiler 調(diào)用,并且在 整個(gè)編譯生命周期都可以訪問(wèn) compiler 對(duì)象,這篇文章主要介紹了基于webpack創(chuàng)建plugin并發(fā)布npm包,需要的朋友可以參考下2024-07-07JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼,感興趣的小伙伴們可以參考一下2016-04-04js中onclick和addEventListener的區(qū)別詳解
這篇文章深入探討了JavaScript中處理事件的兩種不同方法,即熟悉的onclick和多功能的addEventListener方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08Javascript圖像處理—閾值函數(shù)實(shí)例應(yīng)用
閾值是最簡(jiǎn)單的圖像分割方法,接下來(lái)將介紹五種閾值類(lèi)型感興趣的朋友可以參考下2013-01-01用move.js庫(kù)實(shí)現(xiàn)百葉窗特效
本文主要介紹了用move.js庫(kù)實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02javascript筆試題目附答案@20081025_jb51.net
網(wǎng)上找的javascript筆試題目,留檔給自己作參考。2008-10-10JS Ajax請(qǐng)求會(huì)話過(guò)期處理問(wèn)題解決方法分析
這篇文章主要介紹了JS Ajax請(qǐng)求會(huì)話過(guò)期處理問(wèn)題解決方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了ajax請(qǐng)求會(huì)話過(guò)期處理的相關(guān)原理、解決方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11