web-dev-qa-db-fra.com

Comment définir un tableau const en typescript

Mon code:

const WEEKDAYS_SHORT: string[] = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']

le message d'erreur provient du compilateur TypeScript (3.0):

TS2322: Le type 'chaîne []' n'est pas assignable au type '[chaîne, chaîne, chaîne, chaîne, chaîne, chaîne, chaîne, chaîne]' '. La propriété '0' est manquante dans le type 'chaîne []'.

 enter image description here

si je change le string[] en ReadonlyArray<string>, le message d'erreur devient:

TS2322: Le type 'ReadonlyArray' n'est pas assignable au type '[chaîne, chaîne, chaîne, chaîne, chaîne, chaîne, chaîne, chaîne]' '. La propriété '0' est manquante dans le type 'ReadonlyArray'.

mon tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "strict": true
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

comment définir un tableau readonly dans TypeScript?

arraystypescript
5
Spark.Bao

Comme vous le signalez, le problème vient du fait que vous essayez d’affecter le tableau de chaînes (string[]) à un tuple de 7 chaînes. Bien que votre solution d’utiliser any fonctionne, il n’est généralement pas conseillé d’utiliser any. Épeler le mot souple n’est pas idéal non plus, car il est trop long.

Ce que nous pouvons faire, c'est créer une fonction d'assistance pour créer un type de tuple. Cette fonction est réutilisable partout où vous avez besoin de Tuple:

function tupleArray<T extends any[]>(...v: T) {
    return v;
}
const WEEKDAYS_SHORT_INFFERED =  tupleArray('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam')  // INFFERED AS [string, string, string, string, string, string, string]
const WEEKDAYS_SHORT: [string, string, string, string, string, string, string] = WEEKDAYS_SHORT_INFFERED
1
Titian Cernicova-Dragomir

Après le débogage, j'ai découvert que ce n'était pas un problème de compilateur TypeScript, mais bien parce que j'avais utilisé un composant tiers appelé DayPicker:

          <DayPicker
            onDayClick={this.handleDayClick}
            selectedDays={posts.day}
            months={MONTHS}
            weekdaysShort={WEEKDAYS_SHORT}
            firstDayOfWeek={1}/>

le type de l'accessoire weekdaysShort n'est pas string[], mais [string, string, string, string, string, string, string]

weekdaysShort?: [string, string, string, string, string, string, string];

donc la compilation TS dit que string[] ne correspond pas à [string, string, string, string, string, string, string].

enfin, je viens de changer le type de string[] en any pour éviter ce message d'erreur anoy, bien sûr, nous pouvons également changer en [string, string, string, string, string, string, string] (trop long). 

1
Spark.Bao

Je n'ai pas reproduit le problème sur le TypeScript playground .

Mais qu'en est-il de l'utilisation du type inféré, quelle que soit sa nature (tableau de chaînes string[] ou Tuple [string, string, string, string, string, string, string] à 7 chaînes)?

const WEEKDAYS_SHORT = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

Ou un enum?

enum WEEKDAYS_SHORT { 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' }
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

IMO, les deux options ci-dessus sont meilleures que de spécifier le type any dans ce cas.

0
Romain Deneau