我有react代码
export default class MyComponent extends Component<Props,State>
问题是，我应该写像 atype还是 an 之类的propsinterface？
type Props = {
isActive: Boolean,
onClick: Function
}
或者
interface Props {
isActive: Boolean,
onClick: Function
}
另外，当我不使用typescript，而是使用经典的 webpack+babel 设置时，有什么问题？
或者，这对我来说很重要吗？
现在是 2020 年，type在几乎所有使用Reactprops的情况下，我都会赞成（此处为通用类型与界面帖子）。只能用类型别名表示的常见情况：
// given some props from another comp that are to be altered
type ExternalProps = { a: string; b: { c: number } };
type Props_IndexType = ExternalProps["b"]; // { c: number; }
type Props_MappedType = { [K in keyof ExternalProps]: number }; // { a: number; b: number; }
type Props_DiscriminatedUnionType = { tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean}
type Props_typeOf = { foo: string } & typeof defaultProps; // see class comp example
// conditional types - ok, this one is a bit contrived, but you get the point
type Props_ConditionalType<T> = T extends true ? { a: string } : { b: number };
const Comp = <T extends {}>(props: Props_ConditionalType<T>) =>
<div>{"a" in props && (props as any).a}</div>
render(<Comp<true> a="foo" />, document.getElementById("root"));
用于说明的类组件示例（OP 提到了它们，但上述情况也适用于 Hook）：
// cannot do that with interfaces
type Props = ({ tag: "tag1"; foo: string } | { tag: "tag2"; foo: boolean }) &
typeof defaultProps;
type State = typeof initState;
const defaultProps = { a: "A" };
const initState = { c: "C" };
class App extends React.Component<Props, State> {
static readonly defaultProps = defaultProps;
state = initState;
render() { ... }
}
render(<App tag="tag1" foo="foo" />, document.getElementById("root"));
唯一的情况，我会考虑接口：
接口比相应的类型声明更强大一点，但对于一组reactprops，它可能无关紧要。您可以在此问题中了解类型和接口之间的差异。
由于您不太可能扩展该接口或在其他地方扩充它，因此使用其中任何一个都可能没问题。但我会说接口通常更适合定义对象类型，因为它们更灵活一些。