TypeScript tuples, arrays and as const

1. Tuple && Array

In TS, tuple means that this array has different types. In a simple sentence, if a group of data of the same type is an array, otherwise it is a tuple; the API of the array is also common to the tuple (push, pop, etc.), but the types are different;

1. Definition of array

//定义数组的方式
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. Definition of tuple

// 类型固定的元组
// 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;

}

Three, as const

1. No mandatory type conversion

as const Known as a const type assertion, a const type assertion tells the compiler to infer this expression as the most specific type. If you don't use it, the compiler will use the default type inference behavior, which may infer the expression as a more specific type. Generic type.

Note that const here is a type assertion, not a mandatory conversion. In typescript, const type assertion will be completely removed from the compiled JavaScript, so there is no difference at runtime between applications as constthat

So as constit just gives the compiler a better understanding of the intent of the code, allowing it to more precisely distinguish between correct and incorrect code.

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. Mandatory type conversion

// 强制类型转换

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 aliases

// 类型别名

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
}