typescript - Readonly<[]> 和 ReadOnlyArray<> 之间的区别

Question

代码 1:

 let readonlyArray: ReadonlyArray<string | number> = ["test", 1, 1];

代码 2:

let readonlyArray: Readonly<[string, number]> = ["test", 1, 1];

这两行代码似乎都在做类似的事情。我不知道将数组声明为 ReadOnly 和 ReadOnlyArray 有什么区别。

此外，哪一个最适合性能？为什么？

Answer 1

从性能的角度来看，两者之间应该没有任何区别，因为在运行时类型会被删除，并且无论如何都会运行相同的 javascript

这两种类型在编译时有根本的区别:

Readonly<T> - 是与 T 具有相同形状的类型但所有属性都是只读的。在你的情况下 T是元组类型 [string, number] , 因此它将具有数组的所有属性以及索引 0 和 1。因此我们可以调用 push方法，但我们不能重新分配 concat方法。

let readonlyArray: Readonly<[string, number]> = ["test", 1, 1];
readonlyArray.concat = ()=> {} // Not valid, concat is readonly 
readonlyArray.push(1); // This is valid 
readonlyArray[1] =  ""; // Invalid we cannot change a property by indexing 
readonlyArray[3] =  ""; // Valid as it was not in the original tuple type 

编辑:从 3.4 开始，typescript 改变了映射类型在数组和元组上的行为，所以 Readonly<[string, number]>现在相当于只读元组 readonly [string, number] ，所以错误有点不同:

let readonlyArray: Readonly<[string, number]> = ["test", 1];
readonlyArray.concat = ()=> {} // Not valid, concat is readonly 
readonlyArray.push(1); // This is not invalid, no push method anymore
readonlyArray[1] =  ""; // Invalid we cannot change a property by indexing 
readonlyArray[3] =  ""; // Invalid now tuple length preserved

ReadonlyArray<T>是一个真正的只读数组，没有任何可以更改数组的方法。在您的情况下，数组的任何项目都可以是 string或 number :

let readonlyArray2: ReadonlyArray<string | number> = ["test", 1, 1];
readonlyArray2.concat = ()=> []; // Valid we can set the concat property on the object 
readonlyArray2.push(1) // No push method, invalid
readonlyArray2[1] =  ""; // Invalid it is read only 
readonlyArray2[3] =  ""; // Invalid it is read only