如何在Typescript中编写文字Javascript

How to write literal Javascript in Typescript

本文关键字：文字 Javascript Typescript      更新时间：2023-09-26

我需要向HTMLElement添加一个成员，换句话说，我需要将数据存储到一个元素中。这就是我想要实现的，就好像我在ScriptSharp中编码一样。

/** My method */
public DoIt(element: Element, obj: Object) {
  Literal("{0}.extended = {1}", element, obj); // This is not standard Typescript!
}

在我的示例中ScriptSharp(一个将C#代码转换为Javascript的项目(提供了一个Script.Literal对象，允许开发人员在无法实现C#抽象时编写纯Javascript。

因此Javascript输出为：

// Probably Typescript will render it a bit differently, but basically
// this is what we get in the end...
var _doit = function(element, obj) {
  element.extended = obj;
};

如何在Typescript中实现这一点？或者也许我应该用不同的方式来处理这个问题？

任何有效的JavaScript也是有效的TypeScript。这意味着您可以在代码中的任何位置编写文字JS。

var _doit = function(element, obj) {
  element.extended = obj;
};

这是有效的JS和TS。

但是，由于您使用TypeScript，您可能还希望在代码中使用静态类型。如果你只是在代码中添加类型，它会正确编译，但你会得到一个语义错误：

var _doit = function(element:HTMLElement, obj) {
  element.extended = obj; // error: HTMLElement doesn't have property 'extended'
};

为了防止此错误，您可以通知编译器您打算在HTMLElement:上创建一个新属性

interface HTMLElement {
  extended?: any;
}

现在编译器知道HTMLElement上有一个(可选(属性extended，并且编译时不会出错。您还将获得此属性上的代码自动完成(如果提供了JSDoc(。

这对我有效：

class Foo {
  public DoIt(element: Element, obj: Object) {
    var anyElement: any = element;
    anyElement.extended = obj;
  }
}

问题(正如您可能注意到的(是Element没有声明扩展名称的属性，所以TypeScript完成了它的工作并强制执行Element类型。如果您想解决此问题，可以使用any类型来执行此操作。

或者也许我应该用不同的方式来处理这个问题？

如果你想完全脱离编译器检查，只需要一个标准的javascript文件。请注意，如果您想使用typescript中的，则必须告诉typescript(使用ambient declarations(。

个人建议：只需使用TypeScript。

相关文章：