带有第三方库的 Typescript 3 项目引用(来自 npm)

Question

我正在使用 Typescript 并尝试与服务 worker 建立后台同步。有人建议我应该做 this:

You can split your project into multiple parts with separate tsconfig.json files: one part that includes the dom lib and one part that includes the webworker lib. You can make another part for common code that doesn't depend on either library. You can use project references to help automate the build. If this doesn't fully solve the problem, please update the question to describe the outstanding issues.

首先，我想承认我可能会从根本上滥用项目引用，所以请怜悯我，互联网上的好心人。

所以现在我的项目结构是这样的:

root:
├── node_modules
│   └── [..... all the packages]
├── src
│   ├── tsconfig.json
│   └── [other source files]
├── srcWebWorker
│   └── tsconfig.json
├── structure.txt
├── tsconfig.base.json
└── tsconfig.json

在 src/tsconfig.json 中，我使用 lib dom，因为我需要它用于非服务 worker 代码:

{
    "extends": "../tsconfig.base",
    "compilerOptions": {
        "lib": [ "es6", "dom", "esnext"], // ** notice I use "dom" here
    }, 
}

./srcWebworker/tsconfig.json:

{
    "extends": "../tsconfig.base",
    "compilerOptions": {
        // "outFile": "../built/local/tsc.js",
        "lib": [ "webworker" ],
    },
    "files": [

    ],
    "references": [

    ]
}

src/tsconfig.json 引用的 tsconfig.base.json:

{

    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "build/dist",
        "module": "esnext",
        "target": "es6",
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "./src",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true
    }, 
    "exclude": [
        "node_modules",
        "build",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts"
    ]
}

根目录中的 tsconfig.json:

{
    "files": [],
    "include": [],  
    "composite": true,
    "references": [
        { "path": "./src" }
    ]
}

我的理论是 scr/tsconfig 将引用并扩展 tsconfig.base.json，因此 ./src 中的代码将能够使用 --lib “dom”。但是，当我尝试编译时，出现了这个错误:

/Users/shunxuhuang/Projects/hemera/mainapp/node_modules/@types/graphql/subscription/subscribe.d.ts (17,12): Cannot find name 'AsyncIterator'.

我可以通过在根的 tsconfig.json 中添加 lib dom 来解决这个错误，但是我不想让 srcWebworker 中的代码使用它，因为它与 lib webworker 冲突

我尝试了 tsc --build 并返回了

node_modules/@types/react-dom/index.d.ts(19,72): error TS2304: Cannot find name 'Text'.
node_modules/popper.js/index.d.ts(93,13): error TS2304: Cannot find name 'CSSStyleDeclaration'.
node_modules/popper.js/index.d.ts(94,18): error TS2304: Cannot find name 'CSSStyleDeclaration'.
node_modules/popper.js/index.d.ts(122,30): error TS2304: Cannot find name 'ClientRect'.

旁注: 我用了this boilerplate创建我的项目，这样我就不必处理 webpacking，但如果有必要，我可以弹出。

谢谢 :=)

Answer 1

尝试将 ./srcWebworker/tsconfig.json 中的 lib 设置更改为 ["es6", "webworker", "esnext"]。 AsyncIterator 在 esnext 中定义。