Ts as const

Ts as const

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

转为常量

const a = 1  // 1
let b = 2  // number

以上代码，a的类型为1，b的类型为number

a的类型只能是数字1，不能再修改，是个常量

b是number类型，可以将b变量再次赋值给其他数字，b = 2

let b = 2 as const
b = 3 // 不能将类型“3”分配给类型“2”。

b变量就转为常量，b的类型为2，不能改变

结构中的应用

没有使用as const

import { useUrlQueryParam } from "utils/url"

export const useProjectsSearchParams = () => {
    const [param,setParam] = useUrlQueryParam(['name','personId'])
    return [
        {...param, personId:Number(param.personId) || undefined},
        setParam
    ] 
}

以上代码是一个自定义Hook，返回一个数组（严格来说是一个元组）

• 第一个参数——对象
• 第二个参数——函数

将返回的数据结构出来

const [projectParam,setParam] = useProjectsSearchParams()

但是此时返回数据的类型存在着问题

const projectParam: ((params: Partial<{
    name: unknown;
    personId: unknown;
}>) => void) | {
    personId: number | undefined;
    name: string;
}

const setParam: ((params: Partial<{
    name: unknown;
    personId: unknown;
}>) => void) | {
    personId: number | undefined;
    name: string;
}

projectParam和setParam都是联合类型，这是因为Ts推断你返回的是一个数组类型，数组中的类型可以是像projectParam的对象类型数据，也可以是像setParam的函数类型数据

---

【例子】

let  a = 1 // number 类型
let b = 'qwe' // string 类型
const m = [a,b] // (string | number)[]类型
let [q,w] = m // q: string | number ；w: string | number

在js中数组中的各个元素的类型是可以不相同的，(string | number)[]表示

该数组中的数据为string类型或number类型

那么通过解构得到的数据，被Ts推断为string | number类型

---

使用 as const

使用as const可以将这个表达式推断为最具体的类型

import { useUrlQueryParam } from "utils/url"

export const useProjectsSearchParams = () => {
    const [param,setParam] = useUrlQueryParam(['name','personId'])
    return [
        {...param, personId:Number(param.personId) || undefined},
        setParam
    ] as const
}

具体的类型推断

const projectParam: {
    readonly personId: number | undefined;
    readonly name: string;
}

const setParam: (params: Partial<{
    name: unknown;
    personId: unknown;
}>) => void