代码之家 › 专栏 › 技术社区 › Ivan Yurchenko

如何导入angular/typescript中的泛型?

abstract-class generics typescript angular javascript

Ivan Yurchenko · 技术社区 · 3 年前

太长,读不下去了 :如何正确导入angular中的抽象类和/或泛型?

我正在尝试创建一个通用的Angular组件,然后从中继承常用组件。我成功地创建了一个通用服务和一个通用组件,但当我尝试导入这些TS中的任何一个时,都会出错。

// Other imports above

// This imports FINE:
import {DtoBase} from "src/app/modules/shared/dto-base";    
// This throws an ERROR:
// import {GenericService} from "src/app/modules/shared/generic.service";

@Component({
  selector: 'app-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent {
    ...

generic.service.ts:

@Injectable({
  providedIn: 'root'
})
export class GenericService<T extends DtoBase> {
    ...

当我尝试取消注释 import {GenericService} 它抛出了一个带有完全奇怪的错误语句的巨大错误(我将在下面附上完整的错误)。我假设我应该以某种方式从我的共享模块导出此服务,但它不允许我这样做,因为它是一个抽象类,无法实例化。如果我尝试为GenericService或GenericComponent添加导出,则会出现以下错误:

Class GenericComponent is neither an Angular component nor directive nor pipe 
TS2322: Type 'typeof GenericComponent' is not assignable to type 'any[] | Type<any>'. Â Â 
Type 'typeof GenericComponent' is not assignable to type 'Type<any>'.

无法将抽象构造函数类型分配给非抽象构造函数类型。

generic.component.ts(它不应该是一个组件,因为它是一个基本抽象类,如果我试图将它变成一个组件会出错)

@Injectable()
export abstract class GenericComponent<T extends DtoBase, TService extends GenericService<T>>
  implements OnInit, OnDestroy {

如果我尝试取消注释,则会收到整个错误消息 导入{GenericService} 在里面 items.component.ts (此错误没有意义):

Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:10 - error TS2305: Module '"@angular/compiler-cli/src/ngtsc/diagnost
ics/src/error_code"' has no exported member 'COMPILER_ERRORS_WITH_GUIDES'.

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:39 - error TS2305: Module '"@angular/compiler-cli/src/ngtsc/diagnost
ics/src/error_code"' has no exported member 'ERROR_DETAILS_PAGE_BASE_URL'.

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:79 - error TS2724: '"@angular/compiler-cli/src/ngtsc/diagnostics/src
/error_code"' has no exported member named 'ngErrorCode'. Did you mean 'ErrorCode'?

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
                                                                                 ~~~~~~~~~~~

  node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/src/error_code.d.ts:12:21
    12 export declare enum ErrorCode {
                           ~~~~~~~~~
    'ErrorCode' is declared here.


Error: node_modules/@angular/compiler-cli/src/transformers/program.d.ts:9:23 - error TS7016: Could not find a declaration file for module 'path'.
'D:/Work/repos/viddy.ui/node_modules/path/path.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/path` if it exists or add a new declaration (.d.ts) file containing `declare module 'path';`

9 import * as path from 'path';
                        ~~~~~~

感谢所有提前提供帮助的人。

0 回复 | 直到 3 年前