Typescript 3 project reference with third party li

问题:

I am using Typescript and am trying to build a background sync with service worker. Someone suggested I should do 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.

First, I want to acknowledge I might fundamentally misuse project reference so please have mercy on me, kind people on the internet.

so right now my project structure looks like this:

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

In src/tsconfig.json, I use lib dom because it I need that for non service worker code:

{
    "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": [

    ]
}

the tsconfig.base.json that src/tsconfig.json is referring:

{

    "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 in the root:

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

My theory is that scr/tsconfig will reference and extend tsconfig.base.json and hence the code inside ./src will be able to use --lib "dom." However, when I tried to compile, this error occurred:

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

I can solve this error by adding lib dom in tsconfig.json in the root, but then I don't want the code in srcWebworker to use it since it conflicts with lib webworker

I tried tsc --build and it returns

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'.

Side note: I used this boilerplate to create my project so I don't have to deal with webpacking, but I am okay with ejecting if that is necessary.

Thanks :=)

回答1:

Try changing the lib setting in ./srcWebworker/tsconfig.json to ["es6", "webworker", "esnext"]. AsyncIterator is defined in esnext.

回答2:

Try answer #1 here. That plus adding

    "lib": ["es2017", "esnext", "esnext.asynciterable"]

to my tsconfig.json did it for me.