*.directive.spec.ts 中的错误 TS2554

Posted 2023-02-22

【中文标题】*.directive.spec.ts 中的错误 TS2554

【英文标题】：Error TS2554 in *.directive.spec.ts

【发布时间】：2018-12-31 19:11:32

【问题描述】：

我第一次运行“ng test”并得到这个错误：

src/app/_directives/head-title.directive.spec.ts(5,23) 中的错误：错误 TS2554：预期 2 个参数，但得到 0。

由于 spec.ts 文件是由 Angular 自动生成的，我不知道该怎么办......

这是我的指令：

import  Directive, ElementRef, AfterContentInit   from '@angular/core';
import  Title  from '@angular/platform-browser';

@Directive(
  selector: '[edHeadTitle]'
)

export class HeadTitleDirective implements AfterContentInit

  constructor(private el: ElementRef,private titleService: Title) 

  ngAfterContentInit()
    this.titleService.setTitle(this.el.nativeElement.innerhtml);
  

这是对应的spec.ts：

import  HeadTitleDirective  from './head-title.directive';

describe('HeadTitleDirective', () => 
  it('should create an instance', () => 
    const directive = new HeadTitleDirective();
    expect(directive).toBeTruthy();
  );
);

显然有问题的部分是“new HeadTitleDirective()”...我想应该有一些参数，但是哪些以及如何？

来自 package.json 的版本信息：

"devDependencies": 
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.6",
    "@angular/language-service": "^6.0.6",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  

【参考方案1】：

这是基本编码。

这是你的班级签名：

constructor(private el: ElementRef,private titleService: Title) 

这里是你如何创建它：

const directive = new HeadTitleDirective();

你在那里使用这个问题吗？

要解决它，只需创建依赖项的模拟。

let elRefMock = 
  nativeElement: document.createElement('div')
;

let serviceMock = 
  setTitle: (title: string) => null
;

const directive = new HeadTitleDirective(elRefMock, serviceMock);

【讨论】：

是的...我看到了这个问题。我需要添加一些论点。但我不知道该写什么...我对 Angular 6 还很陌生，以前从未编辑过任何规范文件，因为它们是自动生成的...

它们是为了您的方便而生成的，如果您不编辑它们，它们就像它们不存在一样有用。我用一段代码更新了我的答案以解决您的问题，但请考虑阅读文档中有关测试的指南。

谢谢 :-) ...虽然有一个问题... serviceMock 在某种程度上是无效的。我得到： 'setTitle: (title:string) => any; 类型的参数' 不可分配给“标题”类型的参数。类型“setTitle: (title: string) => any;”中缺少属性“_doc”。

new HeadTitleDirective(elRefMock; serviceMock as Title) 应该更正您的问题。你是从 Typescript 开始的吗？

很好……好多了。 elRefMock 之后的分号也必须是逗号......至少这是 Visual Studio Code 告诉我的。太感谢了。我看到我有很多阅读要做。从 AngularJS 1.x 到 Angular 6.x 是一段漫长的旅程。是的，Typescript 对我来说也是新的。但情况正在好转。我的项目正在使用 simpel 动画、带有 xliffmerge 的 ngx-translate、api 通信等等......到目前为止非常有趣：-D

【参考方案2】：

我也不完全理解为什么会发生这个错误，但它可以通过在你的 specs.ts 中将指令类型直接设置为指令 const 来工作

import  HeadTitleDirective  from './head-title.directive';

describe('HeadTitleDirective', () => 
  it('should create an instance', () => 
    const directive = HeadTitleDirective;
    expect(directive).toBeTruthy();
  );
);