提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

typescript 中的 const assertions

2023-02-18 16:39:39 时间

const assertions - TypeScript 3.4

// vue3

const dnsProviders = {
    "aliyun.com": "alidns",
    "tencent.com": "dnspod"
}

let data = reactive({
    rootDomain: "aliyun.com" as const
})

let dnsProvider = computed(
    () => {
        return dnsProviders[data.rootDomain]
    }
)

这个时候会， 提示 7053 错误， data.rootDomain 具有 any type, 不能被用作 key。

解决这个问题使用， 需要使用 typescript 中 const assertion 类型推断。

const assertion 类型推断。

  1. 字面量类型推断: 其类型为字面值类型。
    1. 例如这里的 hello 的类型是 hello 不是 string
    2. n 的类型是 1 不是 number
let x = "hello" as const  // type "hello"
let n = 1 as const  // type 1
  1. object 得到的是一个只读属性
let z = { text: "hello" } as const;  // // Type '{ readonly text: "hello" }'
  1. 数组 array 得到一个 只读元组 （tuple）
let y = [10, 20] as const; // Type 'readonly [10, 20]'

注意事项

  1. const 推断只能用于 简单字面表达式， 即 string, number, boolean, array, object
// 错误! 
let a = (Math.random() < 0.5 ? 0 : 1) as const;
let b = (60 * 60 * 1000) as const;

// 可行!
let c = Math.random() < 0.5 ? (0 as const) : (1 as const);
let d = 3_600_000 as const;
  1. const 上下文执行的时候， 并不会立即将 一个可变表达式 转换成 完全不可变的 状态（readonly）
    1. foo 的属性不能进行完全替换
    2. 但是 foo 的属性 content 的值是 arr 依旧可以进行数据操作， 没有成为 readonly
let arr = [1, 2, 3, 4];
let foo = {
  name: "foo",
  contents: arr,
} as const;

// foo 的属性不能进行完全替换
foo.name = "bar"; // error!
foo.contents = []; // error!

// 但是 foo 的属性 content 的值是 arr 依旧可以进行数据操作， 没有成为 readonly
foo.contents.push(5); // ...works!

相关文章