টাইপস্ক্রিপ্ট: টাইপ সিস্টেমের সাথে সমস্যা

Question

আমি কেবল ভিজুয়ালস্টুডিও 2012 তে টাইপস্ক্রিপ্ট পরীক্ষা করছি এবং এর টাইপ সিস্টেমটিতে সমস্যা আছে। আমার এইচটিএমএল সাইটে "মাইকানভাস" আইডি সহ একটি ক্যানভাস ট্যাগ রয়েছে। আমি এই ক্যানভাসে একটি আয়তক্ষেত্র আঁকতে চেষ্টা করছি। এখানে কোড

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

দুর্ভাগ্যক্রমে ভিজ্যুয়াল স্টুডিও অভিযোগ করে

'getContext' বৈশিষ্ট্যটি 'এইচটিএমলেমেন্ট' টাইপের মানের উপর বিদ্যমান নেই

এটি দ্বিতীয় লাইনটিকে ত্রুটি হিসাবে চিহ্নিত করে। আমি ভেবেছিলাম এটি নিছক একটি সতর্কতা হবে তবে কোডটি সংকলন করে না। ভিজ্যুয়াল স্টুডিও বলেছে

বিল্ড ত্রুটি ছিল। আপনি কি সর্বশেষ সফল বিল্ডটি চালিয়ে যেতে এবং চালাতে চান?

আমি এই ত্রুটি মোটেও পছন্দ করি না। কেন কোনও গতিশীল পদ্ধতির প্রার্থনা নেই? সমস্ত পদ্ধতির পরে getContext অবশ্যই আমার ক্যানভাস উপাদানটিতে বিদ্যমান। তবে আমি ভেবেছিলাম এই সমস্যাটি সমাধান করা সহজ হবে। আমি স্রেফ ক্যানভাসের জন্য একটি প্রকারের টীকা যুক্ত করেছি:

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

তবে টাইপ সিস্টেমটি এখনও সন্তুষ্ট হয়নি। এখানে প্রথম ত্রুটিতে নতুন ত্রুটি বার্তাটি দেওয়া হয়েছে:

'এইচটিএমলেমেন্ট' কে 'এইচটিএমএল ক্যানভাসিলিমেট'তে রূপান্তর করতে পারে না: টাইপ করুন' এইচটিএমএলিমিটি''র এইচটিএমএল ক্যানভাস এলিমেন্ট 'থেকে' ডেটা ইউআরএল 'হারিয়ে যাচ্ছে property

ঠিক আছে, আমি স্থির টাইপিংয়ের জন্য বাইরে আছি তবে এটি ভাষা অকেজো করে তোলে। টাইপ সিস্টেমটি আমার কী করতে চায়?

হালনাগাদ:

টাইপসক্রিপ্টটির প্রকৃতপক্ষে গতিশীল প্রার্থনার জন্য কোনও সমর্থন নেই এবং আমার সমস্যাটি টাইপকাস্টগুলির সাথে সমাধান করা যেতে পারে। আমার প্রশ্নটি মূলত এই একটি টাইপস্ক্রিপ্টের নকল : এইচটিএমলেমে কাস্টিং

Answer 1

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

বা anyপ্রকারের সাথে ডায়নামিক লুকআপ ব্যবহার করে (কোনও টাইপচেকিং নেই):

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

আপনি বিভিন্ন ধরণের lib.d.ts এ দেখতে পারেন ।

Comments

এটি উল্লেখযোগ্য যে ক্যানভাস প্রসঙ্গে টাইপ CanvasRenderingContext2Dনা করে ব্যবহার করা ভাল any।

— ইভান কোচুরকিন

যেহেতু টাইপস্ক্রিপ্ট ১.৮, এটি ধ্রুব স্ট্রিং আর্গুমেন্টকে স্বীকৃতি দেবে "2d"এবং .getContext("2d")টাইপের সাথে ফিরে আসবে CanvasRenderingContext2D। আপনার এটি স্পষ্টভাবে কাস্ট করার দরকার নেই।

— মার্কাস জারদারোট

Answer 2

const canvas =  document.getElementById('stage') as HTMLCanvasElement;

Comments

দয়া করে ব্যাখ্যা করুন কেন এই কোডটি কেবল একটি কোডের উত্তরের চেয়ে ওপির সমস্যা সমাধানে সহায়তা করে। আপনার কোডটি আলাদাভাবে কী করে, কীভাবে সহায়তা করে?

আপনি অনুলিপি / আটকান এবং এটি কার্যকর। এখানে কি ব্যাখ্যা করব? এটা আপনার জন্য কাজ করে না, তাহলে আপনি আপনার সমস্যা ব্যাখ্যা এবং আরো নির্দিষ্টভাবে জিজ্ঞাসা করা উচিত।

— lenooh

Answer 3

অন্য উত্তরগুলি প্রকারের উত্সাহগুলি প্রচার করে (এটাই সেগুলি - টাইপস্ক্রিপ্টে টাইপ ক্যাসেট নেই যা প্রকৃতপক্ষে প্রকারটি পরিবর্তন করে; এগুলি কেবল প্রকারের পরীক্ষার ত্রুটিগুলি দমন করার এক উপায়), আপনার সমস্যার কাছে যাওয়ার বুদ্ধিগতভাবে সৎ উপায়টি শুনতে হয় ভুল বার্তা.

আপনার ক্ষেত্রে, 3 টি জিনিস যা ভুল হতে পারে:

• document.getElementById("mycanvas")ফিরে আসতে পারে null, কারণ এই আইডির কোনও নোড পাওয়া যায় নি (এটি নামকরণ করা যেতে পারে, ডকুমেন্টটিতে এখনও ইনজেকশনের ব্যবস্থা করা হয়নি, কেউ হয়ত ডিওএম অ্যাক্সেস ছাড়াই কোনও পরিবেশে আপনার ফাংশনটি চালনার চেষ্টা করেছে)
• document.getElementById("mycanvas") কোনও ডিওএম উপাদানটির একটি রেফারেন্স ফিরিয়ে দিতে পারে তবে এই ডোম উপাদানটি একটি নয় HTMLCanvasElement
• document.getElementById("mycanvas")একটি বৈধ ফেরত দিয়েছিল HTMLElement, এটি আসলে একটি HTMLCanvasElement, তবে CanvasRenderingContext2Dব্রাউজার দ্বারা এটি সমর্থিত নয়।

সংকলকটি চুপ করে থাকতে বলার পরিবর্তে (এবং সম্ভবত নিজেকে এমন পরিস্থিতিতে আবিষ্কার করুন যেখানে কোনও অকেজো ত্রুটি বার্তা Cannot read property 'getContext' of nullযেমন নিক্ষেপ করা হয়), আমি আপনার অ্যাপ্লিকেশন সীমানা নিয়ন্ত্রণ করার পরামর্শ দিচ্ছি।

উপাদানটিতে একটি এইচটিএমএল ক্যানভাস এলিমেন্ট রয়েছে তা নিশ্চিত করুন

const getCanvasElementById = (id: string): HTMLCanvasElement => {
    const canvas = document.getElementById(id);

    if (!(canvas instanceof HTMLCanvasElement)) {
        throw new Error(`The element of id "${id}" is not a HTMLCanvasElement. Make sure a <canvas id="${id}""> element is present in the document.`);
    }

    return canvas;
}

রেন্ডারিং প্রসঙ্গটি ব্রাউজার দ্বারা সমর্থিত হয়েছে তা নিশ্চিত করুন

const getCanvasRenderingContext2D = (canvas: HTMLCanvasElement): CanvasRenderingContext2D => {
    const context = canvas.getContext('2d');

    if (context === null) {
        throw new Error('This browser does not support 2-dimensional canvas rendering contexts.');
    }

    return context;
}

ব্যবহার:

const ctx: CanvasRenderingContext2D = getCanvasRenderingContext2D(getCanvasElementById('mycanvas'))

ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 100, 100);

টাইপস্ক্রিপ্ট খেলার মাঠ দেখুন ।

Answer 4

দেখে মনে হচ্ছে এটি টাইপস্ক্রিপ্টের .9 সংস্করণে সংশোধন করা হচ্ছে: http://blogs.msdn.com/b/typescript/archive/2013/03/25/working-on-typescript-0-9-generics-overload- অন- কনস্ট্যান্টস এবং কম্পাইলার-পারফরম্যান্স.এএসপিএক্স "কনস্ট্যান্টগুলির ওভারলোড" এর বিভাগটি দেখুন যেখানে ক্যানভাস ট্যাগটি স্পষ্টভাবে দেখানো হয়েছে।

Answer 5

আমার একই সমস্যা ছিল, তবে এইচটিএমএল ক্যানভাস এলিমেন্টের পরিবর্তে এসভিজিএসভিজিলেমেন্ট সহ। SVGSVGElement এ কাস্ট করা একটি সংকলন-সময় ত্রুটি দিয়েছে:

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

'এইচটিএমলেমেন্ট' কে 'এসভিজিএসভিজিলেমেন্ট' এ রূপান্তর করতে পারে না:
টাইপ 'এইচটিএমলেমেন্ট' ধরণের 'এসভিজিএসভিজিলেমেন্ট' থেকে প্রস্থের 'প্রস্থ' অনুপস্থিত।
টাইপ 'এসভিজিএসভিজিলেমেন্ট' টাইপ 'এইচটিএমলেমেন্ট' থেকে 'অনমাউসলেভ' হারিয়েছে।

যদি প্রথমে 'যে কোনও' তে কাস্টিং করে এটি ঠিক করা থাকে:

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

বা এইভাবে (এটির অভিন্ন প্রভাব রয়েছে)

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

এখন মাইএসভিজি এসভিজিএসভিজিলেট হিসাবে শক্তভাবে টাইপ করা হয়েছে।

Answer 6

এটি একটি পুরানো বিষয় ... সম্ভবত 2012 সালে মৃত, তবে উত্তেজনাপূর্ণ এবং ভিএস কোড এবং টাইপস্ক্রিপ্টে নতুন।

নিম্নলিখিত প্যাকেজ রেফারেন্স সহ ভিএস কোড এ কাজ করতে আমাকে নিম্নলিখিত কাজগুলি করতে হয়েছিল।

const demoCanvas: HTMLCanvasElement = document.getElementById('rfrnCanvas') as any;

        if(demoCanvas.getContext) {
            const context = demoCanvas.getContext('2d');

            if(context) {
                reactangle(context);
            }
        }

প্রকারের সংস্করণ:

{
    "@typescript-eslint/eslint-plugin": "^2.29.0",
    "@typescript-eslint/parser": "^2.29.0",
    "typescript": "^3.7.5"
}

Answer 7

আপনি নিজের মধ্যে যোগ DOMকরতে হতে পারে ।compilerOptions.libtsconfig.json

// 'tsconfig.json'
 {
  "compilerOptions": {
    "target": "ES2017",
    "module": "commonjs",
    "lib": [
      "es5",
      "DOM",
      "esnext"
    ]
  }
}