"VS Code is failing to detect the types from the GitHub repository that I have

  • There is a repository called Shared that I share.
  • Another repository, known as Consumer, consumes the shared repository.

Within the Shared repository, I have defined some typings and code that I want to utilize in Consumer.

The structure of the Shared repo includes files such as:

<Shared repo>/
├─ types/
│  ├─ User.ts
├─ models/
   ├─ UserModel.ts

For example, the User.ts file may look something like this:

export interface User {
  id: number;
}

I do not intend to publish the Shared repo as an npm module.

Instead, I opt to install it directly from its GitHub URL into my Consumer repo by executing:

npm install https://github.com/user/shared#main

In the package.json file of my Consumer repo, the dependency declaration will appear similar to this:

dependencies: {
  ...
  "shared": "github:user/shared#main"
  ...
}

However, when attempting to use the User type, my vscode does not provide suggestions for imports from the Shared repo. How can I configure vscode to recognize these types?

Answer №1

Shoutout to @User for guiding me on the importance of adhering to the guidelines for publishing types

Here's a breakdown:

  1. I structured my development code in the src folder and built code in the build folder using tsc

  2. The contents of tsconfig.json are as follows:

{
  /* Visit https://aka.ms/tsconfig to read more about this file */
  "compilerOptions": {

    /* Language and Environment */
    "target": "es5",
    "lib": ["es6"],
    "experimentalDecorators": true,

    /* Modules */
    "module": "commonjs",
    "moduleResolution": "node",
    "baseUrl": "./src",
    "rootDir": "./src",
    "types": ["node"],
    "resolveJsonModule": true,
    "declaration": true,

    /* JavaScript Support */
    "allowJs": true,

    /* Emit */
    "sourceMap": true,
    "outDir": "build",
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "useUnknownInCatchVariables": false
  },
  "ts-node": {
    "files": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
  1. The package.json must define the following values:
{
  ...
  "main": "build/index.js",
  "types": "build/index.d.ts",
  ...
}
  1. I utilized the ctix module for automatically generating an index file with exports.

In the project's root directory, I included a .ctic file with the specified content:

 // common configuration
  // tsconfig.json path: you must pass path with filename, like this "./tsconfig.json"
  "project": "./tsconfig.json",

  // create, single command configuration
  // add ctix comment at first line of creted index.ts file, that remark created from ctix
  "useSemicolon": true,

  // timestamp write on ctix comment right-side, only works in useComment option set true
  "useTimestamp": false,

  // add ctix comment at first line of creted index.ts file, that remark created from ctix
  "useComment": true,

  // quote mark " or '
  "quote": "'",

  // overwrite index.ts file also index.ts file already exist that create backup file
  "overwrite": true,

  // keep file extension in export statement path
  "keepFileExt": false,
  
  // only create command configuration
  // If set true this option, skip empty directory
  "skipEmptyDir": true,

  // only single command configuration
  // Output directory. It works only single mode.
  "output": "./src",

  // Use rootDir or rootDirs configuration in tsconfig.json.
  "useRootDir": false,

  // only remove command configuration
  // remove with backup file
  "includeBackup": true
}

Included in package.json is the script:

{
   ...
   "scripts": {
     ...
     "build": "ctix single && npm run clean && tsc --build",
     "clean": "rm -fr build",
     ...
   }
  ...
}
  1. To apply these changes, execute npm run build Subsequently, commit and push your code to git along with the build folder

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

What is the best way to incorporate node_module during the iOS build process in Ionic 2?

Looking to implement an autosize module for automatic resizing of an ion-textarea. Module: Following the installation instructions, I tested it in the browser (ionic serve) and on my iPhone (ionic build ios => run with xcode). Browser: The module wor ...

Troubleshooting React Native in VS Code using Node shims

I recently started working on a React Native project using the Ignite CLI 2.0.0 default boilerplate, and I find myself in need of some dependencies from node-based packages. To address this, I created files named transformers.js, babel-transform.js, and r ...

Oops! An error occurred: Uncaught promise in TypeError - Unable to map property 'map' as it is undefined

Encountering an error specifically when attempting to return a value from the catch block. Wondering if there is a mistake in the approach. Why is it not possible to return an observable from catch? .ts getMyTopic() { return this.topicSer.getMyTopi ...

Exploring the TypeScript handbook: Utilizing rootDirs for Virtual Directories

Exploring the concept of Virtual Directories with rootDirs in the handbook, we find an interesting example demonstrating how modules can be imported from different source folders by combining multiple rootDirs. // File Structure src └── views ...

Customize the datepicker locale in Valor

Currently, I am working with Angular2 and typescript alongside the Valor datepicker. Unfortunately, the datepicker does not have the necessary locale built-in. After some research, I discovered that the essential JavaScript file containing the locale infor ...

Verify that the user's input falls within a specified range before adding it to the result

Currently, I'm trying to implement validation on user input. The idea is that if a user enters a number between 1 and 10, I want to add a 0 in front of it. For example, if the user inputs 4, I would like to store the value 04. While I am comfortable d ...

Navigating to a new link containing query parameters

I am working on setting up a redirect in Angular 6 The process for the redirect is quite simple as outlined below: Obtain destination URL from parameters: this.returnUrl = this.route.snapshot.queryParams['route'] || '/'; Perform Red ...

What is the best ECMAScript version to select for implementing the TypeScript compiler in an Electron application?

In my Electron 5.0.6 project, I currently have es3 as the default target in my tsconfig.json file. However, I received an error message indicating that I need to upgrade to at least es6 to utilize getter/setter functionality in TypeScript. I am now contem ...

Identifying Gmail line breaks in the clipboard using Angular

I'm currently working on a feature that allows users to paste content from Gmail into a field and detect line breaks. The field doesn't have to be a text area, I just need to identify the line breaks. However, there seems to be an issue with det ...

The specified type 'ReturnType' mandates one type argument. Error code: ts(2314)

After transitioning from Flow to Typescript, I have encountered errors while converting some of the codebase. Most of the issues have been resolved using the Utility-Types package, but I am stuck with the code below without any helpful documentation or ans ...

What is the process for specifying the type for the createApp(App) function in Vue.js 3?

I'm currently working with Vue3 and Firebase using TypeScript. // main.ts import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store f ...

Angular 10 - Compilation errors caused by the element's location

When running 'ng serve' or 'ng build' in Angular 10, I encountered a build error that stated: ERROR in projects/project-navigator/src/app/modals/building-permissions.component.html:89:61 - error NG8002: Can't bind to 'ngClass& ...

I prefer not to run the next.js SWR until after the initial rendering

Development Setup ・ next.js ・ typescript ・ swr This uses swr for communication purposes. I am looking to only trigger it when the query value changes. However, it is also being executed during the initial rendering. How can I prevent it ...

Saving three different forms with just a single submission using Angular 10

Trying to simultaneously save 3 forms of an angular stepper, where the products (secondFormGroup) and values(thirdFormGroup) may contain multiple rows. The API model is structured as follows: { "product": [ { "description": ...

Angular's import and export functions are essential features that allow modules

Currently, I am working on a complex Angular project that consists of multiple components. One specific scenario involves an exported `const` object in a .ts file which is then imported into two separate components. export const topology = { "topolo ...

Deciphering an encrypted password with Crypto-js displays an incorrect outcome

I have implemented a register and login feature in my auth.ts file, which I am currently testing using Postman. The library I am utilizing is crypto-js, which I have used in Node.js before, but this is my first time using TypeScript. I have installed @type ...

What is the reason that the combination type of two interfaces that expand a generic interface cannot be used for that generic interface?

Within my codebase, I've established a straightforward generic interface W. Extending this interface are two more interfaces - T and N, each adding a property type that can be utilized in a tagged union scenario: interface W<V> { value: V } ...

The compatibility of return value types between the constructor signature and the call signature interface is not maintained when they are used together

I'm new to TypeScript and I'm struggling to figure out why I'm getting a type error in the code below. Can someone help me identify what's wrong? interface CallOrConstruct { new (value: string): Person (value: number): number } cla ...

Is it possible for me to use ts files just like I use js files in the same manner?

So I recently stumbled upon TypeScript and found it intriguing, especially since I enjoy adding annotations in my code. The only downside is that I would have to change all my .js files to .ts files in order to fully utilize TypeScript's capabilities. ...

The MetadataRoute.Sitemap in NextJs is missing a definition for alternates

The issue at hand My current task involves generating a sitemap with hreflang links for different languages. Following the guidelines provided in the NextJs documentation (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap#generat ...