TypeScript کے ساتھ انضمام Angular ، React اور Vue.js: ویب ایپلیکیشن ڈیولپمنٹ میں کنفیگریشن اور فوائد

تعارف

ویب ایپلیکیشن ڈویلپمنٹ کی جدید دنیا میں، TypeScript مقبول فریم ورک جیسے Angular, کے ساتھ استعمال کرنا ایک اہم رجحان بن گیا ہے React ۔ جامد قسم کی جانچ پڑتال فراہم کرتا ہے، زیادہ قابل برقرار اور لچکدار کوڈ کی ترقی میں تعاون کرتا ہے۔ اس کی بنیاد پر، یہ مضمون ان مقبول فریم ورکس کے ساتھ ویب ایپلیکیشن ڈویلپمنٹ میں اس کے فوائد کو ترتیب دینے اور ان کا استعمال کرنے کے بارے میں ایک جامع گائیڈ فراہم کرتا ہے۔ Vue.js TypeScript TypeScript

 

TypeScript کے ساتھ ترتیب دینا Angular

پروجیکٹ Angular CLI بنانے کے لیے استعمال کرنا TypeScript

Angular CLI Angular کے ساتھ پہلے سے تشکیل شدہ پروجیکٹ بنانے کا ایک تیز اور آسان طریقہ پیش کرتا ہے TypeScript ۔ نیا پروجیکٹ بنانے کے لیے بس درج ذیل کمانڈ کو چلائیں:

ng new my-app --defaults

ترتیب دینا tsconfig.json

tsconfig.json فائل آپ کو TypeScript اپنے Angular پروجیکٹ میں ترتیبات کو اپنی مرضی کے مطابق کرنے کی اجازت دیتی ہے۔ مثال کے طور پر، آپ tsconfig.json فائل کو اس طرح ترتیب دے سکتے ہیں:

{  
  "compilerOptions": {  
    "target": "es2017",  
    "module": "es2020",  
    "strict": true  
  }  
}  

Angular اور کے ساتھ ترقی کرتے وقت جامد قسم کی جانچ اور انٹیلی سینس سپورٹ کا فائدہ اٹھانا TypeScript

مثال: Angular component کے ساتھ ایک بنانا TypeScript:

import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-example',  
  template: `  
    <h1>{{ greeting }}</h1>  
  `  
})  
export class ExampleComponent {  
  greeting: string = 'Hello, TypeScript!';  
}  

 

TypeScript کے ساتھ ترتیب دینا React

تخلیق React App کے ساتھ استعمال کرنا TypeScript

تخلیق پروجیکٹس React App بنانے کا ایک مقبول ٹول ہے ۔ آپ مندرجہ ذیل کمانڈ کو چلا کر React ایک نیا پروجیکٹ بنا سکتے ہیں ۔ TypeScript

npx create-react-app my-app --template typescript

TypeScript میں سپورٹ لائبریریوں کو انسٹال کرنا React

اور پیکجز کو انسٹال کریں تاکہ یہ یقینی بنایا جا سکے کہ آپ کے کوڈ کو سمجھ سکتے ہیں اور قسم کی مدد فراہم کر سکتے ہیں۔ @types/react @types/react-dom TypeScript React

React کوڈ میں قسم کے اعلانات اور جامد قسم کی جانچ کا استعمال

مثال: React کے ساتھ ایک جزو بنانا TypeScript:

import React from 'react';  
  
interface Props {  
  name: string;  
}  
  
const Greeting: React.FC<Props> =({ name }) => {  
  return <h1>Hello, {name}!</h1>;  
};  
  
export default Greeting;  

 

TypeScript کے ساتھ ترتیب دینا Vue.js

کے ساتھ ایک پروجیکٹ Vue CLI بنانے کے لیے استعمال کرنا Vue.js TypeScript

Vue CLI پہلے سے ترتیب شدہ پروجیکٹ ٹیمپلیٹس فراہم کرتا ہے تاکہ Vue.js اس کے ساتھ پروجیکٹس بنائے جائیں TypeScript ۔ بس درج ذیل کمانڈ کو چلائیں:

vue create my-app

پھر، ایک ٹیمپلیٹ منتخب کریں جو سپورٹ کرتا ہو TypeScript ۔

ترقی TypeScript میں خصوصیات کا فائدہ اٹھانا Vue.js

مثال: اس Vue component کے ساتھ ایک بنانا TypeScript:

<template>  
  <h1>{{ greeting }}</h1>  
</template>  
  
<script lang="ts">  
import { Vue, Component } from 'vue-property-decorator';  
  
@Component  
export default class GreetingComponent extends Vue {  
  greeting: string = 'Hello, TypeScript!';  
}  
</script>  

 

TypeScript ویب ایپلیکیشن ڈویلپمنٹ کے فوائد

• جامد قسم کی جانچ غلطیوں کا جلد پتہ لگانے میں مدد کرتی ہے اور کوڈ کی درستگی کو یقینی بناتی ہے۔
• IntelliSense اور ذہین مدد پیداواری صلاحیت کو بڑھاتی ہے اور ڈیبگنگ کا وقت کم کرتی ہے۔
• TypeScript قسم کے اعلانات اور خصوصیات کے استعمال سے کوڈ زیادہ قابل برقرار اور قابل توسیع بن جاتا ہے ۔
• مقبول ترقیاتی ٹولز اور لائبریریوں جیسے کمپائلرز، debuggers اور پیکیج مینیجرز کے ساتھ ہموار انضمام۔

 

نتیجہ

اس آرٹیکل میں، ہم نے TypeScript مشہور ویب فریم ورک جیسے Angular ، React  اور Vue.js. کو استعمال کر کے TypeScript ، آپ لچک کو بڑھا سکتے ہیں، غلطیوں کو کم کر سکتے ہیں، اور اپنی ویب ایپلیکیشن ڈیولپمنٹ میں کارکردگی کو بہتر بنا سکتے ہیں۔

 

اس گائیڈ کے ساتھ، آپ کو اس بات کی واضح سمجھ حاصل ہو جائے گی کہ ویب ایپلیکیشن ڈویلپمنٹ میں اس کے فوائد کو کس طرح ترتیب دیا جائے TypeScript اور اس سے فائدہ اٹھایا جائے جیسے کہ مشہور فریم ورکس Angular ، React اور Vue.js ۔