ইভেন্ট.আরগারেট কেন টাইপসক্রিপ্টে এলিমেন্ট নয়?

Question

আমি কেবল আমার কীবোর্ড ইভেন্টের সাথে এটি করতে চাই

var tag = evt.target.tagName.toLowerCase();

ইভেন্ট.টারাজেট টাইপ ইভেন্ট ইভেন্টেটের ক্ষেত্রে এটি এলিমেন্টের কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না। সুতরাং আমি এটি এই মত নিক্ষেপ করতে হবে:

var tag = (<Element>evt.target).tagName.toLowerCase();

এটি সম্ভবত কিছু ব্রাউজারের মান অনুসরণ না করার কারণে হয়েছে, তাই না? টাইপস্ক্রিপ্টে সঠিক ব্রাউজার অজিনস্টিক বাস্তবায়ন কী?

PS: আমি কীবোর্ড ইভেন্টটি ক্যাপচার করতে jQuery ব্যবহার করছি।

Comments

কিছুটা ক্লিনার সিনট্যাক্সvar element = ev.target as HTMLElement

— এড্রিয়ান মোইসা

Answer 1

এটি উত্তরাধিকারসূত্রে আসে না Elementকারণ সমস্ত ইভেন্টের লক্ষ্যগুলি উপাদান নয়।

এমডিএন থেকে :

এলিমেন্ট, ডকুমেন্ট এবং উইন্ডো সর্বাধিক সাধারণ ইভেন্ট টার্গেট, তবে অন্যান্য বস্তুগুলিও ইভেন্ট টার্গেট হতে পারে, উদাহরণস্বরূপ XMLHttpRequest, AudioNode, AudioContext এবং অন্যান্য।

এমনকি KeyboardEventআপনি যেটি ব্যবহারের চেষ্টা করছেন তা কোনও ডিওএম উপাদান বা উইন্ডো অবজেক্টে (এবং তাত্ত্বিকভাবে অন্যান্য জিনিসগুলির ক্ষেত্রে) ঘটতে পারে, তাই ঠিক সেখানে এটি evt.targetএকটি হিসাবে সংজ্ঞায়িত হওয়ার কোনও মানে হয় না Element।

যদি এটি কোনও ডিওএম উপাদানের কোনও ইভেন্ট হয় তবে আমি বলব যে আপনি নিরাপদে ধরে নিতে পারেন evt.target। একটি Element। আমি মনে করি না এটি ক্রস ব্রাউজার আচরণের বিষয়। নিছক এটি EventTargetতুলনায় আরও বিমূর্ত ইন্টারফেস Element।

আরও পঠন: https://typescript.codeplex.com/discussion/432211

Comments

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

— ডিওএম

আমি ডিওএম বা টাইপস্ক্রিপ্টের বিশেষজ্ঞ নই তবে আমি বলব ইভেন্ট ইভেন্টের ডিজাইনের অনেকটা অস্পষ্টতা রয়েছে এবং টাইপস্ক্রিপ্টের সাথে এর কোনও যোগসূত্র নেই।

— daniel.sedlaysk

@ daniel.sedlaysk অন্যদিকে, KeyboardEventউভয় ডিওএম উপাদান এবং উইন্ডো অবজেক্টে (এবং তাত্ত্বিকভাবে অন্যান্য জিনিস) উভয়ই ঘটতে পারে, সুতরাং ঠিক এমন KeyboardEvent.targetকোনও ধরণের দেওয়া সম্ভব নয় EventTarget, যদি না আপনি মনে করেন KeyboardEventযে এটিরও একটি হওয়া উচিত জেনেরিক টাইপ করুন KeyboardEvent<T extends EventTarget>এবং আপনাকে KeyboardEvent<Element>সমস্ত কোডে জুড়ে দিতে বাধ্য করতে চান । এই মুহুর্তে, আপনি কেবল স্পষ্টভাবে castালাই করা থেকে ভাল, বেদনাদায়ক যদিও তা হতে পারে।

— জেএলআরিশ

ভবিষ্যতে অন্য কারও ক্ষেত্রে এটি সহায়ক value, কোনও <select>ট্যাগের সম্পত্তি অ্যাক্সেস করার জন্য আমাকে একটি নির্দিষ্ট উপাদান ধরণের হিসাবে কাস্ট করা প্রয়োজন । যেমনlet target = <HTMLSelectElement> evt.target;

— মুনসেলজ

@ এমুনসেলজ (দুর্ভাগ্যক্রমে) এটি কোনও টাইপড পরিবেশে অস্পষ্টতাগুলি পরিচালনা করার সঠিক উপায়।

— পাইলাউ

Answer 2

টাইপস্ক্রিপ্ট ব্যবহার করে, আমি একটি কাস্টম ইন্টারফেস ব্যবহার করি যা কেবলমাত্র আমার ফাংশনে প্রযোজ্য। উদাহরণ ব্যবহারের ক্ষেত্রে।

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

এই ক্ষেত্রে, হ্যান্ডেল চেঞ্জটি এইচটিএমএলইনপুট এলিমেন্ট টাইপযুক্ত টার্গেট ফিল্ড সহ একটি বস্তু গ্রহণ করবে।

পরে আমার কোড আমি ব্যবহার করতে পারেন

<input type='text' value={this.state.value} onChange={this.handleChange} />

একটি ক্লিনার পদ্ধতির ইন্টারফেসটি একটি পৃথক ফাইলে রাখা হবে।

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

তারপরে নিম্নলিখিত ফাংশন সংজ্ঞাটি ব্যবহার করুন:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

আমার ব্যবহারের ক্ষেত্রে এটি স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে যে হ্যান্ডেলচ্যাঞ্জের একমাত্র কলার হ'ল এইচটিএমএল উপাদান ধরণের ইনপুট পাঠ্য।

Comments

এটি আমার জন্য নিখুঁতভাবে কাজ করেছে - আমি ইভেন্টট্যাজেট ইত্যাদি প্রসারিত করে সমস্ত ধরণের ঘৃণ্যতা চেষ্টা করেছিলাম তবে এটিই সবচেয়ে পরিষ্কার সমাধান +1

— কিটসন

কেবল এটিতে যুক্ত করার জন্য, যদি ইভেন্টের সংজ্ঞাটি বাড়ানোর দরকার হয় তবে আপনি এরকম কিছু করতে পারেন:handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => {...}

— কিটসন

Answer 3

জেএলআরশির উত্তরটি সঠিক, তাই আমি কেবল আমার ইভেন্ট হ্যান্ডেলারটিতে এটি ব্যবহার করি:

if (event.target instanceof Element) { /*...*/ }

Answer 4

টাইপস্ক্রিপ্ট ৩.২.৪

সম্পত্তি পুনরুদ্ধারের জন্য আপনার অবশ্যই উপযুক্ত ডেটা টাইপের জন্য লক্ষ্য নিক্ষেপ করতে হবে:

e => console.log((e.target as Element).id)

Comments

এটি কি <HTMLInputElement>event.target;সিনট্যাক্সের মতো?

— কনরাড ভিল্টারস্টেন

@ কনরাডভিল্টারস্টেন, তারা একই কাজ করে। asকারণ এটি JSX সঙ্গে বিরোধ সিনট্যাক্স চালু করা হয়। asধারাবাহিকতার জন্য এটি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে । বাসারট.এইটবুকস.আইও

— আদম

আহা, দেখছি। এটি আরও সি ​​# ইশ প্রদর্শিত হচ্ছে যা অনেক ক্ষেত্রে দলের সুবিধার উপর নির্ভর করে একটি সুবিধা। যতক্ষণ না এটি সেইসব ভ্রান্ত বন্ধুদের মধ্যে নয় যেখানে সিনট্যাক্স কিছুটির সাথে সাদৃশ্যযুক্ত তবে প্রযুক্তিগতভাবে সম্পূর্ণ ভিন্ন কিছু বোঝায়। (আমি চিন্তা করছি Var এবং const কৌণিক এবং C #, আমার এক দু: খিত অভিজ্ঞতা মধ্যবর্তী Hehe)।

— কনরাড ভিল্টারস্টন

Answer 5

আপনি কি আপনার নিজস্ব জেনেরিক ইন্টারফেস তৈরি করতে পারেন যা প্রসারিত Event। এটার মতো কিছু?

interface DOMEvent<T extends EventTarget> extends Event {
  target: T
}

তারপরে আপনি এটি ব্যবহার করতে পারেন:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

Answer 6

টাইপস্ক্রিপ্টের সাহায্যে আমরা প্রকারের মতো উপাধিগুলি যেমন উপার্জন করতে পারি:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

Answer 7

@ ব্যাঙ্গনকলি সঠিক উত্তরটি সরবরাহ করে তবে এই বাক্য গঠনটি আমার কাছে আরও পঠনযোগ্য এবং আরও সুন্দর বলে মনে হচ্ছে:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}