TypeScript新手指南：何时使用.ts，何时转向.tsx？

在TypeScript中，.ts和.tsx文件扩展名代表两种不同的文件类型：

1. .ts：这是一个标准的TypeScript文件，它可以包含TypeScript代码，该代码最终会被编译成JavaScript。.ts文件通常不包含JSX代码，JSX是一种JavaScript的语法扩展，允许你在JavaScript代码中写类似HTML的标记。

2. .tsx：这是一个包含JSX语法的TypeScript文件。.tsx扩展名用于告诉TypeScript编译器文件中可能包含JSX元素，因此编译器需要特别处理这些元素。在React项目中，当你要在组件中使用JSX编写UI元素时，你通常会使用.tsx文件扩展名。

总结一下，如果你的TypeScript代码中包含JSX，你应该使用.tsx作为文件扩展名；如果你的代码不包含JSX，就使用.ts文件扩展名。这样做有助于TypeScript编译器正确地处理和编译你的代码。

举个例子：

• 如果你在编写一个React组件，你可能会这样写并保存为.tsx文件：

import React from 'react';

const MyComponent: React.FC = () => {
  return (
    <div>
      Hello, TypeScript with JSX!
    </div>
  );
};

export default MyComponent;

• 而如果你在编写不涉及JSX的TypeScript代码，比如一个工具函数，你会保存为.ts文件：

function sum(a: number, b: number): number {
  return a + b;
}

export default sum;

最终，不论是.ts还是.tsx文件，它们都会被TypeScript编译器编译成.js（JavaScript）文件，以便在浏览器或其他JavaScript环境中执行。