在TypeScript中,.ts
和.tsx
文件扩展名代表两种不同的文件类型:
-
.ts
:这是一个标准的TypeScript文件,它可以包含TypeScript代码,该代码最终会被编译成JavaScript。.ts
文件通常不包含JSX代码,JSX是一种JavaScript的语法扩展,允许你在JavaScript代码中写类似HTML的标记。 -
.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环境中执行。