web-dev-qa-db-fra.com

Comment changer correctement le type d'une variable dans TypeScript?

Merci de votre patience ici, je commence tout juste avec TypeScript.

Je travaille sur une application angular 2 qui doit accepter les entrées de texte, puis faire un tas de calculs. J'ai (incorrectement?) Supposé que je devrais d'abord lier les entrées à "any" tapez des variables dans mon modèle de données, puis convertissez ces variables en nombres afin de croquer les nombres. J'ai regardé tout autour, et je ne trouve pas comment le faire de telle manière qu'il ne génère pas cette erreur du compilateur TS:

`src/calculator_service.ts(40,5): error TS2322: Type 'number' is not assignable to type 'string'.`

Dans mon CalculatorService, j'ai cette fonction:

/*
 * Convert the object of strings recieved from the form into a clean object of integers
 */
n(model:ModelFields) {
    // Clone it
    this.numericModel = Object.assign({}, this.model);

    for (var prop in this.numericModel) {
        if (this.numericModel.hasOwnProperty(prop)) {

            // strip off all non-numeric charactersklj
            this.numericModel[prop] = this.numericModel[prop].replace(/\D/g,'');

            // convert to Any TypeScript type
            // this breaks the application, and still throws a compiler error. nope.
            // this.numericModel[prop] = this.numericModel[prop]:Any;

            // convert to Number type
            // this gives a TypeScript console error, but seems to still compile... 
            // ignoring this for now in order to meet deadline
            this.numericModel[prop] = +this.numericModel[prop];

        }
    }

    return this.numericModel;
}

et la définition de ModelFields (merci tarh!)

export class ModelFields { 
    constructor( 
        public fieldName: any, 
        public anotherField: any 
    ) 
    {} 
}

Des idées? Merci à tous!

typescriptangulartypescript1.5
13
ryanrain

Vous ne pouvez pas changer le type d'une variable dans TypeScript, c'est juste le TS opposé qui a été fait. Au lieu de cela, vous pouvez déclarer une variable comme "any", ce qui équivaudrait à une variable "var" classique dans JS, non typée.

Une fois qu'une variable est déclarée, vous ne pourrez pas la retaper. Ce que vous pouvez faire, cependant, est de déclarer "any", puis de le convertir chaque fois que vous voulez l'utiliser, afin de l'utiliser comme type souhaité.

Par exemple, cela ne générera aucune erreur:

let a: any;

a = 1234;
(a as number).toExponential();

a = "abcd"; 
(a as string).substr(1, 4);

Dans le cas de votre classe, ce serait également correct, pas d'erreurs de type:

class ModelFields { 
    constructor( 
        public fieldName: any, 
        public anotherField: any 
    ) 

    //...
}

let model: ModelFields = new ModelFields(1, 2);

console.log(model.fieldName + model.anotherField);    // --> 3

model.fieldName = "a";
model.anotherField = "b";

console.log(model.fieldName + model.anotherField);    // --> ab
10
josemigallas

Votre exemple n'est pas assez clair, mais je suppose que votre problème est dû à l'inférence TypeScript :

var x = 3; // x is a number
x = "45";  // compiler error

Mais si vous le faites:

var x : any = 3; // x can be anything
x = "45";

Ou:

var x; // x is any forever
x = '45';  // x is still any

Vous pouvez trouver plus de détails sur ces super diapositives et sur docs

J'espère que cela peut aider un peu ...

1
Yaniv Efraim

Face à un type de requête similaire et a fonctionné pour moi.

Mon cas:

article Id vient au format chaîne à partir des paramètres de route et de l'API j'obtiens les données au format numérique.

Si je vérifie avec! =, ES lint lance une erreur. Je convertis donc une chaîne en nombre en Vanilla javascript en utilisant la méthode Number ().

const articleId = Number(this.route.snapshot.params['articleId']);

data.forEach((element, index) => {

    // console.log(typeof(element['id']), element['id']); 
    // 4, number
    // console.log(typeof(this.route.snapshot.params['articleId']), this.route.snapshot.params['articleId']);
    // 4, string (converted to number)

    if (element['id'] !== articleId) {
        //my implementation
     }
}

Lien de référence:

  1. https://gomakethings.com/converting-strings-to-numbers-with-Vanilla-javascript/
0
Ashish Singh Rawat