Saya baru saja menguji skrip ketikan di VisualStudio 2012 dan memiliki masalah dengan sistem tipenya. Situs html saya memiliki tag kanvas dengan id "mycanvas". Saya mencoba menggambar persegi panjang di kanvas ini. Ini kodenya
var canvas = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
Sayangnya VisualStudio mengeluhkan hal itu
properti 'getContext' tidak ada pada nilai tipe 'HTMLElement'
Ini menandai baris kedua sebagai kesalahan. Saya pikir ini hanya akan menjadi peringatan tetapi kode tidak dapat dikompilasi. VisualStudio mengatakan itu
ada kesalahan pembuatan. Apakah Anda ingin melanjutkan dan menjalankan build terakhir yang berhasil?
Saya sama sekali tidak menyukai kesalahan ini. Mengapa tidak ada pemanggilan metode dinamis? Bagaimanapun, metode getContext pasti ada di elemen kanvas saya. Namun saya pikir masalah ini akan mudah diselesaikan. Saya baru saja menambahkan anotasi tipe untuk kanvas:
var canvas : HTMLCanvasElement = document.getElementById("mycanvas");
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);
Tapi sistem tipe masih belum memuaskan. Inilah pesan kesalahan baru, kali ini di baris pertama:
Tidak dapat mengonversi 'HTMLElement' menjadi 'HTMLCanvasElement': Jenis 'HTMLElement' tidak memiliki properti 'toDataURL' dari jenis 'HTMLCanvasElement'
Yah, saya habis untuk mengetik statis tetapi ini membuat bahasanya tidak dapat digunakan. Apa yang sistem tipe ingin saya lakukan?
MEMPERBARUI:
Ketik memang tidak mendukung pemanggilan dinamis dan masalah saya dapat diselesaikan dengan typecasts. Pertanyaan saya pada dasarnya adalah duplikat dari TypeScript yang satu ini : casting HTMLElement
CanvasRenderingContext2D
daripadaany
jenis untuk konteks kanvas."2d"
, dan.getContext("2d")
akan kembali dengan tipeCanvasRenderingContext2D
. Anda tidak perlu mentransmisikannya secara eksplisit.sumber
Sementara jawaban lain mempromosikan pernyataan tipe (itulah mereka - TypeScript tidak memiliki tipe cast yang benar-benar mengubah tipe; mereka hanyalah cara untuk menekan kesalahan pengecekan tipe), cara yang jujur secara intelektual untuk mendekati masalah Anda adalah dengan mendengarkan pesan kesalahan.
Dalam kasus Anda, ada 3 hal yang bisa salah:
document.getElementById("mycanvas")
mungkin kembalinull
, karena tidak ada node dari id tersebut yang ditemukan (mungkin telah diganti namanya, belum dimasukkan ke dokumen, seseorang mungkin telah mencoba menjalankan fungsi Anda di lingkungan tanpa akses ke DOM)document.getElementById("mycanvas")
mungkin mengembalikan referensi ke elemen DOM, tetapi elemen DOM ini bukanHTMLCanvasElement
document.getElementById("mycanvas")
memang mengembalikan yang validHTMLElement
, itu memang sebuahHTMLCanvasElement
, tetapiCanvasRenderingContext2D
tidak didukung oleh browser.Alih-alih memberi tahu kompiler untuk tutup mulut (dan mungkin menemukan diri Anda dalam situasi di mana pesan kesalahan yang tidak berguna seperti
Cannot read property 'getContext' of null
dilemparkan), saya sarankan untuk mengambil kendali atas batas aplikasi Anda.Pastikan elemen tersebut berisi HTMLCanvasElement
Pastikan konteks rendering didukung oleh browser
Pemakaian:
Lihat TypeScript Playground .
sumber
Tampaknya ini diperbaiki dalam TypeScript versi .9: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload- on-constants-and-compiler-performance.aspx Lihat bagian "Overload on Constants" tempat tag kanvas ditampilkan secara eksplisit.
sumber
Saya memiliki masalah yang sama, tetapi dengan SVGSVGElement, bukan HTMLCanvasElement. Mentransmisikan ke SVGSVGElement memberikan kesalahan waktu kompilasi:
Tidak dapat mengubah 'HTMLElement' menjadi 'SVGSVGElement':
Ketik 'HTMLElement' tidak memiliki properti 'width' dari jenis 'SVGSVGElement'.
Jenis 'SVGSVGElement' tidak memiliki properti 'onmouseleave' dari jenis 'HTMLElement'.
Jika memperbaikinya dengan mentransmisikan terlebih dahulu ke 'any':
atau dengan cara ini (efeknya sama)
Sekarang mySvg sangat diketik sebagai SVGSVGElement.
sumber
Ini adalah topik lama ... mungkin sudah mati sampai tahun 2012, tetapi menarik dan baru untuk VS Code dan skrip ketikan.
Saya harus melakukan hal berikut untuk mendapatkan ini berfungsi di VS Code dengan referensi paket berikut.
Versi Script:
sumber
Anda mungkin harus menambahkan
DOM
kecompilerOptions.lib
dalamtsconfig.json
.sumber