Kas ir TSX fails?

TSX fails parasti tiek saistīts ar TypeScript failiem, kas satur React kodu. TypeScript ir JavaScript superkopa, kas valodai pievieno statisku rakstīšanu, un React ir JavaScript bibliotēka lietotāja saskarņu izveidei. Strādājot kopā ar React un TypeScript, izstrādātāji bieži izmanto saviem failiem paplašinājumu .tsx, lai norādītu, ka tajos ir gan TypeScript, gan JSX (React sintakses paplašinājums JavaScript).

TSX faila piemērs

TypeScript ļauj definēt veidus jūsu mainīgajiem, funkciju parametriem un citiem. Bieži vien .tsx” failā redzēsit TypeScript kodu, kas norāda React komponentos izmantotos rekvizītus, stāvokli un citus mainīgos.

// Example: TypeScript code in a React component
interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  // Component logic here
  return <div>{name} is {age} years old.</div>;
};

JSX (React Sintakses paplašinājums)

JSX ir React ieteiktais JavaScript sintakses paplašinājums. Tas izskatās līdzīgs XML/HTML un tiek izmantots, lai aprakstītu lietotāja saskarni.

// Example: JSX in a React component
const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return <div>{name} is {age} years old.</div>;
};

Failā .tsx parasti ir ietverta React komponenta definīcija, izmantojot funkcionālos komponentus vai klases komponentus.

// Example: React component definition in a ".tsx" file
const MyComponent: React.FC = () => {
  return <div>Hello, React!</div>;
};

Faila sākumā bieži redzēsit importēšanas paziņojumus, kas ienes nepieciešamās atkarības un moduļus.

// Example: Import statements in a ".tsx" file
import React from 'react';

Kā atvērt TSX failu?

TSX faili ir vienkārša teksta faili, tāpēc varat tos atvērt jebkurā teksta redaktorā, piemēram, Notepad. Tomēr tie ir kodēšanas faili, un tie ir paredzēti IDE atvēršanai, piemēram, Visual Studio Code.