Conversion de type TypeScript ou JavaScript

185

Comment gère-t-on le cast de type dans TypeScript ou Javascript?

Disons que j'ai le code TypeScript suivant:

module Symbology { 

    export class SymbolFactory { 

        createStyle( symbolInfo : SymbolInfo) : any { 
            if (symbolInfo == null)
            {
                 return null;
            }

            if (symbolInfo.symbolShapeType === "marker") {      

                // how to cast to MarkerSymbolInfo          
                return this.createMarkerStyle((MarkerSymbolInfo) symbolInfo);
            }                                  
        }

        createMarkerStyle(markerSymbol : MarkerSymbolInfo ): any { 
            throw "createMarkerStyle not implemented";
        }              

    }
}

où SymbolInfoest une classe de base. Comment gérer le transtypage de SymbolInfovers MarkerSymbolInfodans TypeScript ou Javascript?

casting typescript

— Klaus Nji
source

284

Vous pouvez lancer comme ceci:

return this.createMarkerStyle(<MarkerSymbolInfo> symbolInfo);

Ou comme ceci si vous voulez être compatible avec le mode tsx:

return this.createMarkerStyle(symbolInfo as MarkerSymbolInfo);

N'oubliez pas qu'il s'agit d'un cast au moment de la compilation, et non d'un cast au moment de l'exécution.

— poisson blork
source

10

Maintenant, je vois cela dans le doc, appelé assertions de type dans la section 4.13.

— Klaus Nji

Cette réponse ne fournit plus une image complète de l'assertion de type en tapuscrit, alors que la réponse d'Alex donne une image plus complète et devrait être la réponse acceptée.

— Kristoffer Dorph

@KristofferDorph Cette réponse date de 4 ans. Au moment de l'écriture, TypeScript était à la version 0.8.1, et était donc la bonne réponse à l'époque. Le support JSX n'a été inclus que 3 ans plus tard.

— blorkfish

@blorkfish c'est vrai, mais c'est une bonne pratique de suivre les temps, donc les gens qui posent la même question aujourd'hui obtiennent la réponse actuelle, et non comme il y a 4 ans :-)

— Kristoffer Dorph

160

C'est ce qu'on appelle l' assertion de type dans TypeScript, et depuis TypeScript 1.6, il existe deux façons d'exprimer cela:

// Original syntax
var markerSymbolInfo = <MarkerSymbolInfo> symbolInfo;

// Newer additional syntax
var markerSymbolInfo = symbolInfo as MarkerSymbolInfo;

Les deux alternatives sont fonctionnellement identiques . La raison de l'introduction de as-syntax est que la syntaxe d'origine est en conflit avec JSX , voir la discussion de conception ici .

Si vous êtes en mesure de choisir, utilisez simplement la syntaxe avec laquelle vous vous sentez plus à l'aise. asPersonnellement, je préfère la syntaxe -syntax car elle me semble plus fluide à lire et à écrire.

— Alex
source

2

Comment indiquez-vous à dactylographié que vous avez converti un objet en un autre type? Par exemple, une fonction qui retourne type2, à l'intérieur, http obtient le type 1, fait la logique à convertir et renvoie ce qui était type1 mais est maintenant type2?

— Tony Gutierrez

@TonyGutierrez Comment faites-vous la conversion?

— Alex

1

En gros, prenez une propriété et modifiez-la. Le seul moyen que j'ai trouvé pour le faire est de créer un nouveau var (type2) et de copier les accessoires de type1var, puis de le renvoyer. Vous ne pouvez pas modifier le type1 et le retour, ou vous obtenez une erreur "Impossible de cast".

— Tony Gutierrez

1

En dactylographié, il est possible de faire une instanceofvérification dans une instruction if et vous aurez accès à la même variable avec leTyped propriétés.

Alors disons qu'il MarkerSymbolInfoa une propriété appelée marker. Vous pouvez faire ce qui suit:

if (symbolInfo instanceof MarkerSymbol) {
    // access .marker here
    const marker = symbolInfo.marker
}

C'est une petite astuce intéressante pour obtenir l'instance d'une variable en utilisant la même variable sans avoir besoin de la réaffecter à un nom de variable différent.

Consultez ces deux ressources pour plus d'informations:

Instance TypeScript et instance JavaScript

— Développeur Newteq
source