টাইপস্ক্রিপ্ট তীর ফাংশনে রিটার্ন টাইপ নির্দিষ্ট করুন

118

আমি প্রতিক্রিয়া এবং রেডাক্স ব্যবহার করছি এবং ইন্টারফেস হিসাবে নির্দিষ্ট ক্রিয়াকলাপ রয়েছে, যাতে আমার হ্রাসকারীরা উন্নত প্রকারের সুরক্ষার জন্য ট্যাগ ইউনিয়ন ধরণের সুবিধা নিতে পারে।

সুতরাং, আমার কাছে টাইপ ডিক্লেয়ারেশন রয়েছে যা দেখতে এরকম দেখাচ্ছে:

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

interface DeleteTodoAction {
    type: "DELETE_TODO",
    id: number
}

type TodoAction = AddTodoAction | DeleteTodoAction

আমি এই ক্রিয়াগুলি তৈরি করে এমন সহায়ক ফাংশন তৈরি করতে চাই এবং আমি এর জন্য তীর ফাংশনগুলি ব্যবহার করার প্রবণতা রাখি। আমি যদি এটি লিখি:

export const addTodo1 = (text: string) => ({
    type: "ADD_TODO",
    text
});

সংকলকটি এটি বৈধ কিনা তা নিশ্চিত করতে কোনও সহায়তা সরবরাহ করতে পারে না AddTodoActionকারণ রিটার্নের ধরণটি স্পষ্টভাবে নির্দিষ্ট করা হয়নি। আমি এটি করে সুস্পষ্টভাবে রিটার্নের ধরণটি নির্দিষ্ট করতে পারি:

export const addTodo2: (text: string) => AddTodoAction = (text: string) => ({
    type: "ADD_TODO",
    text
})

তবে এটির জন্য আমার ফাংশন যুক্তি দু'বার উল্লেখ করা দরকার, সুতরাং এটি ভার্ভোজ এবং পড়ার পক্ষে আরও শক্ত।

তীর সংকেত ব্যবহার করার সময় আমি কীভাবে স্পষ্টভাবে ফেরতের ধরণটি নির্দিষ্ট করতে পারি?

আমি এটি চেষ্টা করার চিন্তা করেছি:

export const addTodo3 = (text: string) => <AddTodoAction>({
    type: "ADD_TODO",
    text
})

এই ক্ষেত্রে, সংকলকটি এখন রিটার্নের ধরনটিকে অনুমান করে AddTodoActionতবে এটি যাচাই করে না যে আমি যে বস্তুটি ফিরিয়ে দিচ্ছি তার উপযুক্ত ক্ষেত্রগুলির সমস্ত আছে।

আমি আলাদা ফাংশন সিনট্যাক্সে স্যুইচ করে এটি সমাধান করতে পারলাম:

export const addTodo4 = function(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

export function addTodo5(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

এই পদ্ধতির যে কোনও একটিই সংকলককে সঠিক রিটার্ন টাইপ ব্যবহার করতে বাধ্য করবে এবং প্রয়োগ করবে যে আমি সমস্ত ক্ষেত্র যথাযথভাবে সেট করেছি, তবে সেগুলি আরও ভারবস এবং তারা thisকোনও ফাংশনে পরিচালিত পদ্ধতিতে পরিবর্তন করে (যা কোনও সমস্যা নাও হতে পারে, আমি ধরে নিচ্ছি.)

এটি করার সর্বোত্তম উপায় সম্পর্কে কোনও পরামর্শ আছে?

typescript

— ব্রায়ান হ্যানচাক
সূত্র

6

getTitle = ():string => 'State Lists'

— বিকাশ বানসাল

147

প্রথমে আপনার মূল প্রশ্ন থেকে নিম্নলিখিত স্বরলিপিটি বিবেচনা করুন:

export const addTodo3 = (text: string) => <AddTodoAction>({
    type: "ADD_TODO",
    text
})

এই স্বরলিপি ব্যবহার করে, আপনি টাইপ ফিরে বস্তুর typecast AddTodoAction। তবে, ফাংশনটির ঘোষিত রিটার্নের ধরণটি এখনও অপরিজ্ঞাত (এবং সংকলক স্পষ্টতই anyরিটার্নের ধরণ হিসাবে ধরে নেবে )।

পরিবর্তে নিম্নলিখিত স্বরলিপি ব্যবহার করুন:

export const addTodo3 = (text: string): AddTodoAction => ({
    type: "ADD_TODO",
    text: text
})

এই ক্ষেত্রে, একটি প্রয়োজনীয় সম্পত্তি বাদ দেওয়া প্রত্যাশিত সংকলক ত্রুটি অর্জন করবে। উদাহরণস্বরূপ, textসম্পত্তি বাদ দেওয়া নিম্নলিখিত (পছন্দসই) ত্রুটি তৈরি করবে:

Type '{ type: "ADD_TODO"; }' is not assignable to type 'TodoAction'.
  Type '{ type: "ADD_TODO"; }' is not assignable to type 'DeleteTodoAction'.
    Types of property 'type' are incompatible.
      Type '"ADD_TODO"' is not assignable to type '"DELETE_TODO"'.

আরো দেখুন উদাহরণ খেলার মাঠ ।

— helmbert
সূত্র

এটি হ'ল নোটেশনটি আমি খুঁজছিলাম। দুর্ভাগ্যক্রমে, ভিজ্যুয়াল স্টুডিও কোডটি আমার প্রত্যাশার সাথে মেলে এমনভাবে সিনট্যাক্সটি হাইলাইট করে না, তবে সংকলকটি এটি বুঝতে পারে বলে মনে হয়।

— ব্রায়ান হ্যান্যাচাক

1

আমি মনে করি আপনার সেরা বাজিটি হ'ল আপনার ফাংশনের জন্য একটি ইন্টারফেস তৈরি করা যা সঠিক ধরণের রয়েছে, তবে আপনাকে কেবল সেই ধরণের নির্দিষ্ট করতে হবে, আপনার ইন্টারফেসের সমস্ত নেস্টেড ধরণের নয়:

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

interface AddTodoActionCreator {
    (text: string): AddTodoAction;
};

export const addTodo: AddTodoActionCreator = (text) => ({
    type: "ADD_TODO",
    text
});

আপডেট: প্রকার সহ এটি কীভাবে করবেন

export interface GeneralAction<T> {
    type: string;
    payload: T;
}

export interface GeneralActionCreator<T> {
    (payload: T): GeneralAction<T>;
}

export const SAVE_EVENT = 'SAVE_EVENT';

export const SaveEvent: GeneralActionCreator<UserEvent> = (payload) => { return {type: SAVE_EVENT, payload}; };

— azium
সূত্র

2

কেউ এই উদাহরণে জেনেরিকগুলি কীভাবে ব্যবহার করবে? অ্যাডটোডো অ্যাকশনক্রিটার <টি>

— জ্যানিক বেক

1

UserEventএখানে কি ?

— 1252748