আমি কীভাবে টাইপস্ক্রিপ্টে একটি ইন্টারফেস ফাইল সংজ্ঞা উপর ভিত্তি করে একটি বস্তু তৈরি করতে পারি?


313

আমি এর মত একটি ইন্টারফেস সংজ্ঞায়িত করেছি:

interface IModal {
    content: string;
    form: string;
    href: string;
    $form: JQuery;
    $message: JQuery;
    $modal: JQuery;
    $submits: JQuery;
 }

আমি এর মত একটি ভেরিয়েবল সংজ্ঞায়িত করি:

var modal: IModal;

যাইহোক, আমি যখন মডালের সম্পত্তি সেট করার চেষ্টা করি তখন এটি আমাকে একটি বার্তা দেয়

"cannot set property content of undefined"

আমার মডেল অবজেক্টটি বর্ণনা করার জন্য কোনও ইন্টারফেস ব্যবহার করা কি ঠিক আছে এবং যদি তাই হয় তবে এটি কীভাবে তৈরি করব?

উত্তর:


426

আপনি যদি অন্য কোথাও "মডেল" ভেরিয়েবল তৈরি করে থাকেন এবং টাইপস্ক্রিপ্টটি বলতে চান এটি সব হয়ে যাবে, আপনি ব্যবহার করবেন:

declare const modal: IModal;

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

const modal: IModal = {
    content: '',
    form: '',
    href: '',
    $form: null,
    $message: null,
    $modal: null,
    $submits: null
};

বা মিথ্যা বলুন, একটি প্রকারের দৃ lost়তার সাথে, তবে আপনি টাইপ সুরক্ষা হারাবেন যেহেতু আপনি এখন অপ্রত্যাশিত জায়গাগুলিতে এবং সম্ভবত রানটাইম ত্রুটিগুলি অ্যাক্সেস করার সময় modal.contentএবং আরও কিছু পাবেন (যে বৈশিষ্ট্যগুলি চুক্তি বলবে সেখানে থাকবে) lost

const modal = {} as IModal;

উদাহরণ ক্লাস

class Modal implements IModal {
    content: string;
    form: string;
    href: string;
    $form: JQuery;
    $message: JQuery;
    $modal: JQuery;
    $submits: JQuery;
}

const modal = new Modal();

আপনি ভাবতে পারেন "আরে এটি সত্যই ইন্টারফেসের একটি সদৃশ" - এবং আপনি সঠিক বলেছেন। যদি মডেল শ্রেণিটি কেবল ইমোডাল ইন্টারফেসের বাস্তবায়ন হয় তবে আপনি ইন্টারফেসটি পুরোপুরি মুছতে এবং ব্যবহার করতে পারেন ...

const modal: Modal = new Modal();

বরং

const modal: IModal = new Modal();

2
ধন্যবাদ। আমি প্রাথমিকভাবে সমস্ত মডেল বিষয়বস্তু সংজ্ঞায়িত করা থেকে দূরে সরে যাওয়ার আশা করছিলাম। যদি ইন্টারফেসের পরিবর্তে আমি মডেলকে বৈশিষ্ট্যযুক্ত শ্রেণি হিসাবে সংজ্ঞায়িত করি এবং তারপরে প্রাথমিক মানগুলির সেট আপ করার জন্য নতুন এবং কনস্ট্রাক্টর ব্যবহার করি তবে এটি কি সহজ হবে?

1
হ্যাঁ - আপনি একটি শ্রেণি সংজ্ঞায়িত করতে পারেন এবং তারপরে আপনার যখন প্রয়োজন হবে তখনই আপনাকে নতুন দৃষ্টান্ত তৈরি করতে হবে। আপনার কি উদাহরণ দরকার?
ফেন্টন

2
আমি ইন্টারফেস সম্পর্কে একটি উদাহরণ এবং একটি নোট যুক্ত করেছি।
ফেন্টন

21
var modal = <IModal>{};আমি যা খুঁজছিলাম এটিই ;-) ধন্যবাদ!
কিংবদন্তি

5
এফওয়াইআই, এর {} as IModalচেয়ে ব্যবহার করা ভাল <IModal>{}। এটি <foo>জেএসএক্স-এ শৈলীর অবস্থান ব্যবহার করার সময় ভাষা ব্যাকরণের একটি অস্পষ্টতা দূর করে । আরও পড়ুন । এবং অবশ্যই, ব্যবহার letবা constপরিবর্তে var
অ্যালেক্স ক্লাউস

191

আপনি যদি কোনও ইন্টারফেসের একটি ফাঁকা অবজেক্ট চান, আপনি কেবল এটি করতে পারেন:

var modal = <IModal>{};

ডেটা স্ট্রাকচারিংয়ের পরিবর্তে ক্লাসের পরিবর্তে ইন্টারফেসগুলি ব্যবহার করার সুবিধাটি হ'ল যদি আপনার ক্লাসে কোনও পদ্ধতি না থাকে তবে এটি একটি খালি পদ্ধতি হিসাবে সংকলিত জেএসে প্রদর্শন করবে। উদাহরণ:

class TestClass {
    a: number;
    b: string;
    c: boolean;
}

মধ্যে সংকলন

var TestClass = (function () {
    function TestClass() {
    }
    return TestClass;
})();

যার কোন মূল্য নেই। অন্যদিকে, ইন্টারফেসগুলি ডাটা স্ট্রাকচারিং এবং টাইপ চেকিংয়ের সুবিধাগুলি সরবরাহ করার সময় জেএসে মোটেও প্রদর্শিত হবে না।


1
Above উপরের মন্তব্যে যোগ করতে। কোনও ফাংশন "আপডেটমোডাল (আইমোডাল মডেলআইনস্ট্যান্স) {}" বলতে, আপনি ইন্টারফেসের একটি ইনলাইন উদাহরণ তৈরি করতে পারেন 'আইমোডাল', এর মতো: // এখানে কিছু কোড রয়েছে, যেখানে আপডেটমোডাল ফাংশন এবং ইমোডাল অ্যাক্সেসযোগ্য: আপডেটমোডাল (<আইমোডাল> line // এই লাইনটি একটি উদাহরণ সামগ্রী তৈরি করে: '', ফর্ম: '', href: '', $ ফর্ম: নাল, $ বার্তা: নাল, $ মডেল: নাল, $ জমা: নাল}); // আপনার কোডটি বন্ধ করুন `
সানি

ব্যবহার করে var modal= <abc>{}আমরা কেবল খালি অবজেক্টের টাইপ অ্যাবসি মডেল নির্ধারিত করেছি তবে আমরা কোথায় টাইপ মডেল ঘোষণা করেছি? আমি টাইপস্ক্রিপ্ট ব্যবহার করছি 6।
পারদীপ জৈন

এটি আমার পক্ষে কাজ করে না আমাকে গ্রহণযোগ্য উত্তরে বর্ণিত পুরো অবজেক্টটি আরম্ভ করতে হয়েছিল।
রাহুল সোনওয়ানশি

52

আপনি যদি প্রতিক্রিয়া ব্যবহার করছেন, পার্সারটি theতিহ্যবাহী কাস্ট সিনট্যাক্সের উপরে চাপ ফেলবে তাই .tsx ফাইলগুলিতে ব্যবহারের জন্য একটি বিকল্প চালু করা হয়েছিল

let a = {} as MyInterface;

https://www.typescriptlang.org/docs/handbook/jsx.html


22

আমি মনে করি এটি করার জন্য আপনার কাছে মূলত পাঁচটি আলাদা বিকল্প রয়েছে । আপনি যে লক্ষ্যটি অর্জন করতে চান তার উপর নির্ভর করে তাদের মধ্যে নির্বাচন করা সহজ হতে পারে।

বেশিরভাগ ক্ষেত্রে কোনও শ্রেণি ব্যবহার এবং তা ইনস্ট্যান্ট করার সর্বোত্তম উপায় , কারণ আপনি টাইপ স্ক্রিপ্ট ব্যবহার করে টাইপ চেকিং প্রয়োগ করেন।

interface IModal {
    content: string;
    form: string;
    //...

    //Extra
    foo: (bar: string): void;
}

class Modal implements IModal {
    content: string;
    form: string;

    foo(param: string): void {
    }
}

এমনকি যদি অন্য পদ্ধতিগুলি কোনও ইন্টারফেস থেকে কোনও অবজেক্ট তৈরির সহজ উপায় সরবরাহ করে তবে আপনার ইন্টারফেসটি আলাদা করে বিবেচনা করা উচিত , যদি আপনি নিজের বিষয়টিকে বিভিন্ন বিষয়ে ব্যবহার করছেন এবং এটি ইন্টারফেসকে অতিরিক্ত- বিভাজনের কারণ না করে:

interface IBehaviour {
    //Extra
    foo(param: string): void;
}

interface IModal extends IBehaviour{
    content: string;
    form: string;
    //...
}

অন্যদিকে, উদাহরণস্বরূপ ইউনিট আপনার কোডটি পরীক্ষা করার সময় (আপনি যদি উদ্বেগের বিচ্ছিন্নতা প্রায়শই প্রয়োগ নাও করতে পারেন), আপনি উত্পাদনশীলতার স্বার্থে ত্রুটিগুলি গ্রহণ করতে সক্ষম হতে পারেন। আপনি বেশিরভাগ বড় তৃতীয় পক্ষের * .d.ts ইন্টারফেসের জন্য উপহাস তৈরির জন্য অন্যান্য পদ্ধতি প্রয়োগ করতে পারেন। এবং প্রতিটি বিশাল ইন্টারফেসের জন্য সম্পূর্ণ বেনামে থাকা বস্তুগুলি সর্বদা প্রয়োগ করা ব্যথা হতে পারে।

এই পথে আপনার প্রথম বিকল্পটি খালি অবজেক্ট তৈরি করা :

 var modal = <IModal>{};

দ্বিতীয়ত আপনার ইন্টারফেসের বাধ্যতামূলক অংশটি পুরোপুরি উপলব্ধি করা । আপনি তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি কল করছেন কিনা তা কার্যকর হতে পারে তবে আমি মনে করি এর পরিবর্তে আপনার ক্লাস তৈরি করা উচিত, আগের মতো:

var modal: IModal = {
    content: '',
    form: '',
    //...

    foo: (param: string): void => {
    }
};

তৃতীয়ত আপনি আপনার ইন্টারফেসের মাত্র একটি অংশ তৈরি করতে পারেন এবং একটি বেনামী অবজেক্ট তৈরি করতে পারেন , তবে এইভাবে চুক্তিটি সম্পাদন করতে আপনি দায়বদ্ধ

var modal: IModal = <any>{
    foo: (param: string): void => {

    }
};

ইন্টারফেসগুলি alচ্ছিক হলেও আমার জবাবের সংক্ষিপ্তসার, কারণ সেগুলি জাভাস্ক্রিপ্ট কোডে স্থানান্তরিত করা হয়নি, টাইপস্ক্রিপ্টটি বুদ্ধিমান এবং ধারাবাহিকভাবে ব্যবহৃত হলে বিমূর্তির একটি নতুন স্তর সরবরাহ করার জন্য রয়েছে। আমি মনে করি, কেবলমাত্র আপনি নিজের কোড থেকে আপনার বেশিরভাগ ক্ষেত্রে এগুলি খারিজ করতে পারেন।



12

যেহেতু আমি শীর্ষে একটি সমান উত্তর পাইনি এবং আমার উত্তরটি আলাদা। আমি করি:

modal: IModal = <IModal>{}

2

আপনার ইন্টারফেস ব্যবহার করে আপনি করতে পারেন

class Modal() {
  constructor(public iModal: IModal) {
   //You now have access to all your interface variables using this.iModal object,
   //you don't need to define the properties at all, constructor does it for you.
  }
}

2

এখানে অন্য পদ্ধতির:

আপনি সহজেই এর মতো একটি ESLint বন্ধুত্বপূর্ণ অবজেক্ট তৈরি করতে পারেন

const modal: IModal = {} as IModal;

বা ইন্টারফেসের উপর ভিত্তি করে এবং বুদ্ধিমান ডিফল্টগুলির সাথে কোনও ডিফল্ট উদাহরণ, যদি কোনও হয় any

const defaultModal: IModal = {
    content: "",
    form: "",
    href: "",
    $form: {} as JQuery,
    $message: {} as JQuery,
    $modal: {} as JQuery,
    $submits: {} as JQuery
};

তারপরে কিছু বৈশিষ্ট্য ওভাররাইড করে ডিফল্ট উদাহরণের বিভিন্নতা

const confirmationModal: IModal = {
    ...defaultModal,     // all properties/values from defaultModal
    form: "confirmForm"  // override form only
}

1

এখনও অবধি বেশিরভাগ সমাধান ব্যবহারের প্রকারের অনুরোধগুলি পোস্ট করেছে এবং এর জন্য প্রয়োজনীয় ইন্টারফেসের বৈশিষ্ট্যগুলি প্রয়োগের ক্ষেত্রে বাদ দিলে সংকলন ত্রুটিগুলি ছুঁড়ে না ফেলে।

কিছু অন্যান্য শক্তিশালী, কমপ্যাক্ট সমাধানগুলিতে আগ্রহী তাদের জন্য :

বিকল্প 1: ইন্টারফেস প্রয়োগ করে যা একটি বেনাম শ্রেণি ইনস্ট্যান্ট করুন:

new class implements MyInterface {
  nameFirst = 'John';
  nameFamily = 'Smith';
}();

বিকল্প 2: একটি ইউটিলিটি ফাংশন তৈরি করুন:

export function impl<I>(i: I) { return i; }

impl<MyInterface>({
  nameFirst: 'John';
  nameFamily: 'Smith';
})
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.