如何在 TypeScript 中正确更改变量的类型？

Question

感谢您的耐心等待，我才刚刚开始使用 TypeScript。

我正在开发一个 angular 2 应用程序，它需要接受文本输入，然后进行大量计算。我（错误地？）假设我需要首先将输入绑定到我的数据模型中的 "any" 类型变量，然后将这些变量转换为数字以处理数字。我环顾四周，找不到如何以不引发此 TS 编译器错误的方式执行此操作：

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

在我的 CalculatorService 中，我有这个功能：

/*
 * 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;
}

和 ModelFields 定义（感谢 tarh！）

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

有什么想法吗？谢谢大家！

Answer 1

你的例子不够清楚，但我猜你的问题是因为Typescript inference:

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

但是，如果你这样做：

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

或者：

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

您可以在 those great slides and on docs

上找到更多详细信息

希望这能有点帮助...

Answer 2

您不能在 TypeScript 中更改变量的类型，这恰恰与 TS 的用途相反。相反，您可以将变量声明为 "any"，这相当于 JS 中的 classic "var" 变量，未类型化。

一旦变量被声明，您将无法重新输入它。但是，您可以做的是声明 "any" ，然后在您想要使用它时转换它，以便将其用作所需的类型。

例如，这不会引发任何错误：

let a: any;

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

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

对于您的 class，这也是正确的，没有类型错误：

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

Answer 3

面对类似类型的查询并为我工作。

我的情况：

article Id 来自路由参数的字符串格式和来自 API 我以数字格式获取数据。

如果我使用 != 检查，ES lint 会抛出错误。所以我使用 Number() 方法将字符串转换为香草 javascript 中的数字。

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
     }
}

参考Link:

https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/

Answer 4

您可以通过省略旧类型的属性然后将它们添加回来来创建新类型。

这不会工作。

interface DbItem {
 _id: Buffer
 date: number
}

interface JsItem extends DbItem {
 _id: string
}

但是您可以使用实用程序类型 Omit 来省略您要更改的类型，然后再将它们添加回来。

interface DbItem {
 _id: Buffer
 date: number
}

interface JsItem extends Omit<DbItem, '_id'> {
 _id: string
}

如何在 TypeScript 中正确更改变量的类型？

How to properly change a variable's type in TypeScript?

typescript

angular

typescript1.5