Właśnie testuję maszynopis w VisualStudio 2012 i mam problem z jego systemem typów. Moja witryna HTML zawiera tag Canvas z identyfikatorem „mycanvas”. Próbuję narysować prostokąt na tym płótnie. Oto kod
var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
Niestety VisualStudio narzeka na to
właściwość „getContext” nie istnieje w wartości typu „HTMLElement”
Oznacza drugą linię jako błąd. Myślałem, że to tylko ostrzeżenie, ale kod się nie kompiluje. VisualStudio tak mówi
wystąpiły błędy kompilacji. Czy chcesz kontynuować i uruchomić ostatnią udaną kompilację?
W ogóle nie podobał mi się ten błąd. Dlaczego nie ma dynamicznego wywołania metody? W końcu metoda getContext na pewno istnieje w moim elemencie canvas. Pomyślałem jednak, że ten problem będzie łatwy do rozwiązania. Właśnie dodałem adnotację typu dla płótna:
var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
Ale system typów nadal nie był zadowolony. Oto nowy komunikat o błędzie, tym razem w pierwszym wierszu:
Nie można przekonwertować „HTMLElement” na „HTMLCanvasElement”: w typie „HTMLElement” brakuje właściwości „toDataURL” z typu „HTMLCanvasElement”
Cóż, wolę statyczne pisanie, ale to sprawia, że język jest bezużyteczny. Czego oczekuje ode mnie system typów?
AKTUALIZACJA:
Maszynopis rzeczywiście nie obsługuje dynamicznych wywołań, a mój problem można rozwiązać za pomocą typecastów. Moje pytanie jest w zasadzie duplikatem tego TypeScript: casting HTMLElement
CanvasRenderingContext2D
zamiast tekstuany
."2d"
i.getContext("2d")
zwróci ten typCanvasRenderingContext2D
. Nie musisz go rzucać jawnie.źródło
Podczas gdy inne odpowiedzi promują asercje typu (tym właśnie są - TypeScript nie ma rzutów typu, które faktycznie zmieniają typ; są one jedynie sposobem na wyeliminowanie błędów sprawdzania typu), intelektualnie uczciwym sposobem podejścia do problemu jest wysłuchanie komunikaty o błędach.
W Twoim przypadku są 3 rzeczy, które mogą pójść nie tak:
document.getElementById("mycanvas")
może powrócićnull
, ponieważ nie znaleziono węzła o tym id (nazwa mogła zostać zmieniona, nie została jeszcze wstrzyknięta do dokumentu, ktoś mógł próbować uruchomić twoją funkcję w środowisku bez dostępu do DOM)document.getElementById("mycanvas")
może zwrócić odwołanie do elementu DOM, ale ten element DOM nie jestHTMLCanvasElement
document.getElementById("mycanvas")
zwrócił prawidłową wartośćHTMLElement
, rzeczywiście jest toHTMLCanvasElement
, aleCanvasRenderingContext2D
nie jest obsługiwana przez przeglądarkę.Zamiast nakazać kompilatorowi zamknięcie się (i prawdopodobnie znaleźć się w sytuacji, w której
Cannot read property 'getContext' of null
wyrzucany jest bezużyteczny komunikat o błędzie ), zalecam przejęcie kontroli nad granicami aplikacji.Upewnij się, że element zawiera HTMLCanvasElement
Upewnij się, że kontekst renderowania jest obsługiwany przez przeglądarkę
Stosowanie:
Zobacz TypeScript Playground .
źródło
Wygląda na to, że jest to poprawiane w wersji .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 Zobacz sekcję „Przeciążenie stałych”, w której jest jawnie pokazany tag kanwy.
źródło
Miałem ten sam problem, ale z SVGSVGElement zamiast HTMLCanvasElement. Przesyłanie do SVGSVGElement spowodowało błąd w czasie kompilacji:
Nie można przekonwertować „HTMLElement” na „SVGSVGElement”: w
typie „HTMLElement” brakuje właściwości „width” z typu „SVGSVGElement”.
W typie „SVGSVGElement” brakuje właściwości „onmouseleave” z typu „HTMLElement”.
Jeśli naprawiono to przez pierwsze rzutowanie na „any”:
lub w ten sposób (ma identyczny efekt)
Teraz mySvg jest silnie wpisane jako SVGSVGElement.
źródło
To stary temat ... może martwy do 2012 roku, ale ekscytujący i nowy w VS Code i maszynopisie.
Musiałem wykonać następujące czynności, aby to działało w programie VS Code z następującymi odwołaniami do pakietów.
Wersja maszynopisu:
źródło
Być może będziesz musiał dodać
DOM
docompilerOptions.lib
swojegotsconfig.json
.źródło