Vivasoft-logo

3.5 নালেবল  টাইপ

				
					function fun(data: string){
    data.toLowerCase();
  }
  fun(null)
				
			

জাভাস্ক্রিপ্টে এই কোডটা রান করলে কি কোনো ধরণের এরর দেখাবে? কেউ কি বলতে পারবেন? না, কোনো এরর দেখাবে না। কিন্তু এক্সেকিউশনের সময়ে ক্র্যাশ করবে। কারণ নাল অবজেক্টের উপর ফাংশন কল করা যায় না।

কিন্তু টাইপস্ক্রিপ্ট স্মার্ট। সে লাইনটা দেখা মাত্র এরর দেখাবে।

				
					Argument of type 'null' is not assignable to parameter of type 'string'.
				
			

এখন এই এররটা কোথা থেকে বা কেন আসছে এবং এটার দরকার কি আমাদের? একটা একটা করে উত্তর দেই আপনাদের প্রশ্নের, চলুন।

কেন আসছে?

fun ফাংশনে প্যারামিটার হিসেবে এক্সপেক্ট করছে string টাইপ। কিন্তু আমরা পাঠাচ্ছি null , যার কারণে টাইপ মিসম্যাচ হচ্ছে।

কোথা থেকে আসছে?  

tsconfig.json এ কম্পাইলার অপসন `“strictNullChecks”: true` থাকার কারণে এই এররটা ধরা পরে। false করে দিলে এররটা দেখাবে না।  

কেন দরকার? কেউ কি বোকার মতো null লিখে ফাংশনে পাঠাবে?

পাঠাবে না সেটা সত্য।  কিন্তু আমরা যখন ডাটা api-তে পাঠাই, তখন কোনো কারণে ডাটা null থাকলে? বা ডাটাবেস থেকে কোনো ডাটা ফেচ করার টাইমে রিকোয়েস্ট এ কোনো ঝামেলা কারণে ডাটা null হলে?

তাই যেন এরকম অনাকাঙ্খিত অবস্থার সমুখীন হতে না হয় তাই nullable টাইপ ব্যবহার হয়ে থাকে। বেশি কঠিন মনে হচ্ছে? তাইলে চলুন একটা উদহারণ দেখে ফেলি।

আগে প্রথম উদাহরণের সল্যুশন দিয়ে নেই।

আপনারা যদি ফাংশনের প্যারামিটারে nullable টাইপ ব্যবহার করি তাহলেই সমাধান। এবার null পাঠালেও সেটা আমরা প্যারামিটারে একসেপ্ট করছি এবং সেই হিসেবে চাইলে আমরা কেস হ্যান্ডেল করতে পারবো।

				
					function fun(data: string | null){
    //...
  }

				
			

এবার দ্বিতীয় উদাহারণ:

				
					 interface User {
    id: number;
    name: string;
    email: string;
  }
 
  function fetchUser(userId: number): Promise<User | null> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // successful API call
        const user: User = {
          id: userId,
          name: "Rakibul Islam",
          email: "RakibulIslam@gmail.com",
        };
 
        resolve(user);
      }, 2000);
    });
  }
 
  async function displayUser(userId: number): Promise<void> {
    const user = await fetchUser(userId);
 
    if (user !== null) {
      //updating state and display user Information
    } else {
     //loading state
    }
  }
 
  displayUser(123);

				
			

fetchUser ফাংশন নির্দিষ্ট user এর id ধরে ডাটাবেস থেকে তথ্য এনে দেয় ফ্রন্টএন্ডকে। ফাংশনটি  একটি promise রিটার্ন করে যা হবে User অথবা null. যদি ডাটাবেস থেকে ঠিক মতো user-এর তথ্য নিয়ে আসতে পারে তাহলে User রিটার্ন করবে নাহলে null.  সেটার উপর ভিত্তি করে আমরা displayUser ফাংশনের ভিতরে কেস হ্যান্ডেল করেছি।