模板文字类型：超出最大调用堆栈大小答案

【问题标题】：Template Literal Type: Maximum call stack size exceeded模板文字类型：超出最大调用堆栈大小
【发布时间】：2021-09-19 02:39:39
【问题描述】：

我收到以下错误：

ERROR in RangeError: Maximum call stack size exceeded
    at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43)
    at getBaseConstraintOfType (/project/node_modules/typescript/lib/typescript.js:53242:34)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:37)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)
    at getTypeFacts (/project/node_modules/typescript/lib/typescript.js:62711:24)

我在global.d.ts中有以下内容：

declare type UserId = `${number}`;
declare interface DevEnvironment {
  dev?: {
    user?: {
      userId?: UserId;
    }
  }
}

在上面的界面中，如果我把userId?: UserId改成userId?: string，那么上面的错误就消失了。我想是因为这个template literal bug。

但是，我是这样使用上面的；在这里，我正在我的开发环境中构建我的环境文件：

let dev = {};
try {
  // The below file may or may not exists depending on the environment
  dev = require('./environment.local').dev;
} catch (e) { }

export const environment = Object.assign({}, {
  // Main environment variables
}, {dev: dev || {}} as DevEnvironment);

然后我在服务中使用它：

@Injectable({ providedIn: 'root' })
export class User {
  get userId(): UserId {
    const defaultValue = (environment.dev?.user?.userId || '000000000') as UserId;
  }
}

我知道该问题已在较新版本的 typescript 中得到解决，但由于使用了 Angular 11 cli，我们仍然坚持使用 4.1.5，如下所示：

$ npm i typescript@^4.2.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: @angular/compiler-cli@11.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^11.2.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.3
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   @angular-devkit/build-angular@">=0.1000.0 < 0.1100.0" from @angular-builders/custom-webpack@10.0.1
npm ERR!   node_modules/@angular-builders/custom-webpack
npm ERR!     dev @angular-builders/custom-webpack@"^10.0.1" from the root project
npm ERR!   dev @angular-devkit/build-angular@"^0.1002.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/rnaddy/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rnaddy/.npm/_logs/2021-07-08T15_28_45_346Z-debug.log

我可以做些什么来使用我最初想使用的语法吗？

【问题讨论】：

标签： javascript node.js angular typescript npm

【解决方案1】：

这是一个internal Typescript 错误，对我来说，生产有效，但开发无效。

按照建议更新打字稿，即使输出不完全相同也是同样的问题。

我不知道哪个版本实际上可以工作，我最终得到了 4.x.x 它并神奇地按预期工作。

【讨论】：