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. Однако я думал, что эта проблема будет легко решить. Я только что добавил тип annotiation для 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'
Ну, я все для статического ввода, но это делает язык непригодным для использования. Что система типов хочет, чтобы я сделал ?
обновление:
Typescript действительно не поддерживает динамический вызов и мою проблему может быть решена с помощью приведения типов. Мой вопрос в основном является дубликатом этого одного TypeScript: casting HTMLElement
3 ответа:
var canvas = <HTMLCanvasElement> document.getElementById("mycanvas"); var ctx = canvas.getContext("2d");
или с помощью динамического поиска с
any
тип (без проверки типа):var canvas : any = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d");
вы можете посмотреть на различные типы в lib.д.ТС.
похоже, это исправляется .9 версия машинописного текста: 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'.если это исправлено путем первого приведения к "любому":
var mySvg = <SVGSVGElement><any>document.getElementById('mySvg');
или так (это имеет одинаковый эффект)
var mySvg: SVGSVGElement = <any>document.getElementById('mySvg');
Теперь mySvg является строго типизированным, как SVGSVGElement.