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 65

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.