10

In a standard create-react-app configuration, there’s a third-party component that I can import when needed:

import { Button } from '@mui/material'

// […]
<Button variant="|"></Button>

The library is fully-typed, so hitting Ctrl+Space in VSCode when the cursor is at | will show me a list of possible string variants that I can use. I could add another variant by creating a local component that wraps the @mui/material/Button:

// LocalComponent.js
import React from 'react'
import { Button } from '@mui/material'

// Do something to actually add a variant called `new`.

export const LocalComponent = React.forwardRef((props, ref) => {
  return (
    <Button ref={ref} {...props}>
      {props.children}
    </Button>
  )
})
// LocalComponent.d.ts
import type { ButtonProps } from '@mui/material'

interface Props extends ButtonProps {
  /** @default 'text' */
  variant?: 'text' | 'outlined' | 'contained' | 'new'
}

export declare function LocalComponent(props: Props): React.FunctionComponent

If I import LocalComponent, I can get intellisense for the new variant, as well as the original Button’s props. The library also has a feature that allows me to create new variants without having to wrap the library’s components, but I’m having problems with intellisense when I use it—even though the new variant is implemented, I see only the original variants. The library exposes an interface specifically for module augmentation, so I should be doing something like this:

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    new: true;
  }
}

ButtonPropsVariantOverrides is supposed to be merged with the variant property of the interface that defines all props for the Button, essentially turning it into variant?: 'text' | 'outlined' | 'contained' | 'new', but it seems that TypeScript doesn’t see this module augmentation. I tried the following setup:

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "typeRoots": [
      "./src/types", "node_modules/@types"
    ]
  },
  "include": ["src"]
}

Not sure if typeRoots does anything in jsconfig—it’s not listed as an available option of compilerOptions, but since jsconfig is almost tsconfig, I tried it anyway.

.
├── src/
│   └── types/
│       └── @mui/
│           └── material/
│               └── Button/
│                   └── index.d.ts // Contains the module augmentation from above.
└── jsconfig.json

As well as this one:

.
├── src/
│   └── types/
│       └── index.d.ts // Contains the module augmentation from above.
└── jsonfig.json

I also made sure to restart the TS server every time I changed something. Where to put module augmentations in general? Is there anything wrong with how I set up jsconfig.json? Here’s a CodeSandbox of what I’ve just described.

Thank you for your time.

2

2 Answers 2

2

It seems that when a file with module augmentation doesn’t have import/export statements, you’re defining an ambient module—a shape that does not have an implementation—that you have to import manually where needed. To augment a module and make it globally available, the declaration file should have an import or export statement.

What’s bizarre is that the only thing that matters is for the declaration file to be a module with at least one import/export statement, which could be absolutely anything—if I’m augmenting @mui/material/Button, I don’t have to import '@mui/material/Button' specifically, I could write some useless arbitrary export, like export default true, and TypeScript would recognize the file anyway.

I did a quick test on CodeSandbox to see if the same applies to TypeScript projects—it seemingly does. It worked on CodeSandbox without the typeRoots property in tsconfig.json, but add it in case of problems.

Where to put module augmentations in general? Is there anything wrong with how I set up jsconfig.json?

Module augmentation can be in any folder you like, but that directory (or its ancestor) should be in the jsconfig’s include property, and if its ancestor has already been added to include, there’s no need to list the directory with types separately. Although unnecessary, you might want to separate augmented packages into folders containing index.d.ts—do not name the declaration files differently, or TypeScript will ignore them. Using my question as an example, one option is to put the module augmentation into ./src/types/@mui/Button/index.d.ts. Lastly, the typeRoots property, indeed, does nothing when added to jsconfig.json, so there’s no need to use it.

1
  • adding the import on top helped: import Button from '@mui/material/Button'. Thanks Commented Dec 24, 2021 at 10:59
-1

is better if you use tsconfig.json

if you use tsconfig and JSDoc example

your code can look like that

there are some properties of the tsconfig.json that we need to focus on. and the must important is baseUrl it is used for

Base directory to resolve non-absolute module names.

so take express for example

import express from "express";

with baseUrl we tell typescript where to look for them express types the tsc will prefix the imports paths like so

import express from "./node_modules/express";

per say... I choose express for a reason because quite often there are packages which does not includes them types, but there is a huge community that can have done them for us, to use them we need to import them separately

$ npm i -D @types/express

there will be some times in which you'll need to override them types to do so you need to let tsc where to look for them overrides with paths to do it properly you need to create a dir at the root of yow project with name types

project
--node_modules
--src
--types
--tsconfig.json

something important to mention is that inside of your types dir you need to create a dir with the same identifier as the one used in the import statement to keep with our example it will look like this

project
--node_modules
--src
--types
----express
------index.d.ts
--tsconfig.json

and its proper file needs to be call index.d.ts

lets add a new property to the request method of express userIp the new property will refer to the client ip address so it needs to be a string and it needs to be inside the req property so let's override it

/**
 * Creates an Express application. The express() function is a top-level function exported by the express module.
 */
declare function e (): core.Express;

declare namespace e {
    interface Request<P = EnetoParams, ResBody = any, ReqBody = any, ReqQuery = core.Query> extends core.Request<P, ResBody, ReqBody, ReqQuery> {
        /** ip del usuario que solicito la peticion */
        userIp: string;
    }
}
export = e;

now tell tsc where to find it. paths is used for it

{
   "compilerOptions": {
      "baseUrl":"./node_modules",
      "paths": {
         "express":["./@types/express/index.d.ts","../types/express/index.d.ts"]
      }
   }
}

the format is

"paths": {
   "name used in the import statement":[
      "path to the original definitions",
      "path to the override",
       "if any other exists"
   ]
}

if you do not want to do it for all them changes and stuff you can use wild cards

"paths": {
      "*": ["./*/index.d.ts", "./*/types.d.ts", "./*/types", "./@types/index.d.ts","./@types/types.d.ts"]
    } 

we start them paths with ./ because our baseUrl is ./node_modules now tell the tsc where to find our own types or definitions

{
  // baseUrl is ./node_modues thats why we need to get out of that dir and get inside types dir
  "typeRoots": ["../types/index.d.ts"]
}

the index.d.ts

declare module "my-package-name" {
  interface SomeObj {
     prop1: string;
     prop2: string;
  }

}

the way of using it in your code like so

import { SomeObj } from "my-package-name";

const myVar: SomeObj = {};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.