react的ts最佳实践问题

Question

interface IProps = {
    ...
};

export default const Component = (props: IProps)=>{
    return <div />
}

一般的组件都是这样定义Props类型，或者State类型，但是这种类型定义和组件个人认为可以完全分开，写成下面这样

// interface.ts
export interface IProps{

}

// componet.tsx
import {IProps} from './interface.ts';

export default const Component = (props: IProps)=>{
    return <div />
}

请问如果项目中所有的组件都这么定义，比如上百个组件，请问会因为多了一个引用，而引起打包的性能问题吗？比如打包时间过长？

Answer 1

没有专门测试过，但我估摸着你只是导入了一个类型申明，编译的时候会忽略掉。

大多数情况下，组件需要的参数是不一样的，所以没必要把这个单独写个文件，就3-10行的内容多个文件，还只被你这一个文件引用，却搞的文件树非常长。

如果是共通的类型需求，完全可以写自定义的泛型。

我个人表示不理解。

Answer 2

ts的目的是增加可读性和规范开发，由此导致的打包时间增加是可以理解也是可以接受的。反正打包结果的运行效率一样。
至于你说的单独文件只是一个方式问题而已，完全是看项目需要。很多时候我声明的类型都不带export，因为外部用不到。