[TS] React Snippets of TypeScript
Create React App
$ npx create-react-app typescript-react-sandbox --template typescript
Functional Component
JSX
使用 interface 定義 Props:
interface FooProps {
bar: string;
children: React.ReactNode;
}
const Foo = (props: FooProps) => {
const { bar, children } = props;
return (
<div>
<span>{bar}</span>
{children}
</div>
);
};
直接搭配物件的解構賦值:
// Object
export default function Post({
postData,
}: {
postData: {
title: string;
date: string;
contentHtml: string;
};
}) {
// ...
}