TypeScript之元组、数组、多维数组定义方法以及 as const说明_Javascript

在 typescript 中声明和初始化数组也很简单，和声明数字类型和字符串类型的变量也差不多，只不过在指定数组类型时要在类型后面加上一个中括号 []

语法格式

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

示例

声明一个 string 类型的数组

const character: string[] = ["杨过", "小龙女"];

一维数组类型

声明一个 number 类型的数组

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

声明一个 string 类型的数组

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

声明一个 string 或者 number 类型的数组

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

除了使用中括号 [] 的方法来声明数组，你还可以使用 数组泛型 来定义数组

语法格式

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

示例

声明一个 number 类型的数组

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

多维数组类型

typescript 支持多维数组。一个数组的元素可以是另外一个数组，这样就构成了多维数组。多维数组的最简单形式是二维数组。

语法格式

const test: array<array<string>> = [['狮子头'], ['清蒸鲈鱼']];
// 等同于
const test: string[][] = [['狮子头', '清蒸鲈鱼', '鲜椒牛蛙'], ['北京烤鸭'], ['地锅鸡', '饿了']];

声明一个二维数组

注意：

以下示例中类型在数组中的，则会限制内层数组的元素数量

array<[string]> : 表示内层数组的元素是 string 类型，限制元素数量是 1 个，输入多个会报错

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


// error
// 不能将类型“[string, string]”分配给类型“[string]”。
// 源具有 2 个元素，但目标仅允许 1 个。
const test3: [string][] = [['甘雨', '我的']];

array<[string, string]> ：表示内层数组的元素是 string 类型，限制元素数量是 2 个

建议：

在定义数组类型的时候使用数组泛型定义，这样显得更直观一点

2、元组的定义

// 类型固定的元组
// let arrany: any[] = [1, 'test']; 奇葩且没有意义的写法，不推荐
let tuple1: [number, string, boolean] = [1, 'test', false];
 
// 数组和元组的区别
// 利用函数动态拼合一个元组
function usefetch() {
    const response: string = "barry";
    const age: number = 25;
    return [response, age] as const;
}
// 这里如果不使用 as const 会发现 我们结构出来的数组类型是response: string | number
// 使用完 as const 以后 为string，as const 也叫类型断言
const [response] = usefetch() // 发现 const response: string | number
 
// 数组转化元组 泛型
function usefetch2() {
    const response: string = "barry";
    const age: number = 25;
    return tuplify(response, age)
}
 
function tuplify<t extends unknown[]>(...elements: t): t {
    return elements;
 
}

一、元组 && 数组

在 typescript 中，元组表示这个数组有不同的类型。简单的一句话来表述，如果类型相同的一组数据就是数组，反之就是元组；数组的 api 对于元组来讲也是通用的(push、pop等)，只是类型不同；

1、数组的定义

//定义数组的方式
let arr: number[] = [1, 2, 3]; //第一种： 必须全部是number类型；
 
let arr2: array<number> = [1, 2, 3]; // 第二种
 
let arr3: array<number> = new array(4); // 第三种：表示定义一个数组的长度，一般固定一个数组的长度时这个方法比较方便
let arr4 = new array<number>(4);  //这种写法和 arr3 效果是一样的
console.log(arr3.length);
 
// interface 定义
interface numberarray {
    [index: number]: number;
}
 
let arr5: numberarray = [1, 2, 3];
 
//类数组
function sum() {
    let args: iarguments = arguments;
 
    // args.callee()
}

二、as const

1.不强制类型转换

as const 被称为 const 类型断言，const 类型断言告诉编译器，要将这个表达式推断为最具体的类型，如果不使用它的话，编译器会使用默认的类型推断行为，可能会把表达式推断为更通用的类型。

注意这里 const 是类型断言，不是强制转换，在 typescript 中，const 类型断言，会从编译后的 javascript 中完全删除，所以使用或者不使用 as const 的应用程序，在运行时完全没有区别。

所以 as const 只是让编译器更好的了解代码的意图，让它更加精确的区分正确和错误的代码。

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  实现 类型
 
interface a {
 
}
function helper(options: a): a {
    return options
}

到此这篇关于typescript之元组、数组、多维数组定义方法以及 as const说明的文章就介绍到这了,更多相关typescript之元组、数组、多维数组以及 as const内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！