JSON থেকে TypeScript
নতুনএকটি JSON নমুনা থেকে নেস্টেড টাইপ সহ TypeScript ইন্টারফেস তৈরি করুন।
Runs entirely in your browser. Nothing is uploaded.
এক ক্লিকে JSON থেকে TypeScript
এই JSON থেকে TypeScript কনভার্টার একটি JSON নমুনা থেকে ব্যবহারযোগ্য ইন্টারফেস, টাইপ বা ক্লাস তৈরি করে দেয়, ফলে কোনো API রেসপন্সের জন্য আর কখনও হাতে করে টাইপ লিখতে হয় না। বাঁ পাশে একটি পেলোড পেস্ট করুন, আর ডান পাশে ঠিক ইনডেন্টেশনসহ পরিষ্কার TypeScript সঙ্গে সঙ্গে দেখা যাবে — কপি করুন, অথবা .ts ফাইল হিসেবে ডাউনলোড করুন।
এটি একটি দ্রুত, ফ্রি, সাইনআপ-মুক্ত বিকল্প একটি কোড জেনারেটর সেটআপ করার — একটি একক JSON to TypeScript interface ধাপ যা সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, যেখানে নেস্টেড অবজেক্ট, অ্যারে এবং ইউনিয়ন সবকিছু নিজে থেকেই বের করা হয়। কোনো ফাইল সাইজ লিমিট নেই, কোনো দৈনিক ব্যবহার সীমা নেই, এবং কিছুই আপনার ডিভাইস ছেড়ে যায় না।
ইন্টারফেস, টাইপ বা ক্লাস — আপনার পছন্দ
আউটপুট টগল ব্যবহার করে ইন্টারফেস, একটি টাইপ অ্যালিয়াস, বা একটি ক্লাস-এর মধ্যে সুইচ করুন। ইন্টারফেস মোড ডিফল্ট এবং export interface Root { … } তৈরি করে; টাইপ মোড export type Root = { … } দেয় সেসব কোডবেসের জন্য যারা অ্যালিয়াস পছন্দ করে; আর ক্লাস মোড একটি export class-এ ফিল্ডগুলো ঘোষণা করে। একই JSON তিনটিকেই চালায়, তাই আপনি সেকেন্ডের মধ্যে নিজের ডেটায় এদের তুলনা করতে পারেন।
আপনি রুটের নাম বদলাতে পারেন, export কীওয়ার্ড চালু বা বন্ধ করতে পারেন, এবং পরের বারের জন্য পছন্দটি মনে রাখা হয় — এটিকে একটি একবারের কনভার্টারের বদলে একটি নমনীয় TypeScript type generator-এ পরিণত করে। quicktype.io-ও এটি সমর্থন করে, তবে প্রতিটি অপশন পাল্টানোর সময় পুরো কনভার্সন আবার চালাতে হয়।
নেস্টেড অবজেক্ট, অ্যারে এবং ইউনিয়নের জন্য স্মার্ট ইনফারেন্স
ইঞ্জিনটি আপনার JSON-এর মধ্য দিয়ে যায় এবং প্রতিটি অবজেক্টের জন্য একটি নামযুক্ত ইন্টারফেস তৈরি করে, নেস্টেড ইন্টারফেসগুলোর নাম তাদের কী (key) থেকে নেয়, এবং অ্যারে এলিমেন্টগুলোকে একবচনে রূপান্তর করে — একটি orders অ্যারে হয়ে যায় Order[]। একইরকম শেপগুলো একটি ইন্টারফেসে ডিডুপ্লিকেট করা হয়, এবং মিশ্র টাইপের অ্যারে একটি ইউনিয়নে গুটিয়ে যায় যেমন (string | number)[]।
enum ডিটেকশন চালু করুন আর বারবার আসা স্ট্রিং ভ্যালুগুলো একটি লিটারেল ইউনিয়ন হিসেবে অনুমান করা হয় — "shipped" এবং "pending"-এর একটি স্ট্যাটাস কলাম "pending" | "shipped" হয়ে যায়, সাধারণ string না হয়ে। এই নির্ভুলতাই আউটপুটকে হাতে লেখা মনে করায়, এবং এটিই এই টুলকে সরল কনভার্টার থেকে আলাদা করে যারা সবসময় স্ট্রিং ফিল্ডের জন্য string-ই দেয়, বিষয়বস্তু যাই হোক না কেন।
অপশনাল, নাল এবং readonly ফিল্ড সঠিকভাবে সামলানো
বাস্তব API ডেটা এলোমেলো হয়, তাই কনভার্টার এটি সততার সাথে সামলায়। আপনি যখন একটি API response to TypeScript-এ রূপান্তর করেন, তখন যেসব কী শুধু কিছু অ্যারে-এলিমেন্টে থাকে, সেগুলো ?-দিয়ে অপশনাল চিহ্নিত হয়, আর আপনি ঠিক করেন নাল কীভাবে টাইপ হবে: এক্সপ্লিসিট | null ইউনিয়ন রাখুন, অথবা null → optional চালু করে zip: string | null-কে zip?: string-এ পরিণত করুন।
একটি readonly টগল প্রতিটি প্রপার্টির আগে readonly মডিফায়ার যোগ করে অপরিবর্তনীয় মডেলের জন্য। একসাথে এই অপশনগুলো আপনাকে জেনারেট হওয়া TypeScript types from JSON-এর সাথে লড়াই না করে নিজের প্রজেক্টের কড়াকড়ির সাথে মেলাতে দেয়। বেশিরভাগ প্রতিদ্বন্দ্বী টুল এসবের এক বা একাধিক অপশন বাদ দেয়, ফলে ডেভেলপারদের জেনারেট করার পর হাতে করে সংশোধন করতে হয়।
quicktype, json2ts এবং MakeTypes-এর সাথে তুলনা
quicktype.io মাল্টি-ল্যাঙ্গুয়েজ জেনারেশনের সবচেয়ে ফিচার-সমৃদ্ধ অপশন — এটি Python, Go, C#, Kotlin এবং TypeScript-এর পাশাপাশি আরও অনেক ভাষা টার্গেট করে। সেই ব্যাপকতার মূল্য এই যে, এর TypeScript আউটপুটে কখনও কখনও quicktype-এর রানটাইম হেল্পার এবং অতিরিক্ত বয়লারপ্লেট থাকে যা পরিষ্কার টাইপ-শুধু ফাইলের জন্য বাদ দিতে হয়। এটি আপনার JSON তাদের সার্ভারেও প্রসেস করে, যা গোপনীয় পেলোডের ক্ষেত্রে গুরুত্বপূর্ণ। json2ts.com সহজ এবং প্লেইন ইন্টারফেস জেনারেট করে কিন্তু enum ডিটেকশন, readonly সাপোর্ট, এবং প্রোডাকশন প্রজেক্টের প্রয়োজনীয় null-হ্যান্ডলিং অপশনের অভাব রয়েছে।
MakeTypes রানটাইম পার্সিংসহ TypeScript ক্লাস তৈরি করে, যা বিল্ট-ইন ভ্যালিডেশন চাইলে উপকারী কিন্তু উল্লেখযোগ্য কোড ওভারহেড যোগ করে। এই UtiloKit কনভার্টার শূন্য রানটাইম ফুটপ্রিন্টসহ খাঁটি টাইপ তৈরি করে — শুধু আপনার কোডের জন্য প্রয়োজনীয় ইন্টারফেস বা টাইপ অ্যালিয়াস, সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, কোনো সার্ভার আপলোড ছাড়া এবং কোনো অ্যাকাউন্ট ছাড়া। দৈনন্দিন API কাজের জন্য যেখানে দ্রুত ও পরিষ্কার টাইপ প্রয়োজন, এটিই সঠিক ট্রেড-অফ।
প্রাইভেট বাই ডিজাইন — আপনার JSON কখনও ব্রাউজার ছেড়ে যায় না
প্রতিটি কনভার্সন স্থানীয়ভাবে আপনার ট্যাবে জাভাস্ক্রিপ্ট ব্যবহার করে হয়। আপনার JSON কখনও কোনো সার্ভারে আপলোড, সংরক্ষণ বা শেয়ার করা হয় না — এটি অফলাইনেও কাজ করে এবং গোপনীয় পেলোড, ইন্টারনাল API এবং প্রোডাকশন ডেটার জন্য নিরাপদ। এই json to typescript converter-টি বুকমার্ক করুন এবং যখনই একটি নমুনা থেকে টাইপ প্রয়োজন হয়, দ্রুত ও বিনামূল্যে ব্যবহার করুন।
সহনশীল পার্সারটি এমনকি // comments, ট্রেইলিং কমা এবং সিঙ্গেল-কোটেড স্ট্রিংসহ JSON-এর মতো ইনপুটও গ্রহণ করে, তাই আপনি আপনার এডিটর থেকে একটি জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল পেস্ট করলেও সঠিক আউটপুট পাবেন। আর কোনো ধাপের দরকার নেই।
TypeScript কীভাবে JSON ভ্যালু থেকে টাইপ অনুমান করে
TypeScript type inference মডেল প্রতিটি JSON প্রিমিটিভকে একটি বিল্ট-ইন TypeScript টাইপে ম্যাপ করে: একটি কোটেড স্ট্রিং হয়ে যায় string, একটি সংখ্যা হয়ে যায় number, true বা false হয়ে যায় boolean, এবং null হয়ে যায় null (অথবা string | null যখন কী-টি অন্য অ্যারে-এলিমেন্টে স্ট্রিং ভ্যালুও বহন করে)। undefined কখনও বৈধ JSON-এ আসে না, তাই এটি তখনই আসে যখন একটি অ্যারের কিছু অবজেক্টে একটি কী অনুপস্থিত থাকে — তখন প্রপার্টিটি T | undefined-এ প্রশস্ত হয় এবং ? দিয়ে অপশনাল চিহ্নিত হয়।
অ্যারে বিশেষ মনোযোগ পায়। একটি সমসত্ত্ব অ্যারে যেমন [1, 2, 3] তৈরি করে number[], আর একটি মিশ্র অ্যারে যেমন [1, "a"] গুটিয়ে যায় একটি ইউনিয়ন টাইপে (string | number)[]। অবজেক্টের একটি অ্যারে একত্রিত করা হয়: সব এলিমেন্টের সব কী সংগ্রহ করা হয়, কিছু এলিমেন্টে অনুপস্থিত কী অপশনাল হয়ে যায়, আর একত্রিত শেপটি একটি একক নামযুক্ত ইন্টারফেস হিসেবে বের হয় — Order[], ইনলাইন অনামা টাইপ নয়। এই স্ট্রাকচারাল মার্জিংই একটি টাইপ জেনারেটরকে একটি সরল লাইন-বাই-লাইন কনভার্টার থেকে আলাদা করে।
একটি গুরুত্বপূর্ণ সতর্কতা: টুলটি যা তৈরি করে তা একটি একক নমুনা পেলোডের স্ট্রাকচারাল স্ন্যাপশট। TypeScript কম্পাইলার আপনার ঘোষিত শেপকে বিশ্বাস করে; এটি জানতে পারে না যে লাইভ API কখনও কখনও একটি ফিল্ড বাদ দেয়, এরর রেসপন্সে সেটি অন্য টাইপ হিসেবে পাঠায়, বা ভবিষ্যতের কোনো API ভার্সনে নতুন ফিল্ড যোগ করে। জেনারেট হওয়া ইন্টারফেসগুলোকে একটি শুরুর বিন্দু হিসেবে ধরুন এবং যেখানে আপনার API ডকুমেন্টেশন ভিন্নতার কথা বলে, সেখানে অপশনাল মডিফায়ার ও ইউনিয়ন টাইপ দিয়ে সেগুলো শক্তপোক্ত করুন।
API ইন্টারফেস আরও শক্তিশালী করার জন্য TypeScript utility types
TypeScript স্ট্যান্ডার্ড লাইব্রেরিতে ম্যাপড ইউটিলিটি টাইপ-এর একটি সেট আসে যা আপনাকে জেনারেট করা ইন্টারফেস থেকে কোড ডুপ্লিকেট না করে নতুন টাইপ বের করতে দেয়। Partial<T> প্রতিটি প্রপার্টিকে অপশনাল করে দেয় — একটি PATCH এন্ডপয়েন্টের বডি টাইপ হিসেবে আদর্শ যেখানে শুধু পরিবর্তিত ফিল্ড পাঠানো হয়। Required<T> ঠিক উল্টোটা করে, সব ? মডিফায়ার সরিয়ে দেয়, যা নিশ্চিত করতে উপকারী যে একটি সম্পূর্ণ-হাইড্রেটেড সার্ভার রেসপন্স সবসময় প্রতিটি ফিল্ড বহন করে। Readonly<T> টাইপ লেভেলে প্রতিটি প্রপার্টিতে readonly মডিফায়ার যোগ করে, অ্যাপ্লিকেশন স্টেটে API ডেটার দুর্ঘটনাজনিত পরিবর্তন প্রতিরোধ করে।
Pick<T, K> এবং Omit<T, K> আপনাকে একটি জেনারেট করা ইন্টারফেসের সাবসেট বের করতে দেয়। উদাহরণস্বরূপ, সার্ভার যদি একটি বড় User ইন্টারফেস ফেরত দেয় কিন্তু একটি ফর্ম শুধু name এবং email নিয়ে চিন্তিত, তাহলে Pick<User, 'name' | 'email'> মূল ইন্টারফেস স্পর্শ না করেই একটি নির্ভুল টাইপ তৈরি করে। উল্টোদিকে, Omit<User, 'passwordHash'> একটি সংবেদনশীল ফিল্ড সরিয়ে দেয় একটি পাবলিক-ফেসিং টাইপ থেকে। Record<K, V> ডিকশনারি-আকৃতির JSON অবজেক্ট কভার করে যেখানে কী-গুলো ডাইনামিক — { "en": "Hello", "fr": "Bonjour" }-এর মতো একটি রেসপন্স নির্দিষ্ট-কী ইন্টারফেসের বদলে Record<string, string> হিসেবে টাইপ করাই ভালো।
এই ইউটিলিটিগুলো জেনারেট করা ইন্টারফেসের সাথে পরিষ্কারভাবে মিশে যায়। এই টুল দিয়ে একবার বেসিক শেপ জেনারেট করুন, সেটি ইমপোর্ট করুন, তারপর Partial, Pick এবং Omit ব্যবহার করে আপনার অ্যাপ্লিকেশনের প্রয়োজনীয় ভ্যারিয়েন্টগুলো বের করুন, ইন্টারফেসটি কপি-পেস্ট করে এডিট না করে। এভাবে একটি একক সোর্স-অব-ট্রুথ ইন্টারফেস API-এর সাথে সিঙ্ক থাকে, আর বিশেষায়িত রিকোয়েস্ট ও রেসপন্স সাবটাইপগুলো স্বয়ংক্রিয়ভাবে বের করা হয়।
নালেবল বনাম অপশনাল: কখন string | null আর কখন string? ব্যবহার করবেন
API রেসপন্স টাইপ করার সময় দুটি ভিন্ন ধারণা প্রায়ই গুলিয়ে যায়: nullable এবং optional। string | null হিসেবে টাইপ করা একটি ফিল্ড TypeScript-কে বলে যে কী-টি JSON-এ সবসময় থাকে, কিন্তু সার্ভার স্পষ্টভাবে null পাঠাতে পারে তার ভ্যালু হিসেবে — যেমন, একটি deletedAt টাইমস্ট্যাম্প রেকর্ডটি মুছে ফেলা পর্যন্ত null থাকে, তারপর একটি তারিখ-স্ট্রিং বহন করে। string | undefined হিসেবে টাইপ করা, বা একটি ইন্টারফেসে field?: string হিসেবে লেখা একটি ফিল্ড TypeScript-কে বলে যে কী-টি JSON-এ একেবারেই নাও থাকতে পারে। এগুলো স্ট্রাকচারালিভাবে ভিন্ন: { deletedAt: null } এবং {} উভয়ই deletedAt?: string | null সন্তুষ্ট করে, কিন্তু শুধু প্রথমটি deletedAt: string | null সন্তুষ্ট করে।
বাস্তব API রেসপন্স প্রায়ই একসাথে দুটি মডিফায়ারই প্রাপ্য হয়: coupon?: string | null। সার্ভার হালকা লিস্ট রেসপন্সে ফিল্ডটি বাদ দিতে পারে (undefined) কিন্তু ডিটেইল রেসপন্সে কোনো কুপন না থাকলে সেটি null হিসেবে পাঠাতে পারে। এটিকে শুধু string-এ গুটিয়ে ফেললে null-এ .toUpperCase() কল করার সময় রানটাইম এরর হয়; শুধু string?-এ গুটিয়ে ফেললে সার্ভার স্পষ্টভাবে অনুপস্থিতি সিগন্যাল করা এবং ফিল্ডটি সত্যিই অনুপস্থিত থাকার মধ্যে পার্থক্য হারিয়ে যায়। NonNullable<T> ইউটিলিটি টাইপ এর বিপরীত: এটি একটি ইউনিয়ন থেকে null এবং undefined সরিয়ে দেয় — NonNullable<string | null | undefined> তৈরি করে string — যা একটি নাল চেক করার পর ডাউনস্ট্রিম কোডের জন্য টাইপ সংকীর্ণ করতে উপকারী।
এই কনভার্টারের null-হ্যান্ডলিং টগলগুলো আপনাকে ঠিক করতে দেয় কোন কনভেনশন আপনার কোডবেসের সাথে মানানসই: সর্বোচ্চ নির্ভুলতার জন্য এক্সপ্লিসিট | null ইউনিয়ন রাখুন, বা কম শব্দবহুল স্টাইলের জন্য নাল-কে অপশনাল ?-এ গুটিয়ে ফেলুন। কোনোটিই সার্বজনীনভাবে সঠিক নয় — সঠিক পছন্দ নির্ভর করে আপনার কোডবেস একটি অনুপস্থিত ফিল্ড এবং একটি স্পষ্টভাবে নাল করা ফিল্ডের মধ্যে পার্থক্য করে কিনা, এবং আপনার API ডকুমেন্টেশন সেই পার্থক্যটি স্পষ্টভাবে নির্ধারণ করে কিনা তার ওপর।
Zod দিয়ে রানটাইম ভ্যালিডেশন — কারণ TypeScript টাইপ রানটাইমে অদৃশ্য হয়ে যায়
TypeScript একটি কম্পাইল-টাইম টুল। TypeScript কম্পাইলার যখন আপনার কোড জাভাস্ক্রিপ্টে ট্রান্সপাইল করে, তখন প্রতিটি ইন্টারফেস, টাইপ অ্যালিয়াস এবং জেনেরিক প্যারামিটার মুছে ফেলা হয় — এদের কোনোটিই রানটাইমে থাকে না। এর মানে একটি সঠিকভাবে টাইপ করা ইন্টারফেস একটি অপ্রত্যাশিত শেপ ফেরত দেওয়া API ধরতে পারে না: আপনার User ইন্টারফেস যদি id: number আশা করে কিন্তু সার্ভার id: "abc" পাঠায়, TypeScript-এর টাইপ চেকার ঘোষণাটি গ্রহণ করেছিল কিন্তু চলমান প্রোগ্রামটি কোনো এরর ছাড়াই ভুল ভ্যালু পায়।
Zod এই ফাঁকের সবচেয়ে জনপ্রিয় সমাধান। z.object({ id: z.number(), name: z.string() }).parse(response)-এর মতো একটি Zod স্কিমা প্রকৃত রানটাইম ভ্যালু যাচাই করে এবং শেপ না মিললে একটি বিস্তারিত এরর ছুড়ে দেয় — এবং একই সাথে এটি z.infer<typeof schema>-এর মাধ্যমে TypeScript টাইপও অনুমান করে, তাই আপনি একটি একক সোর্স-অব-ট্রুথ থেকে রানটাইম নিরাপত্তা এবং কম্পাইল-টাইম নিরাপত্তা উভয়ই পান। প্যাটার্নটি হলো: এই টুল দিয়ে JSON নমুনা থেকে প্রথম ইন্টারফেসটি তৈরি করুন, তারপর প্রোডাকশন ব্যবহারের জন্য এটি একটি Zod স্কিমা হিসেবে পুনর্লিখন করুন। io-ts একই রানটাইম-প্লাস-টাইপ গ্যারান্টি দেয় একটি ফাংশনাল প্রোগ্রামিং স্টাইলে অ্যালজেব্রাইক টাইপের ওপর ভিত্তি করে, এবং যেসব কোডবেস ইতিমধ্যে fp-ts ব্যবহার করে সেখানে পছন্দ করা হয়।
যেসব প্রজেক্টের ইতিমধ্যে একটি JSON Schema বা OpenAPI স্পেসিফিকেশন আছে, তাদের জন্য সহযোগী টুল json-schema-to-zod এবং openapi-typescript একটি নমুনা পেলোডের বদলে স্পেক থেকে সরাসরি Zod স্কিমা বা TypeScript টাইপ তৈরি করতে পারে। এটি আপনাকে এমন টাইপ দেয় যা একটি পর্যবেক্ষিত উদাহরণের বদলে প্রামাণিক চুক্তি (contract) অনুসরণ করে। দ্রুত প্রোটোটাইপিং এবং একবারের টাইপ জেনারেশনের জন্য এই JSON-to-TypeScript টুল ব্যবহার করুন; স্পেক-চালিত টুলিং ব্যবহার করুন — REST-এর জন্য openapi-typescript, GraphQL-এর জন্য graphql-code-generator, বা ডাটাবেস মডেলের জন্য Prisma-র বিল্ট-ইন টাইপ — যখন আপনার সম্পূর্ণ API স্পেসিফিকেশনের মালিকানা বা অ্যাক্সেস আছে।
Frequently asked questions
আমি কীভাবে JSON থেকে TypeScript-এ রূপান্তর করব?
আপনার JSON ইনপুট প্যানে পেস্ট করুন (অথবা একটি উদাহরণ লোড করতে Sample চাপুন) আর মিলে যাওয়া TypeScript সঙ্গে সঙ্গে আউটপুট প্যানে দেখা যায় — ইনস্টল বা সাইনআপের কিছু নেই। উদাহরণস্বরূপ, {"id": 1, "name": "Ada"} হয়ে যায় export interface Root { id: number; name: string; }। Copy চাপুন বা .ts ডাউনলোড করুন টাইপগুলো সরাসরি আপনার প্রজেক্টে বসাতে। সবকিছু স্থানীয়ভাবে আপনার ব্রাউজারে চলে, কোনো ফাইল সাইজ লিমিট নেই এবং কোনো দৈনিক ব্যবহার সীমা নেই — যেখানে অন্য টুল ফাইল তাদের সার্ভারে প্রসেস করে।
আমি কীভাবে JSON থেকে TypeScript ইন্টারফেস তৈরি করব?
আউটপুট Interface (ডিফল্ট) রাখুন এবং প্রতিটি JSON অবজেক্ট তার নিজস্ব export interface হয়ে যায়। Root name ফিল্ড দিয়ে টপ-লেভেল নাম নিয়ন্ত্রণ করুন। যেমন { "id": 1, "name": "Ada" } User নামসহ তৈরি করে export interface User { id: number; name: string; }। নেস্টেড অবজেক্ট স্বয়ংক্রিয়ভাবে তাদের নিজস্ব নামযুক্ত ইন্টারফেস হয়ে যায়। এটি quicktype.io-এর চেয়ে দ্রুত, যেখানে কিছু জেনারেট করার আগে সোর্স ফরম্যাট, টার্গেট ভাষা এবং রুট ক্লাসের নাম নির্দিষ্ট করতে হয়।
একটি ইন্টারফেস আর একটি টাইপ অ্যালিয়াসের মধ্যে পার্থক্য কী?
উভয়েই একই অবজেক্ট শেপ বর্ণনা করে — Interface / Type / Class টগল দিয়ে আপনার কোডবেস যেটা পছন্দ করে সেটা বেছে নিন। ইন্টারফেস মোড export interface Root { … } তৈরি করে, যা আবার খুলে এক্সটেন্ড করা যায় declaration merging দিয়ে; টাইপ মোড export type Root = { … } তৈরি করে, যা ইউনিয়ন ও প্রিমিটিভও প্রকাশ করতে পারে; ক্লাস মোড ঘোষিত ফিল্ডসহ export class Root { … } তৈরি করে। একটি সাধারণ অবজেক্টের জন্য তিনটিই রানটাইমে একই রকম, তাই পছন্দটি মূলত স্টাইলের বিষয়। quicktype.io ডিফল্টভাবে ইন্টারফেস দেয় কিন্তু আবার জেনারেট না করে ফরম্যাট বদলাতে দেয় না — এই টুল সঙ্গে সঙ্গে সুইচ করে।
আমি কীভাবে অপশনাল বা নাল ফিল্ড (? / | null) সামলাব?
দুটি সুইচ এটি নিয়ন্ত্রণ করে। 'Optional (?) for missing keys' যেকোনো প্রপার্টি অপশনাল চিহ্নিত করে যা অবজেক্টের অ্যারেতে কিছু আইটেম থেকে অনুপস্থিত — তাই একটি কুপন যা শুধু কিছু অর্ডারে থাকে তা হয়ে যায় coupon?: string। 'null → optional' একটি নালেবল ফিল্ড যেমন zip: string | null-কে zip?: string-এ পুনর্লিখন করে; এটি বন্ধ রাখুন এক্সপ্লিসিট | null ইউনিয়ন রাখতে। আপনার টিমের null-হ্যান্ডলিং স্টাইলের সাথে ঠিকভাবে মেলাতে দুটি একসাথে ব্যবহার করুন। বেশিরভাগ অনলাইন JSON-to-TypeScript টুল একটি বা অন্যটি সামলায় কিন্তু একটি টগলে দুটি নয়, যে কারণে বাস্তব API রেসপন্স প্রায়ই অন্য জায়গায় ভুল টাইপ তৈরি করে।
আমি কীভাবে নেস্টেড JSON-কে নেস্টেড ইন্টারফেসে রূপান্তর করব?
নেস্টিং স্বয়ংক্রিয়ভাবে সামলানো হয়। প্রতিটি নেস্টেড অবজেক্ট তার কী-এর নামে একটি নিজস্ব ইন্টারফেস হয়ে যায়, আর প্যারেন্ট সেটিকে রেফারেন্স করে। যেমন { "address": { "city": "London" } } তৈরি করে interface Address { city: string; } আর প্যারেন্টে address: Address;। অবজেক্টের অ্যারে একবচন এলিমেন্ট নাম পায়, তাই একটি orders অ্যারে হয়ে যায় Order[]। একইরকম শেপ একটি ইন্টারফেসে ডিডুপ্লিকেট করা হয় যাতে পুনরাবৃত্ত ডেফিনিশন না আসে — বড় API রেসপন্সে ম্যানুয়াল কনভার্সন প্রায় সবসময় এখানে ভুল করে।
আমি কীভাবে JSON-কে TypeScript টাইপ অ্যালিয়াসে রূপান্তর করব?
টগল Type-এ সুইচ করুন এবং প্রতিটি শেপ export type Name = { … } হিসেবে বের হয়, ইন্টারফেসের বদলে। আপনার JSON-এর রুট একটি অ্যারে বা প্রিমিটিভ হলে টাইপ অ্যালিয়াস স্বয়ংক্রিয়ভাবে ব্যবহৃত হয় — যেমন একটি টপ-লেভেল [1, 2, 3] হয়ে যায় export type Root = number[]; আর একটি খালি "hello" হয়ে যায় export type Root = string;, কারণ এগুলো ইন্টারফেস হিসেবে প্রকাশ করা যায় না। এটি TypeScript কম্পাইলার আচরণের সাথে ঠিক মেলে, তাই জেনারেট করা টাইপগুলো কোনো পরিবর্তন ছাড়াই কম্পাইল হয়।
এখানে JSON পেস্ট করা কি নিরাপদ?
হ্যাঁ। কনভার্সন সম্পূর্ণভাবে ক্লায়েন্ট-সাইড: আপনার JSON আপনার নিজের ব্রাউজার ট্যাবে চলা জাভাস্ক্রিপ্ট দিয়ে পার্স করে TypeScript-এ পরিণত করা হয়, এবং এটি কখনও কোনো সার্ভারে আপলোড, লগ বা পাঠানো হয় না। আপনি ইন্টারনেট থেকে সংযোগ বিচ্ছিন্ন করতে পারেন আর টুলটি কাজ করতেই থাকে, যা প্রাইভেট API রেসপন্স এবং গোপনীয় পেলোডের জন্য নিরাপদ করে তোলে। quicktype.io এবং json2ts.com-এর মতো টুল আপনার ডেটা তাদের সার্ভারে প্রসেস করে এবং তা লগ করতে পারে — এই টুল কখনও তা করে না।
JSON থেকে অ্যারে কীভাবে টাইপ করা হয়?
একটি সমসত্ত্ব টাইপের অ্যারে হয়ে যায় T[] — তাই ["a", "b"] হলো string[] আর [1, 2] হলো number[]। অবজেক্টের একটি অ্যারে একটি একক এলিমেন্ট ইন্টারফেসে একত্রিত হয়, যেমন একটি orders অ্যারে হয়ে যায় Order[]। একটি মিশ্র অ্যারে হয়ে যায় একটি ইউনিয়ন, যেমন (string | number)[]। 'Detect string enums' চালু করুন এবং বারবার আসা স্ট্রিং কলাম যেমন 'shipped' আর 'pending' একটি লিটারেল ইউনিয়ন "pending" | "shipped" হিসেবে অনুমান করা হয়, সাধারণ string নয়। এই enum ডিটেকশন বেশিরভাগ সরল json-to-ts কনভার্টারে নেই, যারা সবসময় স্ট্রিং ফিল্ডের জন্য string দেয়।
আমি কীভাবে জেনারেট হওয়া ইন্টারফেসগুলোর নাম দিব?
Root name ফিল্ডে একটি নাম লিখুন (এটি ডিফল্টভাবে Root) আর টপ-লেভেল ইন্টারফেস সেটি ব্যবহার করে। নেস্টেড ইন্টারফেসের নাম তাদের কী থেকে PascalCase-এ হয় — userInfo হয়ে যায় UserInfo — আর অ্যারে এলিমেন্ট একবচন হয়, তাই categories হয়ে যায় Category। একইরকম শেপ একটি ইন্টারফেসে ডিডুপ্লিকেট হয় যাতে পুনরাবৃত্ত ডেফিনিশন না আসে। এই PascalCase রূপান্তর এবং একবচনকরণই একটি ভালো টাইপ জেনারেটরকে একটি সরল জেনারেটর থেকে আলাদা করে যা শুধু কী নামগুলো যেমন আছে তেমন কপি করে।
আমি কি একটি API বা Swagger রেসপন্স থেকে টাইপ জেনারেট করতে পারি?
হ্যাঁ — আপনার API থেকে একটি প্রকৃত JSON রেসপন্স পেস্ট করুন আর টুলটি ব্যবহারযোগ্য ইন্টারফেস অনুমান করে যা আপনি সরাসরি আপনার fetch বা axios কলে অটোকমপ্লিশন ও টাইপ নিরাপত্তার জন্য যুক্ত করতে পারেন। একটি Swagger / OpenAPI এন্ডপয়েন্টের জন্য, একটি উদাহরণ রেসপন্স বডি কপি করুন (JSON, স্কিমা ডকুমেন্ট নয়) আর সেটি রূপান্তর করুন। যেহেতু অ্যারে-আইটেম জুড়ে অনুপস্থিত কী অপশনাল চিহ্নিত হয়, ফলাফলটি ডেটার প্রকৃত শেপ প্রতিফলিত করে। এটি quicktype-এর সাথে ডেভেলপাররা যে ওয়ার্কফ্লো ব্যবহার করে তার মতোই, তবে কমান্ড-লাইন ইনস্টল বা অ্যাকাউন্টের প্রয়োজন ছাড়া।
আমি কীভাবে ফিল্ডগুলো readonly করব?
readonly চিপ টগল করুন আর প্রতিটি প্রপার্টির আগে readonly মডিফায়ার যোগ হয় — id: number হয়ে যায় readonly id: number — যা অপরিবর্তনীয় মডেল, Redux স্টেট, বা কনফিগ অবজেক্টের জন্য আদর্শ যা লোড হওয়ার পর কখনও পুনর্নির্ধারণ চান না। এটি নেস্টেড ইন্টারফেসেও প্রযোজ্য। খুব কম অনলাইন JSON-to-TypeScript কনভার্টার readonly-কে একটি টগল হিসেবে সমর্থন করে — বেশিরভাগে জেনারেট করার পর হাতে করে মডিফায়ার যোগ করতে হয়, যা অনেক প্রপার্টিসহ বড় অবজেক্টের জন্য ক্লান্তিকর।
আমি কীভাবে জেনারেট হওয়া ইন্টারফেসগুলো এক্সপোর্ট করব?
export কীওয়ার্ড ডিফল্টভাবে চালু থাকে, তাই আউটপুটে export interface Root { … } থাকে এবং এটি তার নিজস্ব .ts মডিউলে পেস্ট করে অন্য জায়গায় ইমপোর্ট করার জন্য প্রস্তুত। export কীওয়ার্ড ছাড়া প্লেইন লোকাল ঘোষণা চাইলে export চিপ বন্ধ করুন। শেষ হলে, ফাইল সেভ করতে Copy বা Download .ts ব্যবহার করুন। Download অপশনটি আপনার রুট ইন্টারফেস নাম অনুসারে ফাইলের নাম রাখে, তাই User হয়ে যায় User.ts — একটি ছোট ডিটেইল যা অনেক ইন্টারফেস ফাইলসহ একটি প্রজেক্টে টাইপ যোগ করার সময় সময় বাঁচায়।
এটি quicktype.io-এর সাথে কীভাবে তুলনীয়?
quicktype.io একটি শক্তিশালী মাল্টি-ল্যাঙ্গুয়েজ কোড জেনারেটর যা Python, Go, C# এবং TypeScript-এর পাশাপাশি আরও অনেক ভাষা টার্গেট করে। সেই ব্যাপকতার সাথে ট্রেড-অফ আসে: UI-তে অনেক অপশন আছে আর কিছু মোডে TypeScript আউটপুটে quicktype-নির্দিষ্ট রানটাইম হেল্পার থাকে। এই টুল কোনো রানটাইম হেল্পার ছাড়াই পরিষ্কার, শূন্য-ডিপেন্ডেন্সি TypeScript ইন্টারফেস তৈরি করে — শুধু আপনার প্রয়োজনীয় টাইপ, অতিরিক্ত কিছু নয়। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, কোনো অ্যাকাউন্ট বা সার্ভার আপলোড ছাড়া, যেখানে quicktype তাদের সার্ভারের মাধ্যমে ফাইল প্রসেস করে।
এটি কি আইফোন এবং অ্যান্ড্রয়েডে কাজ করে?
হ্যাঁ। টুলটি যেকোনো আধুনিক মোবাইল ব্রাউজারে চলে — আইফোনে Safari, অ্যান্ড্রয়েডে Chrome, Firefox Mobile এবং Samsung Internet সবই কাজ করে। আপনার JSON ইনপুট ফিল্ডে পেস্ট করুন, আর TypeScript স্ক্রিনে সঙ্গে সঙ্গে দেখা যাবে। ইন্টারফেসটি ছোট স্ক্রিনের জন্য একটি স্ট্যাকড লেআউটে খাপ খায় যাতে কোনো অনুভূমিক স্ক্রল ছাড়াই ইনপুট এবং আউটপুট দুটোই দেখা যায়। কোনো অ্যাপ ইনস্টলের দরকার নেই, আর আপনার JSON পুরোটা সময় আপনার ডিভাইসেই থাকে।
পার্সার কোন কোন JSON ফরম্যাট গ্রহণ করে?
পার্সারটি স্ট্যান্ডার্ড JSON এবং সাথে বেশ কিছু JSON-এর মতো ভ্যারিয়েন্টও গ্রহণ করে: সিঙ্গেল-কোটেড স্ট্রিং সহ জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল, শেষ প্রপার্টির পরে ট্রেইলিং কমাসহ অবজেক্ট, এবং // লাইন কমেন্টসহ JSON। এই সহনশীল পার্সিংয়ের মানে হলো আপনি আপনার এডিটর বা টার্মিনাল থেকে একটি জাভাস্ক্রিপ্ট কনফিগ অবজেক্ট সরাসরি পেস্ট করতে পারেন, প্রথমে কড়া JSON-এ রূপান্তর করা ছাড়াই। বেশিরভাগ অনলাইন ভ্যালিডেটর এই ভ্যারিয়েন্টগুলো প্রত্যাখ্যান করে এবং একটি পার্স এরর দেয় — এই টুল সেগুলো সুন্দরভাবে সামলায়।
এটি MakeTypes-এর সাথে কীভাবে তুলনীয়?
MakeTypes বিল্ট-ইন রানটাইম পার্সিং মেথডসহ TypeScript ক্লাস তৈরি করে, যা উপকারী যদি আপনি টাইপের মধ্যেই বেক করা ভ্যালিডেশন চান — কিন্তু এটি উল্লেখযোগ্য জেনারেট করা কোড ওভারহেড যোগ করে, সাধারণত একটি সরল টাইপ ফাইলের জন্য প্রয়োজনের চেয়ে ৩-৫ গুণ বেশি লাইন। এই টুল শূন্য রানটাইম ফুটপ্রিন্টসহ খাঁটি TypeScript ইন্টারফেস বা টাইপ অ্যালিয়াস তৈরি করে: কোনো হেল্পার ক্লাস নেই, কোনো পার্স মেথড নেই, শুধু আপনার কোডের প্রয়োজনীয় টাইপ। যেসব টিম ইতিমধ্যে Zod বা Ajv-এর মতো একটি ভ্যালিডেশন লাইব্রেরি ব্যবহার করে, তাদের জন্য খাঁটি টাইপই সঠিক আউটপুট।
Related tools
সব টুল দেখুনJSON ⇄ CSV কনভার্টার
JSON অ্যারেকে CSV-তে এবং CSV-কে আবার JSON-এ রূপান্তর করুন — সঠিক কোটিং সহ।
XML ফরম্যাটার
আপনার ব্রাউজারেই XML সুন্দর করুন, মিনিফাই ও যাচাই করুন।
SQL ফরম্যাটার
কীওয়ার্ড কেসিং ও clause ব্রেক সহ SQL কোয়েরি সুন্দর ও মিনিফাই করুন।
CSV ভিউয়ার
CSV বা TSV ফাইল পরিচ্ছন্ন টেবিল হিসেবে দেখুন, সাজান ও খুঁজুন — আপনার ব্রাউজারে।
Statistics Calculator
Calculate mean, median, mode, standard deviation, variance and more from a data set.
Matrix Calculator
Add, subtract, multiply matrices and compute determinant, inverse and transpose for 2×2–4×4 matrices.