टाइपस्क्रिप्ट: टाइप सिस्टम

Question

के साथ समस्याएं मैं केवल VisualStudio 2012 में टाइपस्क्रिप्ट का परीक्षण कर रहा हूं और इसके प्रकार सिस्टम के साथ समस्या है। मेरी एचटीएमएल साइट में आईडी "माइकनवास" आईडी के साथ कैनवास टैग है। मैं इस कैनवास पर एक आयत खींचने की कोशिश कर रहा हूं। यहाँ कोड

var canvas = document.getElementById("mycanvas"); 
var ctx: CanvasRenderingContext2D = canvas.getContext("2d"); 
ctx.fillStyle = "#00FF00"; 
ctx.fillRect(0, 0, 100, 100); 

दुर्भाग्य VisualStudio शिकायत

the property 'getContext' does no exist on value of type 'HTMLElement'

कि यह एक त्रुटि के रूप में दूसरी पंक्ति के निशान है। मैंने सोचा कि यह केवल एक चेतावनी होगी लेकिन कोड संकलित नहीं है। विजुअलस्टूडियो का कहना है कि

there were build errors. Would you like to continue and run the last successful build ?

मुझे यह त्रुटि बिल्कुल पसंद नहीं आया। कोई गतिशील विधि आमंत्रण क्यों नहीं है? सभी विधि प्राप्त करने के बाद मेरे कैनवास तत्व पर निश्चित रूप से मौजूद है। हालांकि मैंने सोचा कि यह समस्या हल करना आसान होगा। मैंने अभी कैनवास के लिए एक प्रकार की एनोटेशन जोड़ा है:

var canvas : HTMLCanvasElement = document.getElementById("mycanvas"); 
var ctx: CanvasRenderingContext2D = canvas.getContext("2d"); 
ctx.fillStyle = "#00FF00"; 
ctx.fillRect(0, 0, 100, 100); 

लेकिन टाइप सिस्टम अभी भी संतुष्ट नहीं था। यहाँ नए त्रुटि संदेश, पहली पंक्ति में इस समय आ गया है:

Cannot convert 'HTMLElement' to 'HTMLCanvasElement': Type 'HTMLElement' is missing property 'toDataURL' from type 'HTMLCanvasElement'

ठीक है, मैं सब बाहर स्थिर टाइपिंग के लिए कर रहा हूँ, लेकिन इस भाषा व्यर्थ बनाता है। टाइप सिस्टम मुझे क्या करना चाहता है?

अद्यतन:

टाइपप्रति वास्तव में गतिशील मंगलाचरण के लिए कोई समर्थन नहीं है और मेरी समस्या typecasts के साथ हल किया जा सकता है।

var canvas : any = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

आप lib.d.ts में विभिन्न प्रकार देख सकते हैं: मेरा प्रश्न मूल रूप से यह एक TypeScript: casting HTMLElement

Answer 1

var canvas = <HTMLCanvasElement> document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

या any प्रकार के साथ गतिशील देखने का उपयोग कर (कोई typechecking) का डुप्लिकेट है।

Answer 2

ऐसा लगता है इस टाइपप्रति की .9 संस्करण में ठीक किया जा रहा है: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload-on-constants-and-compiler-performance.aspx "पर स्थिरांक ओवरलोड" जहां कैनवस टैग स्पष्ट रूप से दिखाया गया है पर अनुभाग देखें।

Answer 3

मुझे एक ही समस्या थी, लेकिन HTMLCanvasElement के बजाय SVGSVGElement के साथ। प्रकार से
प्रकार 'HTMLElement' संपत्ति याद आ रही है 'चौड़ाई' 'SVGSVGElement': 'SVGSVGElement' के लिए

var mySvg = <SVGSVGElement>document.getElementById('mySvg'); 

कनवर्ट नहीं कर सकता 'HTMLElement': SVGSVGElement में कास्ट करना एक संकलन समय त्रुटि दे दी है।
टाइप करें 'एसवीजीएसवीजमेंट' में 'HTMLElement' प्रकार से संपत्ति 'onmouseleave' गुम है।

हैं 'कोई भी' के लिए सबसे पहले कास्टिंग द्वारा यह तय:

var mySvg = <SVGSVGElement><any>document.getElementById('mySvg'); 

या इस तरह से (यह समान प्रभाव पड़ता है)

var mySvg: SVGSVGElement = <any>document.getElementById('mySvg'); 

अब mySvg दृढ़ता से SVGSVGElement के रूप में लिखा गया हो।