TypeScript: проблемы с системой типов

Я просто тестирую typescript в VisualStudio 2012 и имею проблему с его системой типов. На моем html-сайте есть тег canvas с идентификатором "mycanvas". Я пытаюсь нарисовать прямоугольник на этом холсте. Здесь код

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

К сожалению, VisualStudio жалуется, что

свойство getContext не существует при значении типа 'HTMLElement'

Он отмечает вторую строку как ошибку. Я думал, что это будет всего лишь предупреждение, но код не компилируется. VisualStudio говорит, что

были ошибки сборки. Вы хотите продолжить и запустить последний успешная сборка?

Мне вообще не нравилась эта ошибка. Почему нет динамического вызова метода? В конце концов метод getContext определенно существует на моем элементе canvas. Однако я думал, что эту проблему будет легко решить. Я просто добавил аннотацию типа для холста:

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

Но система типов все еще не была удовлетворена. Здесь новое сообщение об ошибке, на этот раз в первой строке:

Невозможно преобразовать 'HTMLElement' в 'HTMLCanvasElement': Тип "HTMLElement" отсутствует свойство "toDataURL" из типа 'HTMLCanvasElement'

Ну, я все устал от статической печати, но это делает язык непригодным. Что система типа хочет, чтобы я сделал?

UPDATE:

Typescript действительно не поддерживает динамический вызов, и моя проблема может быть решена с помощью типов. Мой вопрос в основном является дубликатом этого TypeScript: литье HTMLElement

Ответ 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.

Ответ 2

Кажется, это исправляется в версии .9 TypeScript.: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx См. Раздел "Перегрузка по константам", где явно показан тег canvas.

Ответ 3

У меня была та же проблема, но с SVGSVGElement вместо HTMLCanvasElement. Отправка в SVGSVGElement дала ошибку времени компиляции:

var mySvg = <SVGSVGElement>document.getElementById('mySvg');

Невозможно преобразовать 'HTMLElement' в 'SVGSVGElement':
Тип "HTMLElement" отсутствует свойство "width" из типа "SVGSVGElement".
Тип "SVGSVGElement" отсутствует свойство "onmouseleave" из типа "HTMLElement".

Если он был исправлен с помощью первого нажатия на "any":

var mySvg = <SVGSVGElement><any>document.getElementById('mySvg');

или таким образом (он имеет одинаковый эффект)

var mySvg: SVGSVGElement = <any>document.getElementById('mySvg');

Теперь mySvg строго типизирован как SVGSVGElement.