Angular：使用行为主体＆lt; this＆gt;在基础上，将typof子类分配给基本类型
我有一个非常奇怪的问题：我的代码在Stypescript严格模式下运行，但不会以角度编译。罪魁祸首似乎是caping> ubibject＆lt; this＆gt;，其他通用打字字段不会引起问题。
这是代码：
class SomeGeneric<T> {}
class BaseClass {
/* comment or uncomment the line below */
public thisSubject$: BehaviorSubject<this | null> | undefined;
public thisPromise: Promise<this> | undefined;
public thisSome = new SomeGeneric<this>();
}
class ExtClass extends BaseClass {
public anotherField: number = 0;
}
function takesCtor(ctor: typeof BaseClass) {
console.log(ctor);
}
takesCtor(ExtClass);
将此代码放入Angular Project的源时的错误消息（在最后一行，我尝试将子类构造函数传递到期望基类构造函数的函数）：
Argument of type 'typeof ExtClass' is not assignable to parameter of type 'typeof BaseClass'.
Construct signature return types 'ExtClass' and 'BaseClass' are incompatible.
The types of 'thisSubject$' are incompatible between these types.
Type 'BehaviorSubject<ExtClass | null> | undefined' is not assignable to type 'BehaviorSubject<BaseClass | null> | undefined'.
Type 'BehaviorSubject<ExtClass | null>' is not assignable to type 'BehaviorSubject<BaseClass | null>'.
Types of property 'observers' are incompatible.
Type 'Observer<ExtClass | null>[]' is not assignable to type 'Observer<BaseClass | null>[]'.
Type 'Observer<ExtClass | null>' is not assignable to type 'Observer<BaseClass | null>'.
Type 'BaseClass | null' is not assignable to type 'ExtClass | null'.
摘录摘自tsconfig.json。
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"module": "ES2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2020",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true
}
这是一个最小的普通打字稿项目的stackblitz，没有问题： https://stackblitz.com/editt/edit/typescript/typescript-dufytr?file= index。 ts
我的问题是
我如何获得此代码 - 在平面字体中编译 - 以角度编译？什么角包可能会导致错误？由于它发生在一个项目中，但不在另一个项目中，所以我认为它是一个软件包。或角度编译器选项。有什么想法在哪里看？
I have a very strange issue: I have code that runs in typescript strict mode, but won't compile in Angular. The culprit seems to be BehaviorSubject<this>, other generic typed fields don't cause issues.
Here's the code:
class SomeGeneric<T> {}
class BaseClass {
/* comment or uncomment the line below */
public thisSubject$: BehaviorSubject<this | null> | undefined;
public thisPromise: Promise<this> | undefined;
public thisSome = new SomeGeneric<this>();
}
class ExtClass extends BaseClass {
public anotherField: number = 0;
}
function takesCtor(ctor: typeof BaseClass) {
console.log(ctor);
}
takesCtor(ExtClass);
The error message when this code is put into an Angular project's source (occurring at last line, where I try to pass the child class constructor to a function that expects the base class constructor):
Argument of type 'typeof ExtClass' is not assignable to parameter of type 'typeof BaseClass'.
Construct signature return types 'ExtClass' and 'BaseClass' are incompatible.
The types of 'thisSubject
And the excerpt from tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"module": "ES2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2020",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"sourceMap": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true
}
Here's a StackBlitz of a minimal Angular app having the issue:
https://stackblitz.com/edit/angular-ivy-gmsfuf?file=src/main.ts
And here's a StackBlitz of a minimal plain TypeScript project not having the issue:
https://stackblitz.com/edit/typescript-dufytr?file=index.ts
My question is
How do I get this code - that compiles in plain TypeScript - to compile in Angular? What Angular package could cause the error? Since it happens in one project but not in the other, I assume it's a package. Or an Angular compiler option. Any ideas where to look at?
are incompatible between these types.
Type 'BehaviorSubject<ExtClass | null> | undefined' is not assignable to type 'BehaviorSubject<BaseClass | null> | undefined'.
Type 'BehaviorSubject<ExtClass | null>' is not assignable to type 'BehaviorSubject<BaseClass | null>'.
Types of property 'observers' are incompatible.
Type 'Observer<ExtClass | null>[]' is not assignable to type 'Observer<BaseClass | null>[]'.
Type 'Observer<ExtClass | null>' is not assignable to type 'Observer<BaseClass | null>'.
Type 'BaseClass | null' is not assignable to type 'ExtClass | null'.
And the excerpt from tsconfig.json
Here's a StackBlitz of a minimal Angular app having the issue:
https://stackblitz.com/edit/angular-ivy-gmsfuf?file=src/main.ts
And here's a StackBlitz of a minimal plain TypeScript project not having the issue:
https://stackblitz.com/edit/typescript-dufytr?file=index.ts
My question is
How do I get this code - that compiles in plain TypeScript - to compile in Angular? What Angular package could cause the error? Since it happens in one project but not in the other, I assume it's a package. Or an Angular compiler option. Any ideas where to look at?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您切勿将
此用作类型。考虑明确指定类型。这是您的示例的叉子，一切都在 https://stackblitz.com/edit/angular-ivy-ntrewa?file=src%2fmain.ts，src%2fapp%2fapp com.ponent.ts.ts.ts
You should never use
thisas a type. Consider specifying the type explicitly.Here's the fork of your example where everything works https://stackblitz.com/edit/angular-ivy-ntrewa?file=src%2Fmain.ts,src%2Fapp%2Fapp.component.ts