Я просто тестирую 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
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.
Кажется, это исправляется в версии .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.
У меня была та же проблема, но с 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.
CanvasRenderingContext2D
вместоany
типа для контекста холста."2d"
, а.getContext("2d")
будет возвращаться с типомCanvasRenderingContext2D
. Вам не нужно приводить это явно.