TypeScript：类型系统的问题

Question

我只是在 VisualStudio 2012 中测试打字稿，它的类型系统有问题。我的 html 网站有一个 canvas 标签，其 id 为“mycanvas”。我正在尝试在此画布上绘制一个矩形。这是代码

var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

不幸的是 VisualStudio 抱怨说

“HTMLElement”类型的值不存在属性“getContext”

它将第二行标记为错误。我认为这只是一个警告，但代码无法编译。 VisualStudio 说

有构建错误。您想继续并运行上次成功的构建吗？

我根本不喜欢这个错误。为什么没有动态方法调用？毕竟 getContext 方法肯定存在于我的画布元素上。但是我认为这个问题很容易解决。我刚刚为画布添加了一个类型注释：

 var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

但是类型系统仍然不满意。这是新的错误消息，这次在第一行：

无法将“HTMLElement”转换为“HTMLCanvasElement”：类型“HTMLElement”缺少类型“HTMLCanvasElement”中的属性“toDataURL”

好吧，我全力支持静态类型，但这会使该语言无法使用。类型系统要我做什么？

更新：

Typescript 确实不支持动态调用，我的问题可以通过类型转换来解决。我的问题基本上是这个 TypeScript: casting HTMLElement 的重复

原文由 lhk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

var canvas = <HTMLCanvasElement> document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

或使用 any 类型的动态查找（无类型检查）：

 var canvas : any = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

您可以查看 lib.d.ts 中的不同类型。

原文由 Markus Jarderot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

const canvas =  document.getElementById('stage') as HTMLCanvasElement;

原文由 Halil Kocaerkek 发布，翻译遵循 CC BY-SA 4.0 许可协议