Каковы различия между расширениями .ts и .tsx в TypeScript?

TypeScript — это язык программирования, основанный на JavaScript, который добавляет статическую типизацию. Среди различных особенностей TypeScript важное значение имеют его расширения файлов: .ts и .tsx. Давайте рассмотрим, как они отличаются друг от друга и когда их следует использовать.

Расширение .ts

Файлы с расширением .ts представляют собой обычные файлы TypeScript. Вы используете это расширение, когда пишете обычный TypeScript, который не включает JSX (JavaScript XML) синтаксис. JSX — это синтаксис, используемый в React для описания пользовательских интерфейсов.

Пример .ts файла:

// file.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

const message = greet("Alice");
console.log(message);

В приведенном выше примере код написан на TypeScript и не содержит JSX. Он определяет функцию, принимающую строковый параметр и возвращающую строку.

Расширение .tsx

Файлы с расширением .tsx используются, когда вы хотите включить JSX в ваш TypeScript код. Это расширение особенно актуально, когда вы работаете с React, так как JSX позволяет писать HTML-подобный синтаксис внутри JavaScript (или TypeScript).

Пример .tsx файла:

// file.tsx
import React from 'react';

interface GreetingProps {
    name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
    return <h1>Hello, {name}!</h1>;
}

export default Greeting;

В этом примере мы создаем React-компонент, использующий JSX для рендеринга заголовка. Обратите внимание, что мы используем интерфейс GreetingProps для определения типа пропсов компонента.

Когда использовать .ts и когда .tsx

• Используйте .ts, если ваш файл не содержит JSX и предназначен для выполнения обычного кода TypeScript.
• Используйте .tsx, если ваш файл включает JSX и вы работаете с компонентами React.

Заключение

Понимание различий между .ts и .tsx важно для эффективной работы с TypeScript и React. Выбор правильного расширения файла поможет избежать проблем с компиляцией и обеспечит правильную работу кода. Так что, когда вы начинаете новый проект на React, не забудьте использовать .tsx для файлов, содержащих компоненты и JSX.