Разница между объявленным массивом как readonly и ReadOnlyArray

Ответ 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 

ReadonlyArray<T> - это истинный массив readonly, который не имеет каких-либо методов, которые могут изменить массив. В вашем случае любой элемент массива может быть либо 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 

Ответ 2

Readonly

• Readonly - это не массив, который ожидает, что любой тип <T> до
• Чтобы сделать Readonly для хранения массива значений, тип <T> должен быть [T]

• Не содержит изменяемых методов

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

ReadonlyArray

• ReadonlyArray принимает по умолчанию массив

• Содержит изменчивые методы

  let readonlyArray: ReadonlyArray<string| number> = "test";      // not assignable
  
  let readonlyArray: ReadonlyArray<string| number> = ["test"];   // assignable