TypeScript 或 JavaScript 类型转换答案

【问题标题】：TypeScript or JavaScript type castingTypeScript 或 JavaScript 类型转换
【发布时间】：2012-10-23 16:11:19
【问题描述】：

如何处理 TypeScript 或 Javascript 中的类型转换？

假设我有以下 TypeScript 代码：

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

    }
}

SymbolInfo 是一个基类。如何在 TypeScript 或 Javascript 中处理从 SymbolInfo 到 MarkerSymbolInfo 的类型转换？

【问题讨论】：

标签： casting typescript

【解决方案1】：

你可以这样投：

return this.createMarkerStyle(<MarkerSymbolInfo> symbolInfo);

或者如果你想兼容tsx模式就这样：

return this.createMarkerStyle(symbolInfo as MarkerSymbolInfo);

请记住，这是编译时转换，而不是运行时转换。

【讨论】：

现在，我在 doc 中看到了这一点，在 4.13 节中称为类型断言。
这个答案不再提供打字稿中类型断言的全貌，而亚历克斯的答案给出了更完整的图景，应该是公认的答案。
@KristofferDorph 这个答案已有 4 年历史。在撰写本文时，TypeScript 的版本为 0.8.1，因此是当时的正确答案。仅在 3 年后才包含 JSX 支持。
@blorkfish 确实如此，但跟上时代是一种很好的做法，所以今天问同样问题的人会得到当前的答案，而不是像 4 年前那样:-)

【解决方案2】：

这在 TypeScript 中称为type assertion，从 TypeScript 1.6 开始，有两种表达方式：

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

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

两种选择功能相同。引入as-syntax的原因是原来的语法与JSX冲突，见设计讨论here。

如果您可以选择，请使用您觉得更舒服的语法。我个人更喜欢as-syntax，因为它读起来感觉更流畅。

【讨论】：

如何向打字稿表明您已将对象转换为另一种类型？例如一个返回 type2 的 func，在其中 http 获取 type 1，执行逻辑转换，并返回 type1 现在是 type2 的内容？
@TonyGutierrez 你是如何进行转换的？
基本上取一个属性，然后修改。我发现这样做的唯一方法是创建一个新的 var (type2) 并从 type1var 复制道具然后返回它。您不能修改 type1 并返回，否则会出现“无法转换”错误。
“原始语法与 JSX 冲突” - 我认为“冲突”会是更好的措辞，因为与原始语法的冲突仍然存在。

【解决方案3】：

在 typescript 中，可以在 if 语句中执行 instanceof 检查，您将可以访问具有 Typed 属性的相同变量。

假设MarkerSymbolInfo 上有一个名为marker 的属性。您可以执行以下操作：

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

这是一个很好的小技巧，可以使用相同的变量获取变量的实例，而无需将其重新分配给不同的变量名。

【讨论】：