close

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 ਅਤੇ ਨਾਲ ਵਿਕਸਤ ਕਰਨ ਵੇਲੇ ਸਥਿਰ ਕਿਸਮ ਦੀ ਜਾਂਚ ਅਤੇ IntelliSense ਸਮਰਥਨ ਦਾ ਲਾਭ ਉਠਾਉਣਾ 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.js Vue CLI ਨਾਲ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਸੰਰਚਿਤ ਪ੍ਰੋਜੈਕਟ ਟੈਂਪਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ 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.