close

TypeScript Integracija su Angular, React ir Vue.js: konfigūracija ir pranašumai kuriant žiniatinklio programas

Įvadas

Šiuolaikiniame žiniatinklio programų kūrimo pasaulyje naudojimas TypeScript su populiariomis sistemomis, tokiomis kaip Angular, React, ir Vue.js tapo itin svarbia tendencija. TypeScript užtikrina statinį tipo tikrinimą, prisidedant prie labiau prižiūrimo ir lankstesnio kodo kūrimo. Remiantis tuo, šiame straipsnyje pateikiamas išsamus vadovas, kaip sukonfigūruoti TypeScript ir panaudoti jos pranašumus kuriant žiniatinklio programas naudojant šias populiarias sistemas.

 

Konfigūruojama TypeScript naudojant Angular

Naudojimas Angular CLI kuriant TypeScript projektą

Angular CLI siūlo greitą ir paprastą būdą sukurti Angular projektą, iš anksto sukonfigūruotą naudojant TypeScript. Norėdami sukurti naują projektą, tiesiog paleiskite šią komandą:

ng new my-app --defaults

Konfigūruojama tsconfig.json

Failas tsconfig.json leidžia tinkinti TypeScript projekto nustatymus Angular. Pavyzdžiui, galite konfigūruoti failą tsconfig.json taip:

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

Kuriant naudojant Angular ir naudojant statinį tipo tikrinimą ir „IntelliSense“ palaikymą TypeScript

Pavyzdys: sukurti Angular component naudojant TypeScript:

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

 

Konfigūruojama TypeScript naudojant React

Naudojant Kurti React App su TypeScript

Sukurti React App yra populiarus projektų kūrimo įrankis React. Galite sukurti naują projektą TypeScript naudodami šią komandą:

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

TypeScript Pagalbinių bibliotekų diegimas React

Įdiekite ir paketus, kad įsitikintumėte, jog suprantate ir suteikiate kodo tipą. @types/react @types/react-dom TypeScript React

Tipo deklaracijų ir statinio tipo tikrinimo React kodo naudojimas

Pavyzdys: React komponento kūrimas naudojant TypeScript:

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

 

Konfigūruojama TypeScript naudojant Vue.js

Naudojant Vue CLI kuriant Vue.js projektą su TypeScript

„Vue CLI“ teikia iš anksto sukonfigūruotus projektų šablonus, skirtus Vue.js projektams kurti naudojant TypeScript. Tiesiog paleiskite šią komandą:

vue create my-app

Tada pasirinkite šabloną, kuris palaiko TypeScript.

Plėtros TypeScript funkcijų panaudojimas Vue.js

Pavyzdys: pastatykite Vue component su 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 Žiniatinklio programų kūrimo pranašumai

  • Statinis tipo tikrinimas padeda anksti aptikti klaidas ir užtikrina kodo tikslumą.
  • „IntelliSense“ ir išmanioji pagalba padidina produktyvumą ir sumažina derinimo laiką.
  • Kodas tampa lengviau prižiūrimas ir išplečiamas naudojant tipo deklaracijas ir TypeScript funkcijas.
  • Sklandi integracija su populiariais kūrimo įrankiais ir bibliotekomis, pvz., kompiliatoriais debuggers, ir paketų tvarkytuvais.

 

Išvada

Šiame straipsnyje mes pateikėme išsamų vadovą, kaip konfigūruoti TypeScript ir panaudoti jo pranašumus dirbant su populiariomis žiniatinklio sistemomis, tokiomis kaip Angular, React  ir Vue.js. Naudodami TypeScript galite padidinti lankstumą, sumažinti klaidų skaičių ir pagerinti savo žiniatinklio programų kūrimo našumą.

 

Naudodami šį vadovą gausite aiškų supratimą, kaip sukonfigūruoti TypeScript ir panaudoti jo pranašumus kuriant žiniatinklio programas naudojant populiarias sistemas, tokias kaip Angular, React, ir Vue.js.