আমি কীভাবে টাইপস্ক্রিপ্টের সাথে অবজেক্টগুলির অ্যারের জন্য একটি ইন্টারফেস সংজ্ঞায়িত করতে পারি?

Question 1

আমি নিম্নলিখিত ইন্টারফেস এবং কোড আছে। আমি ভেবেছিলাম আমি সংজ্ঞাগুলি সঠিকভাবে করছি তবে আমি একটি ত্রুটি পাচ্ছি:

interface IenumServiceGetOrderBy { id: number; label: string; key: any }[];

এবং:

getOrderBy = (entity): IenumServiceGetOrderBy => {
        var result: IenumServiceGetOrderBy;
        switch (entity) {
            case "content":
                result =
                [
                    { id: 0, label: 'CId', key: 'contentId' },
                    { id: 1, label: 'Modified By', key: 'modifiedBy' },
                    { id: 2, label: 'Modified Date', key: 'modified' },
                    { id: 3, label: 'Status', key: 'contentStatusId' },
                    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
                    { id: 5, label: 'Title', key: 'title' },
                    { id: 6, label: 'Type', key: 'contentTypeId' },
                    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
                ];
                break;
        }
        return result;
    };

ত্রুটি:

Error   190 Cannot convert '{}[]' to 'IenumServiceGetOrderBy':
    Type '{}[]' is missing property 'id' from type 'IenumServiceGetOrderBy'

Question 2

আপনি একটি সঙ্গে একটি ইন্টারফেস বর্ণনা করতে পারেন indexer :

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

Question 3

আপনার একটি সূচক ব্যবহার করার প্রয়োজন নেই (যেহেতু এটি কিছুটা কম টাইপসেজের)। আপনার দুটি বিকল্প রয়েছে:

interface EnumServiceItem {
    id: number; label: string; key: any
}

interface EnumServiceItems extends Array<EnumServiceItem>{}


// Option A 
var result: EnumServiceItem[] = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
    { id: 2, label: 'Modified Date', key: 'modified' },
    { id: 3, label: 'Status', key: 'contentStatusId' },
    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
    { id: 5, label: 'Title', key: 'title' },
    { id: 6, label: 'Type', key: 'contentTypeId' },
    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
];

// Option B
var result: EnumServiceItems = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
    { id: 2, label: 'Modified Date', key: 'modified' },
    { id: 3, label: 'Status', key: 'contentStatusId' },
    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
    { id: 5, label: 'Title', key: 'title' },
    { id: 6, label: 'Type', key: 'contentTypeId' },
    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
]

ব্যক্তিগতভাবে আমি অপশন এ এর সুপারিশ করি (আপনি যখন ইন্টারফেস নয় ক্লাস ব্যবহার করছেন তখন সহজ স্থানান্তর)।

Question 4

আপনি কেবল অ্যারে ইন্টারফেসটি প্রসারিত করে একটি ইন্টারফেসটিকে অ্যারে হিসাবে সংজ্ঞায়িত করতে পারেন।

export interface MyInterface extends Array<MyType> { }

এটির সাহায্যে যে কোনও বস্তু যা প্রয়োগ করে MyInterfaceতার জন্য অ্যারের সমস্ত ফাংশন কলগুলি প্রয়োগ করা প্রয়োজন এবং কেবলমাত্র এটির সাহায্যে অবজেক্টগুলি সঞ্চয় করতে সক্ষম হবেMyType টাইপের ।

Question 5

অতিরিক্ত সহজ বিকল্প:

    interface simpleInt {
        id: number;
        label: string;
        key: any;
    }

    type simpleType = simpleInt[];

Question 6

ব্যবহার করবেন না

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

আপনি সমস্ত অ্যারে বৈশিষ্ট্য এবং পদ্ধতি যেমন স্প্লাইস ইত্যাদির জন্য ত্রুটি পাবেন

সমাধানটি এমন একটি ইন্টারফেস তৈরি করা যা অন্য ইন্টারফেসের অ্যারে সংজ্ঞা দেয় (যা বস্তুর সংজ্ঞা দেবে)

উদাহরণ স্বরূপ:

interface TopCategoriesProps {
  data: Array<Type>;
}
interface Type {
  category: string;
  percentage: number;
}

Question 7

কৌণিক ক্ষেত্রে অবজেক্টের একটি 'অ্যারে' এর জন্য ইন্টারফেস সংজ্ঞায়িত করতে 'প্রসারিত' ব্যবহার করুন।

একটি সূচক ব্যবহার করা আপনাকে ত্রুটি দেয় কারণ এটি অ্যারে ইন্টারফেস নয় তাই বৈশিষ্ট্য এবং পদ্ধতিগুলি অন্তর্ভুক্ত করে না।

যেমন

ত্রুটি TS2339: সম্পত্তি 'খুঁজে পাওয়া' 'ISelectOptions2' টাইপটিতে বিদ্যমান নেই।

// good    
export interface ISelectOptions1 extends Array<ISelectOption> {}

// bad
export interface ISelectOptions2 {
    [index: number]: ISelectOption;
}

interface ISelectOption {
    prop1: string;
    prop2?: boolean;
}

Question 8

আপনি যদি একটি সম্পূর্ণ নতুন ধরণের তৈরি করতে না চান তবে এখানে একটি ইনলাইন সংস্করণ রয়েছে:

export interface ISomeInterface extends Array<{
    [someindex: string]: number;
}> { };

Question 9

এছাড়াও আপনি এটি করতে পারেন।

            interface IenumServiceGetOrderBy {
                id: number; 
                label: string; 
                key: any;
            }

            // notice i am not using the []
            var oneResult: IenumServiceGetOrderBy = { id: 0, label: 'CId', key: 'contentId'};

            //notice i am using []
            // it is read like "array of IenumServiceGetOrderBy"
            var ArrayOfResult: IenumServiceGetOrderBy[] = 
            [
                { id: 0, label: 'CId', key: 'contentId' },
                { id: 1, label: 'Modified By', key: 'modifiedBy' },
                { id: 2, label: 'Modified Date', key: 'modified' },
                { id: 3, label: 'Status', key: 'contentStatusId' },
                { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
                { id: 5, label: 'Title', key: 'title' },
                { id: 6, label: 'Type', key: 'contentTypeId' },
                { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
            ];

Question 10

কোনও tslint ত্রুটি সহ সহজ বিকল্প ...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

Question 11

আপনার উদাহরণের সাথে অভিযোজিত একটি সমাধান এখানে দেওয়া হয়েছে:

interface IenumServiceGetOrderByAttributes { 
  id: number; 
  label: string; 
  key: any 
}

interface IenumServiceGetOrderBy extends Array<IenumServiceGetOrderByAttributes> {

}

let result: IenumServiceGetOrderBy;

এই সমাধানের সাহায্যে আপনি অ্যারের সমস্ত বৈশিষ্ট্য এবং পদ্ধতি ব্যবহার করতে পারেন (যেমন: length, push(), pop(), splice()...)

Question 12

এভাবে ব্যবহার করুন!

interface Iinput {
  label: string
  placeholder: string
  register: any
  type?: string
  required: boolean
}


// This is how it can be done

const inputs: Array<Iinput> = [
  {
    label: "Title",
    placeholder: "Bought something",
    register: register,
    required: true,
  },
]

Question 13

প্রোগ্রামিং সহজ। সাধারণ ইউজকেস ব্যবহার করুন:

interface IenumServiceGetOrderBy { id: number; label: string; key: any }
 // OR
interface IenumServiceGetOrderBy { id: number; label: string; key: string | string[] }

// use interface like
const result: IenumServiceGetOrderBy[] = 
                [
                    { id: 0, label: 'CId', key: 'contentId' },
                    { id: 1, label: 'Modified By', key: 'modifiedBy' },
                    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] }
                ];