如何在Typescript中编写文字Javascript

Question

我需要在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;
};

我怎样才能在打字稿中实现这一目标？ 或许我应该以不同的方式处理这个问题？

Answer 1

任何有效的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）。

Answer 2

这对我有用：

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

问题（您可能已经注意到）是Element不会声明名称为extended的属性，因此TypeScript会执行其工作并强制执行Element类型。 如果您想解决此问题，可以使用any类型来执行此操作。

Answer 3

或许我应该以不同的方式处理这个问题？

如果你想完全打破编译器检查只是有一个标准的javascript文件。 请注意，如果要从typescript中使用它，则必须告诉typescript（使用ambient declarations ）。

个人建议：只需使用TypeScript即可。