7.1 টাইপস্ক্রিপ্ট দিয়ে রিযেক্ট প্রজেক্ট ক্রিয়েট
১) ফ্রেশ রিয়েক্ট + টাইপস্ক্রিপ্ট প্রজেক্ট বুটস্ট্র্যাপ করা
২) কোন রিয়েক্ট প্রজেক্ট কে টাইপস্ক্রিপ্ট এ কনভার্ট করা
ফ্রেশ রিয়েক্ট + টাইপস্ক্রিপ্ট প্রজেক্ট বুটস্ট্র্যাপ করাঃ টার্মিনালে গিয়ে নিচের কমান্ড রান করলে একটি ফ্রেশ রিয়েক্ট + টাইপস্ক্রিপ্ট প্রজেক্ট তৈরি হবে।
npx create-react-app my-app --template typescript
- কোন রিয়েক্ট প্রজেক্ট কে টাইপস্ক্রিপ্ট এ কনভার্ট করাঃ
- টাইপস্ক্রিপ্ট কে ডেভ ডিপেনডেন্সি হিসাবে ইন্সটল করতে হবে
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
অথবা
yarn add typescript @types/node @types/react @types/react-dom @types/jest
টাইপস্ক্রিপ্ট ইন্সটল হয়ে গেলে এটা ব্যবহার শুরু করা যাবে। উদাহরণস্বরূপ আমরা একটা ফাইল ক্রিয়েট করি এবং নাম দিব example.tsx
import React from 'react';
interface Props {
name: string;
}
const Example: React.FC<Props> = ({ name }) => {
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
};
export default Example;
এই উদাহরণে আমরা রিয়েক্ট ইম্পোর্ট করছি। এরপর আমরা একটি ইন্টারফেস ডিফাইন করছি কম্পনেন্টের props-এর জন্য। তারপর আমরা কম্পনেন্টের টাইপ ডিফাইন করছি props-এর টাইপ সহ React.FC<Props>.
লক্ষ্য করুন আমরা ফাইলের এক্সটেনশন .tsx ব্যাবহার করছি। কারণ এইভাবে টাইপস্ক্রিপ্ট কম্পাইলার এই বুঝতে পারবে যে এই ফাইলে JSX কনটেন্ট আছে এবং সে অনুযায়ী ট্রন্সপাইল করবে। এইভাবে আগের সব ফাইলের এক্সটেনশন চেঞ্জ করেই টাইপস্ক্রিপ্ট এ কনভার্ট করতে হবে।
- পরবর্তী কাজ প্রজেক্টের রুটে tsconfig.json ফাইল ক্রিয়েট করতে হবে। এই ফাইলে মূলত ডিফাইন করে দেয়া হয় কিভাবে টাইপস্ক্রিপ্ট কম্পাইলার আপনার কোড কম্পাইল করবে। এই ফাইল ক্রিয়েট করা হলে টাইপস্ক্রিপ্ট অটোমেটিক এই কনফিগারেশন ব্যবাহার করে আপনার কোড কম্পাইল করবে। স্মার্ট উপায় হলো npx tsc –init কমান্ড রান করা। তাহলে প্রজেক্টের রুটে একটা tsconfig.json ফাইল ক্রি
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": [
"./src/**/*"
]
এই কনফিগারেশন ফাইলে বিভিন্ন অপশন বলে দেওয়া হয়েছে। উদাহরণঃ target সেট করা হয়েছে es5। মানে আমরা জানি টাইপস্ক্রিপ্ট কোড জাভাস্ক্রিপ্ট-এ কম্পাইল করে তাই জাভাস্ক্রিপ্ট-এর কোন ভ্যারিয়েন্টে কম্পাইল করবে সেটা বলে দেয়া হয়েছে। এরপর মডিউল সিস্টেমকে commonjs এবং JSX কে রিয়েক্ট হিসাবে সেট করা হয়েছে। এই বিষয়ে আরও ডিটেলস পড়তে পারেন এইখানে [https://www.typescriptlang.org/docs/handbook/tsconfig-json.html]
আউটপুটঃ
