typescript 如何构造实用程序类

kcrjzv8t  于 2023-01-14  发布在  TypeScript
关注(0)|答案(6)|浏览(205)

我有几个实用函数。什么是最好的方法来打包这些,然后导入它们?
这就是我正在努力做的:

import * as util from './util'

export class myClass{
     constructor()
     {
           util.doSomething("test");
     }
}

然后在课堂上:

export class Util{
    doSomething(val: string){ return val;}

    doSomethingElse(val: string){ return val;}
}

我从VS得到的错误消息是:
Property doSomething does not exist on type util.

ct3nt3jp

ct3nt3jp1#

如果创建一个包含以下内容的文件utils.ts

export default class Utils {
    static doSomething(val: string) { return val; }
    static doSomethingElse(val: string) { return val; }
}

那么您可以像这样简化您的客户端代码:

import Utils from './utils'

export class MyClass {
     constructor()
     {
         Utils.doSomething("test");
     }
}
cfh9epnr

cfh9epnr2#

这里有几个问题:
1.您没有示例化任何东西,doSomething是一个示例方法
1.当您执行import * as util时,util表示模块,而不是其中的对象。
如果你想要Util,你应该导入:

import { Util } from './util'

接下来,在最后调用Util上的方法之前,应该示例化Util

var u = new Util();
u.doSomething("test");

下面是您的代码修补:

import { Util } from './util'

export class MyClass{
     constructor()
     {
         var u = new Util();
         u.doSomething("test");
     }
}

尽管如此,你使用utils的方式似乎有些奇怪,这完全是我个人的看法,但我不会在构造函数中调用“做一些事情”的方法,也就是说,会引起副作用。
另外,Util中的方法看起来并不需要在该类中,因为类没有它们所依赖的状态,你总是可以从模块中导出常规函数,如果你这样编写utils模块:

export function doSomething(val: string) { return val; }

export function doSomethingElse(val: string) { return val; }

您可以直接导出函数,从而避免示例化的麻烦,实际上您的原始代码可以按原样正常工作。

1szpjjfi

1szpjjfi3#

替代方法:
1.导出utils.ts文件中的常量:

export const doSomething = (val: string): any => {
  return val;
};

export const doSomethingElse = (val: string): any => {
  return val;
};

1.在主*.ts文件中导入并使用此方法:

import { doSomething, doSomethingElse } from './util';
...
let value1 = doSomething('abc');
let value2 = doSomethingElse ('efg');
nzkunb0c

nzkunb0c4#

或者,您可以将is导出为对象文本:

export const Util = {
    doSomething(val: string){ return val;},
    doSomethingElse(val: string{ return val;}
}
mitkmikd

mitkmikd5#

您还可以创建一个util.ts类,该类具有要导出的函数

export const formatDateOfBirth = 
(dob: string) : string => `${dob.substring(0, 4)}-${dob.substring(4, 6)}-${dob.substring(6, 8)}`;

现在您可以导入如下方法,共享文件夹结构为srcappshared,我在srcappshelfshelf.component.ts文件中调用此导入

import { formatDateOfBirth } from '../shared/utils/util';
public getFormattedDate(dob: string):string{
  return formatDateOfBirth(dob);
}
vyswwuz2

vyswwuz26#

我想我找到了最好的方法,那就是灵活,适合所有情况。
首先,实用函数应该独立导出,而不需要将它们 Package 在一个类中。这使得树摇动可以与文件的导出一起工作。
utils.ts

export function helper() { 
  console.log('help is provided') 
}

如果你想要树的可摇动性,并且不关心模仿utils函数(如果编写正确,在大多数情况下你不会这样做),那么你可以直接导入和使用这些函数。
但是,如果你想模拟一些组件,你仍然可以这样做。对于Angular ,你应该做以下事情:
tokens.ts

import * as utils from 'utils.ts';
export const utilsToken = new InjectionToken<typeof utils>('UtilsToken')

app.module.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';
@NgModule({
    providers: [{ provide: utilsToken, useValue: utils }]
})

设置好这个之后,你就可以把你的utils注入到任何组件中,而不是直接使用它们:
component.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';

@Component({
})
export class Component {
constructor(@Inject(utilsToken) private _utils: typeof utils) {
  this._utils.helper();
}

component.spec.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';

...
await TestBed.configureTestingModule({
     providers: [{ provide: utilsToken, useValue: mockUtils }],
}).compileComponents(),

然后你可以直接在一些组件中使用你的utils,并将它们注入到其他组件中(需要模拟的utils版本进行测试)

相关问题