TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及?as?const說明

更新時間：2025年06月27日 09:00:50 作者：傲慢或香橙

這篇文章主要介紹了TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及?as?const使用說明,需要的朋友可以參考下

在 TypeScript 中聲明和初始化數(shù)組也很簡單，和聲明數(shù)字類型和字符串類型的變量也差不多，只不過在指定數(shù)組類型時要在類型后面加上一個中括號 []

語法格式

const array_name: dataype[] = [val, val2];

示例

聲明一個 string 類型的數(shù)組

const character: string[] = ["楊過", "小龍女"];

一維數(shù)組類型

聲明一個 number 類型的數(shù)組

const numb: Number[] = [2, 4, 6, 8];
// 等同于
const numb2: Array<number> = [2, 4, 6, 8];

聲明一個 string 類型的數(shù)組

const str: String[] = ['西安', '北京', '上海'];
// 等同于
const str2: Array<string> = ['西安', '北京', '上海'];

聲明一個 string 或者 number 類型的數(shù)組

const array2: (string | number)[] = ['孟浩然', 99];
// 等同于
const array: Array<string | number> = ['孟浩然', 99];

除了使用中括號 [] 的方法來聲明數(shù)組，你還可以使用 數(shù)組泛型 來定義數(shù)組

語法格式

const array_name: Array<dataype> = [val, val2];

示例

聲明一個 number 類型的數(shù)組

const array_name: Array<Array<datatype>> = [[val1, val2, val3],[v1, v2, v3]];
// 等同于
const array_name: datatype[][] = [[val1, val2, val3]];

多維數(shù)組類型

TypeScript 支持多維數(shù)組。一個數(shù)組的元素可以是另外一個數(shù)組，這樣就構成了多維數(shù)組。多維數(shù)組的最簡單形式是二維數(shù)組。

語法格式

const test: Array<Array<string>> = [['獅子頭'], ['清蒸鱸魚']];
// 等同于
const test: string[][] = [['獅子頭', '清蒸鱸魚', '鮮椒牛蛙'], ['北京烤鴨'], ['地鍋雞', '餓了']];

聲明一個二維數(shù)組

注意：

以下示例中類型在數(shù)組中的，則會限制內層數(shù)組的元素數(shù)量

Array<[string]> : 表示內層數(shù)組的元素是 string 類型，限制元素數(shù)量是 1 個，輸入多個會報錯

const test3: Array<[string]> = [['甘雨'], ['我的']];
// 等同于
const test3: [string][] = [['甘雨']];


// error
// 不能將類型“[string, string]”分配給類型“[string]”。
// 源具有 2 個元素，但目標僅允許 1 個。
const test3: [string][] = [['甘雨', '我的']];

Array<[string, string]> ：表示內層數(shù)組的元素是 string 類型，限制元素數(shù)量是 2 個

建議：

在定義數(shù)組類型的時候使用數(shù)組泛型定義，這樣顯得更直觀一點

2、元組的定義

// 類型固定的元組
// let arrAny: any[] = [1, 'TEST']; 奇葩且沒有意義的寫法，不推薦
let tuple1: [number, string, boolean] = [1, 'TEST', false];
 
// 數(shù)組和元組的區(qū)別
// 利用函數(shù)動態(tài)拼合一個元組
function useFetch() {
    const response: string = "Barry";
    const age: number = 25;
    return [response, age] as const;
}
// 這里如果不使用 as const 會發(fā)現(xiàn) 我們結構出來的數(shù)組類型是response: string | number
// 使用完 as const 以后 為string，as const 也叫類型斷言
const [response] = useFetch() // 發(fā)現(xiàn) const response: string | number
 
// 數(shù)組轉化元組 泛型
function useFetch2() {
    const response: string = "Barry";
    const age: number = 25;
    return tuplify(response, age)
}
 
function tuplify<T extends unknown[]>(...elements: T): T {
    return elements;
 
}

一、元組 && 數(shù)組

在 TypeScript 中，元組表示這個數(shù)組有不同的類型。簡單的一句話來表述，如果類型相同的一組數(shù)據(jù)就是數(shù)組，反之就是元組；數(shù)組的 api 對于元組來講也是通用的(push、pop等)，只是類型不同；

1、數(shù)組的定義

//定義數(shù)組的方式
let arr: number[] = [1, 2, 3]; //第一種： 必須全部是number類型；
 
let arr2: Array<number> = [1, 2, 3]; // 第二種
 
let arr3: Array<number> = new Array(4); // 第三種：表示定義一個數(shù)組的長度，一般固定一個數(shù)組的長度時這個方法比較方便
let arr4 = new Array<number>(4);  //這種寫法和 arr3 效果是一樣的
console.log(arr3.length);
 
// interface 定義
interface NumberArray {
    [index: number]: number;
}
 
let arr5: NumberArray = [1, 2, 3];
 
//類數(shù)組
function sum() {
    let args: IArguments = arguments;
 
    // args.callee()
}

二、as const

1.不強制類型轉換

as const 被稱為 const 類型斷言，const 類型斷言告訴編譯器，要將這個表達式推斷為最具體的類型，如果不使用它的話，編譯器會使用默認的類型推斷行為，可能會把表達式推斷為更通用的類型。

注意這里 const 是類型斷言，不是強制轉換，在 typescript 中，const 類型斷言，會從編譯后的 JavaScript 中完全刪除，所以使用或者不使用 as const 的應用程序，在運行時完全沒有區(qū)別。

所以 as const 只是讓編譯器更好的了解代碼的意圖，讓它更加精確的區(qū)分正確和錯誤的代碼。

2.強制類型轉換

// 強制類型轉換
 
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.類型別名

// 類型別名
 
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n
    }
}
 
// interface  實現(xiàn) 類型
 
interface A {
 
}
function helper(options: A): A {
    return options
}

到此這篇關于TypeScript之元組、數(shù)組、多維數(shù)組定義方法以及 as const說明的文章就介紹到這了,更多相關TypeScript之元組、數(shù)組、多維數(shù)組以及 as const內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: