TypeScript之元组、数组及as const的使用

 更新时间:2023年10月27日 11:15:32   作者:程序员啊楠  
TypeScript中的元组、数组和as const关键字对于类型安全性和代码可读性非常重要,本文主要介绍了TypeScript之元组、数组及as const的使用,感兴趣的可以了解一下

一、元组 && 数组

在 TS 中,元组表示 这个数组有不同的类型 。简单的一句话来表述,如果类型相同的一组数据就是数组,反之就是元组;数组的 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()
}

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;

}

三、as  const

1.不强制类型转换

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

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

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

stack overflow : What does the "as const" mean in TypeScript and what is its use case?

https://stackoverflow.com/questions/66993264/what-does-the-as-const-mean-in-typescript-and-what-is-its-use-case

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序通过保存图片分享到朋友圈功能

    微信小程序通过保存图片分享到朋友圈功能

    小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。下面小编给大家分享实现代码,需要的朋友参考下吧
    2018-05-05
  • JS中实现一个下载进度条及播放进度条的代码

    JS中实现一个下载进度条及播放进度条的代码

    这篇文章主要介绍了JS中实现一个下载进度条及播放进度条的代码,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 用JS实现飞机大战小游戏

    用JS实现飞机大战小游戏

    这篇文章主要为大家详细介绍了用JS实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中匿名函数的调用与写法实例详解(多种)

    js中定义函数的方式有很多种,函数直接量就是其中一种,下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法,对js匿名函数调用,js匿名函数写法相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 谈谈对JavaScript原生拖放的深入理解

    谈谈对JavaScript原生拖放的深入理解

    拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放,感兴趣的朋友一起学习吧
    2016-09-09
  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    今天小编就为大家分享一篇关于JavaScript之解构赋值的理解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 使用JS批量选中功能实现更改数据库中的status状态值(批量展示)

    使用JS批量选中功能实现更改数据库中的status状态值(批量展示)

    我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值。下面以修改数据库的status状态值来实现批量展示功能
    2016-11-11
  • 使用JS代码实现页面添加水印的方法详解

    使用JS代码实现页面添加水印的方法详解

    这篇文章主要介绍了使用80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-05-05
  • 浅谈js中的引用和复制(传值和传址)

    浅谈js中的引用和复制(传值和传址)

    下面小编就为大家带来一篇浅谈js中的引用和复制(传值和传址)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 用Javascript实现UTF8编码转换成gb2312编码

    用Javascript实现UTF8编码转换成gb2312编码

    这篇文章主要介绍了用Javascript实现UTF8编码转换成gb2312编码
    2006-12-12

最新评论