directory-named-typescript-plugin

This plugin allows using directory name module import.

If you adapt directory-named-webpack-plugin with TypeScript, you head TS2307: Cannot find module error. This plugin fix those problem.

Install

npm install directory-named-typescript-plugin

Then, configure plugin at tsconfig.json.

{
  "compilerOptions": {
    "plugins": [{
      "name": "directory-named-typescript-plugin"
    }]
  }
}

Additionally, if you use VSCode, you should use the workspace typescript version (see more) or change VSCode setting like this:

{
  ...
  "typescript.tsserver.pluginPaths": [
    "directory-named-typescript-plugin"
  ]
}

Apply for transpile

The plugin doesn't change transpiled bundle file. (because TypeScript could support only Language Service plugin what related to editor intellisense.) When you wanna influence bundled file, you can choice a solution below.

1. Install directory-named-webpack-plugin together if you use Webpack.
2. Install ts-patch, and Apply { "transform": "directory-named-typescript-plugin/dist/transformer.js", "transformProgram": true } transformer predefined.

Example

• As-is

  import FooComponent from 'src/components/Foo/Foo.tsx'

• To-be

  import FooComponent from 'src/components/Foo'

Inspired by

• directory-named-webpack-plugin
• ts-patch