react(ts)如何给一个组件编写.d.ts类型声明文件

Question

业务背景

ts虽好,但是写多了也有点烦.特别是在业务代码里面藕合了太多类型信息,反而使代码看上去特别杂乱

就想着能不能把类型声明单独给抽离出去,像使用一些第3方库一样

示例代码

• 最开始用ts的时候,全部把类型写在业务代码里面,类似于下面这样

组件文件user.tsx

export default class Index extends React.Component {
 // 下面7行代码是类型声明的,污染了业务代码,看上去很累
 state: {
   userInfo: {
     name: string,
     age: number,
     gender: boolean,
   },
   typeList: Array<string>,
 } = {
   userInfo: Object(),
   typeList: [],
 }

• 后面的改进写法

全局的类型声明文件global.d.ts

interface IUserState {
 userInfo: {
   name: string,
   age: number,
   gender: boolean,
 }, 
 typeList: Array<string>,
}

修改后的组件文件user.tsx

export default class Index extends React.Component {
 // 现在看上去要简单很多了,7行类型定义变成了一行
 state: IUserState = {
   userInfo: Object(),
   typeList: [],
 }

但是上面的方法没有解决根本问题

• 如果变量或函数增多,代码看上去还是很乱
• 集中在一个或多个变量声明文件.d.ts里面写类型,类目变大后,类型声明文件本身看上去也比较乱了

export default class Index extends React.Component {
 state: IUserState = {
   userInfo: Object(),
   typeList: [],
 }
 prop2: IProp2 = xxx2;
 prop3: IProp3 = xxx3;
 prop4: IProp4 = xxx4;
 prop5: IProp5 = xxx5;

我的问题

我的想法是,类型声明文件完全提到单独一个文件里面写,组件user.tsx里面不写任何ts相关的类型,就像我们引用第3方包一样

并且是一个组件文件对应一个类型声明文件
比如

• user.tsx 对应 user.d.ts
• order.tsx 对应 order.d.ts

就是官方文档介绍的这种方式https://www.typescriptlang.or...

大概像下面这样

组件文件user.tsx

export default class Index extends React.Component {
 state = {
   userInfo: Object(),
   typeList: [],
 }
 prop2 = xxx2;
 prop3 = xxx3;
 prop4 = xxx4;
 prop5 = xxx5;

类型声明文件user.d.ts

export class User {
 state: {
   userInfo: {
     name: string,
     age: number,
     gender: boolean,
   }, 
 },
 typeList: Array<string>,
},
prop2: string;
prop3: number;
prop4: boolean;
prop5: string | number | boolean;

主要还是英语太差了.官方文档关于类型定义那一块的文档看了两遍了,都没有完全明白.....

Answer 1

在index.d.ts中定义了类型，那么在用的时候是需要引入的（但在有的情况下可以自动识别引入）。我之前写过一个组件，定义过d.ts的声明文件。

https://github.com/neroneroff...

在用到类型的时候我需要从这里引入

import { coolPlayerTypes } from '../index'
...

const CoolPlayer = (props: coolPlayerTypes.IPlayerProps) => {
    ...
    const [ lyric, setLyric ] = useState<coolPlayerTypes.ILyric[]>([])
    ...
}