typescript - Forskjellen mellom Readonly<[]> og ReadOnlyArray<>

Kode 1:

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

Kode 2:

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

Begge kodelinjene ser ut til å gjøre lignende ting. Jeg vet ikke hva forskjellen er mellom å erklære et array som ReadOnly og ReadOnlyArray.

Også, hvilken er best for ytelse og hvorfor?

Svar #1

Fra et ytelsesperspektiv bør det ikke være noen forskjell mellom de to, siden typer fjernes ved kjøringstid og den samme JavaScript-en vil kjøre uansett

Det er en grunnleggende forskjell mellom de to typene på kompileringstidspunktet:

Readonly<T> - Er en type som har samme form som T men alle egenskapene er skrivebeskyttet. I ditt tilfelle er T tuple-typen [string, number], så den vil ha alle egenskapene til en array, samt indeksene 0 og 1. Så vi kan kalle push-metoden, men vi kan ikke tilordne concat-metoden på nytt.

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

Rediger: Siden 3.4 har TypeScript endret oppførselen til kartlagte typer på arrays og tuples, så Readonly<[string, number]> er nå ekvivalent med en readonly tuple readonly [string, number], så feilene er litt annerledes:

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

</Rediger>

ReadonlyArray<T> er et ekte skrivebeskyttet array som ikke har noen metoder som kan endre arrayen. I ditt tilfelle kan ethvert element i arrayen være enten en string eller en 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

Relaterte artikler