Creating TypeScript Projects Within Other TypeScript Projects

I am currently working with Typescript, React, and Vite for my project.

This is how I have structured my project. I keep a tsconfig.json file at the root level, and a separate public/tsconfig.worker.json specifically for my public/serviceWorker.ts file.

.
├── tsconfig.json
├── src/
│   └── constants/config.ts
└── public/
    ├── serviceWorker.ts
    └── tsconfig.worker.json

Within my public/serviceWorker.ts file, I import a variable from src/constants/config.ts.

// public/serviceWorker.ts

import Variable from "../src/constants/config";

An error arises in the import statement as follows:

File '<path>/src/constants/config.ts' is not listed within the file list of project '<path>/public/tsconfig.worker.json'. Projects must list all files or use an 'include' pattern.

Here are snippets from my tsconfigs.

// root tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    // ...
  },
  "include": ["src", "svg.d.ts", "public/serviceWorker.ts"],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./public/tsconfig.worker.json" }
  ]
}


// public/tsconfig.worker.json

{
  "compilerOptions": {
    "rootDir": "../",
    "composite": true,
    "module": "es2022",
    "noEmit": false,
    "moduleResolution": "bundler",
    "lib": ["WebWorker", "ES2022"],
  }
}

Although I can successfully build using (

"build": "tsc && vite build"
), the output includes both serviceWorker.ts and tsconfig.worker.json files like so:

.
└── dist/
    ├── assets/
    ├── serviceWorker.ts
    └── tsconfig.worker.json
typescriptvite

Answer №1

The organization of your project appears to be a bit convoluted. It seems like you are trying to construct the entire project starting from the root, assuming that tsconfig.json will be applied to the src directory and that it will combine with public/tsconfig.worker.json for the public/serviceWorker.ts file. However, during the build process, public/tsconfig.worker.json is being applied independently to public/serviceWorker.ts, separate from tsconfig.json, resulting in it not recognizing the 

{ "include": "public/serviceWorker.ts" }
. I suggest adding 
{ "include": "serviceWorker.ts" }
to the public/tsconfig.worker.json and removing 
{ "include": "public/serviceWorker.ts" }
from the root tsconfig.json.

Regarding the dist folder, this aligns with the default behavior of Vite. The public directory is intended for static assets that do not require compilation, so you might want to consider relocating your serviceWorker.ts elsewhere. Placing it in the src directory could be beneficial since it appears that you are compiling it anyway, indicating that it is not strictly a static asset. Vite has built-in capabilities to manage worker files.

In essence, I recommend consolidating both tsconfigs into one and moving serviceWorker.ts to the src folder, for example, src/workers/serviceWorker.ts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A method in TypeScript for defining a type as a combination of interfaces within a union, specified as [one of union of interfaces] & {//attributes}

// Here's a way to define types in TypeScript: interface SudoA { foo: string; } interface SudoB { bar: string; } type Sudo = SudoA | SudoB; type SuperSudo = Sudo & { super: boolean; } const baz: SuperSudo = { } // TypeScript (3. ...

javascripttypescript

How come code suggestion works flawlessly on Stackblitz, yet fails to function in Intellij?

Check out this GitHub repository for a simple way to reproduce the issue: https://github.com/tmtron/mathjs-typescript-types Successful Code Completion in Stackblitz Everything works perfectly when you open the project in Stackblitz: https://i.stack.imgur ...

typescriptintellij-ideacode-completionmathjs

Ensuring that an object literal in TypeScript has matching key-value pairs

Can TypeScript validate that a const object literal has keys that are equal to their values? For example: // Success const testIds: KeyEqualsValue = { foo: 'foo' } as const // Failure const testIds: KeyEqualsValue = { foo: 'bar' ...

typescript

I'd like some clarification on the code that dynamically adds routes using Typescript and Node Express. Can someone please

Running my API server with node/typescript and express / express validator, I came across this code that I found really useful for separating route logic: function createCustomRouter(route: Array<CustomRouteEntry>): Router { const customRouter = R ...

node.jstypescriptexpressrouter

modify text label once checkbox is selected in angular

After following the steps in this tutorial on dynamic checkboxes in Angular, I successfully created dynamic checkboxes. Now, I'm facing an issue where I need to change the text label only after a checkbox is checked. I haven't been able to figure ...

angulartypescriptngforangular-ng-if

How can I add Leaflet.TextPath or Leaflet.PolylineDecorator to an Angular 6 CLI application?

Struggling to integrate https://github.com/makinacorpus/Leaflet.TextPath into my Angular 6 CLI application without any luck. Any guidance would be greatly appreciated. Thank you in advance. UPDATE: Alternatively, what about this one? https://github.com/bb ...

javascriptangulartypescriptleafletangular-cli

An error should not be thrown if the object is potentially 'undefined', as there is a filter in place from rxjs

During my service refactoring process, I encountered a frustrating issue. The API I am working with returns an object with various optional properties. To work with these properties, I need to check if they are undefined or not using an if statement, other ...

angulartypescriptrxjseslintlint

assign a random name to the "attribute" of any object

I recently started using TypeScript and I have a question about the syntax. I came across some code that defines a parameter like this: { [property: string]: any} I'm a bit confused because I understand that the parameter should be an object and its ...

javascripttypescript

Multiple conditions in TypeScript resulting in a function output

I am working on developing a function that can return different types based on its parameters. Similar to the function below, but I want it to be more streamlined and efficient (using generics without union types as results) type ResultType = { get: Get ...

javascripttypescript

Underscore Typing in the Style of Scala

Just for kicks, I started tinkering with creating a Scala-inspired underscore in typescript. I aim to simplify writing code by replacing .map(x => x.myProp) with just .map(_.myProp). The logic behind this is quite simple using Proxies, but the challenge ...

typescripttypescript-generics

Angular 2: Module with Dependency Conditions on '@angular/forms'

I have been working on creating a unique Angular 2 component known as a captcha form field, using RC5. My goal is to make this component self-sufficient so that users do not need to include @angular/forms if they are not utilizing it. Here is a snippet of ...

angulartypescriptmoduleangular2-directivesangular2-forms

Using enums in templates - The statement will constantly evaluate to 'true' because the categories of 'RequestStatus.Done' and 'RequestStatus.Rejected' do not intersect at all

My HTML code is in this format, and I want to check the value to display a different form based on certain conditions. I have set up the condition in my HTML like this: requestStatus = RequestStatus; <ng-container *ngIf=" (model.lastStat ...

javascriptangulartypescript

Why doesn't DataView or Int32Array interpret underlying bytes as individual integers instead of groups?

I am interested in extracting integers from a byte buffer and accessing them by their specific index. For example, retrieving i[0] would yield the integer value represented by the initial four bytes of the buffer, while i[1] would provide the integer value ...

javascriptnode.jstypescript

Using a click event to target the next div and apply a CSS class using Typescript

I am trying to create a Typescript function that will locate the next div and apply a CSS class to it. Here is what I have attempted: <ul> <li><a href="#" onclick="toggle()">Item 1</a></li> <div class="content hide ...

javascripttypescript

Tips for resolving the <!--bindings={ "ng-reflect-ng-for-of": "" }--> bug

Just starting out with Angular and I am having some issues with event binding and property binding in my game-control component. I have a button that, when clicked, adds numbers to an array using setInterval method. I am also passing data between compone ...

javascripthtmltypescriptangular6

How come my ts-mockito spy isn't delegating method calls properly?

In my code, I have a class named MyPresenter which has a method called doOperation(). This method calls another method on a View class that implements an interface and is passed in as a parameter. Below you can find the implementation of the class, interfa ...

typescriptspyts-mockito

Column Chart by Highchart

UniqueLevels = [Level 0, Level 1, Level 2] Sample Input = [{name:"Level 0",data:[{name: "Job A",y: 0.26},{name: "Job B",y: 0.36}]}, {name:"Level 1",data:[{name: "Job C",y: 0.96},{name: "Job D",y: ...

javascripttypescripthighchartsdata-bindingconsole.log

Tips for implementing conditional styling (using else if) in a react component

Currently, while iterating through a list of header names, I am attempting to change the CSS style of a react component based on three different conditions. I have managed to make it work for one condition, but I am facing challenges when trying to impleme ...

javascriptreactjstypescriptmaterial-ui

The error occurred when trying to assign a value to a property 'id' that is not defined

Currently in my Angular 7 project, I am working on posting a request to the server. The data is being collected from an Angular reactive form and needs to follow a specific structure. { "title" : "Test Title", "user": ...

jsonangulartypescriptangular-reactive-forms

Cannot assign an array of Typescript type Never[] to an array of objects

Creating an object array can sometimes lead to errors, let's take a look at an example: objectExample[a].push({ id: john, detail: true }); objectExample[a].push({ id: james, detail: false}); const objectExample = { a = [ { id: john, detail: true} ...

typescript