我在list-full-names.ts里有一个功能模块:

export default function listFullNames(namesList) {
    let fullNames: string[] = namesList.map(item => {
        return `${item.first} ${item.last}`;
    });
    
    return fullNames;
}

和一个文件,该文件导入该函数并向其传递对象数组:

import listFullNames from './list-full-names';

interface NameProps {
    first: string;
    last: string;
}

const names: NameProps[] = [
    {first: 'John', last: 'Smith'},
    {first: 'Jane', last: 'Doe'},
    {first: 'David', last: 'Bowie'}
];

let fullNames = listFullNames(names);

TypeScrip在list-full-names.ts上抛出错误,因为它不知道namesList是什么类型.我知道我可以将NameProps接口放在一个单独的文件中,然后将其导入到list-full-names.ts,但将类型定义与它所描述的数据分开感觉很奇怪.我也不喜欢在每个接受names数组作为可能属性的文件中导入接口.

对于这类事情,有没有最佳实践?建议的处理方式是什么?

推荐答案

我不认为有one-size fits all%的方法,每个人都有自己的 Select ,有些方法可能不适用于所有项目.所以这要看情况了.

这是我的观点.

首先,如果你有一个不打算到处传递的类型,比如一个带有字符串联合参数类型的导出函数.

type MyType = 'good' | 'bad';
export function isGoodType(type: MyType) {
  return type === 'good';
}

在这种情况下,定义MyType是最好的 Select ,因为实际上没有必要将其导出.

第二种情况更像您的示例,其中您有一个要传递给其他文件的类型.在这里将类型放在哪里实际上取决于您,但理想情况下,您应该将依赖类型放在一起.比如...

export interface NameProps {
  first: string;
  last: string;
}
export interface Response {
  data: NameProps[]
}

在您的例子中,这意味着您需要将NameProps类型导入到list-full-names.ts文件中.您甚至可以使用type import来指定类型,而不会意外地创建循环依赖.

// list-full-names.ts
import type { NameProps } from './names';

export default function listFullNames(namesList: NameProps[]) {
  let fullNames: string[] = namesList.map((item) => {
    return `${item.first} ${item.last}`;
  });

  return fullNames;
}

请参见codesandbox示例

但是,当我有许多类型需要定义时,这些类型可能相互依赖,也可能不依赖,我通常会在使用它的位置附近创建一个types.ts文件,然后简单地将其导入到我需要的任何位置.这个types.ts文件有点像类型的index.ts.您还可以采用像names.types.ts这样的文件命名模式.请参见codesandbox示例.

以下是其他一些 idea :

Typescript相关问答推荐

我可以让Typescript根据已区分的联合键缩小对象值类型吗?

当类型断言函数返回假时,TypScript正在推断从不类型

typescribe不能使用值来索引对象类型,该对象类型满足具有该值的另一个类型'

将值添加到具有不同类型的对象的元素

如果请求是流,如何等待所有响应块(Axios)

将对象属性转换为InstanceType或原样的强类型方法

更新为Angular 17后的可选链运算符&?&问题

具有泛型类型和缺省值的键

为什么在这个例子中,我把缺少的属性添加到对象中时,TypeScrip没有拾取,如何修复?

如何消除在Next.js中使用Reaction上下文的延迟?

如何在react组件中使用doctype和html标签?

如何在已知基类的任何子类上使用`extends`?

如何在NX工作区项目.json中设置类似angular.json的两个项目构建配置?

如何从MAT-FORM-FIELD-MAT-SELECT中移除焦点?

复选框Angular 在Ngfor中的其他块中重复

是否可以强制静态方法将同一类型的对象返回其自己的类?

如何创建内部和外部组件都作为props 传入的包装器组件?

如何正确地将元组表格输入到对象数组实用函数(如ZIP)中,避免在TypeScrip 5.2.2中合并所有值

基于属性值的条件类型

在Typescript 中,是否有一种方法来定义一个类型,其中该类型是字符串子集的所有可能组合?