// 示例: TypeScript JSX 和 React
import React from 'react';
// 定义一个简单的组件
interface GreetingProps {
name: string;
}
const Greeting: React.FC<GreetingProps> = ({ name }) => {
return <div>Hello, {name}!</div>;
};
// 在应用中使用组件
const App: React.FC = () => {
return (
<div>
<h1>Welcome to TypeScript JSX</h1>
<Greeting name="John" />
</div>
);
};
export default App;
在这个例子中,我们使用了 JSX 语法来创建组件(Greeting)以及在 App 组件中使用这个子组件。请注意,在 TypeScript 中,你可以使用泛型 React.FC 来定义函数组件的类型,以及通过接口来定义组件的属性。
TypeScript 支持 JSX 的类型检查,这意味着你可以在编译时捕获一些常见的错误。如果你在 JSX 中使用的属性不存在或者类型不匹配,TypeScript 将会发出相应的类型错误。
如果你在 TypeScript 项目中使用 JSX,通常你需要确保文件的扩展名是 .tsx,以便 TypeScript 知道这个文件中可能包含 JSX 代码。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4710/TypeScript