如何在 Typescript 中编写文字 Javascript
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31228565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write literal Javascript in Typescript
提问by Andry
I need to add a member to an HTMLElement
, in other words, I need to store data into an element. This is what I would like to achieve as if I am coding in ScriptSharp.
我需要向 an 添加一个成员HTMLElement
,换句话说,我需要将数据存储到一个元素中。这就是我想要实现的,就像我在ScriptSharp 中编码一样。
/** My method */
public DoIt(element: Element, obj: Object) {
Literal("{0}.extended = {1}", element, obj); // This is not standard Typescript!
}
In my exampleScriptSharp (a project to convert C# code into Javascript) provides a Script.Literal
object that allows developers to write plain Javascript when a C# abstraction is not possible.
在我的示例中,ScriptSharp(一个将 C# 代码转换为 Javascript 的项目)提供了一个Script.Literal
对象,允许开发人员在无法进行 C# 抽象时编写纯 Javascript。
So that the Javascript output is:
因此 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;
};
How can I achieve this in Typescript? Or maybe I should handle this problem in a different way?
我怎样才能在打字稿中实现这一点?或者也许我应该以不同的方式处理这个问题?
回答by zlumer
Any valid JavaScript is also valid TypeScript. This means that you can write literal JS in any place in your code.
任何有效的 JavaScript 也是有效的 TypeScript。这意味着您可以在代码的任何位置编写文字 JS。
var _doit = function(element, obj) {
element.extended = obj;
};
This is valid JS andTS.
这是有效的 JS和TS。
However, since you use TypeScript, you may also want to use static typing with your code. If you just add types to your code, it will compile correctly, but you'll get a semantic error:
但是,由于您使用 TypeScript,您可能还想在代码中使用静态类型。如果你只是在你的代码中添加类型,它会正确编译,但你会得到一个语义错误:
var _doit = function(element:HTMLElement, obj) {
element.extended = obj; // error: HTMLElement doesn't have property 'extended'
};
To prevent this error, you can notify the compiler that you intend to create a new property on HTMLElement
:
为防止此错误,您可以通知编译器您打算在 上创建新属性HTMLElement
:
interface HTMLElement {
extended?: any;
}
Now the compiler knows that you have an (optional) property extended
on HTMLElement
and will compile without errors. You will also get code autocompletion on this property (and JSDoc if provided).
现在,编译器知道你有一个(可选)属性extended
上HTMLElement
,将通过编译。您还将获得此属性的代码自动完成功能(以及 JSDoc,如果提供)。
回答by Matthew King
This worked for me:
这对我有用:
class Foo {
public DoIt(element: Element, obj: Object) {
var anyElement: any = element;
anyElement.extended = obj;
}
}
The problem (as you probably noticed) is that Element does not declare a property with the name extended, so TypeScript does its job and enforces the Element type. If you want to work around this, you can use the any
type to do this.
问题(您可能已经注意到)是 Element 没有声明扩展名的属性,因此 TypeScript 完成其工作并强制执行 Element 类型。如果你想解决这个问题,你可以使用any
类型来做到这一点。
回答by basarat
Or maybe I should handle this problem in a different way?
或者也许我应该以不同的方式处理这个问题?
If you want to completely break out of the compiler checking just have a standard javascript
file. Note that if you want to use this from typescriptyou will have to tell typescript about it (using ambient declarations
).
如果您想完全摆脱编译器检查,只需要有一个标准javascript
文件。请注意,如果您想从打字稿中使用它,则必须告诉打字稿(使用ambient declarations
)。
Personal Advice: Just use TypeScript.
个人建议:只需使用 TypeScript。