Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I am facing a problem that I cannot resolve. I want to share some interfaces and types between my class files.

My repo is something like this :

-> dist/ -> src/ -> index.ts -> .babelrc -> .eslintrc.js -> index.d.ts -> package.json -> tsconfig.json

In index.d.ts :

declare module test { // I've try with 'declare namespace test' but the result is the same
  export interface LabeledValue {
    label: string;
    size: number;

If I import LabeledValue in index.ts I get an error and I don't understand the reason: import { LabeledValue} from 'test'; // TS2307: Cannot find module 'test'.

src/index.ts

import {LabeledValue} from 'test';
function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

package.json:

"name": "test", "types": "index.d.ts", "version": "1.0.0", "description": "test", "author": "oyabi", "license": "MIT", "private": true, "scripts": { "type-check": "tsc --noEmit", "type-check:watch": "yarn type-check --watch", "build": "npm run build:types && npm run build:js", "build:types": "tsc --emitDeclarationOnly", "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --source-maps inline" "dependencies": { "axios": "^0.19.0", "body-parser": "^1.18.3", "express": "^4.16.4", "helmet": "^3.21.2", "morgan": "^1.9.1", "winston": "^3.1.0" "devDependencies": { "@babel/cli": "^7.7.0", "@babel/core": "^7.7.2", "@babel/plugin-syntax-class-properties": "^7.0.0", "@babel/polyfill": "^7.7.0", "@babel/preset-env": "^7.7.1", "@babel/preset-typescript": "^7.7.2", "@babel/runtime": "^7.7.2", "@types/express": "^4.17.2", "@types/helmet": "^0.0.45", "@types/morgan": "^1.7.36", "@types/qrcode": "^1.3.4", "@typescript-eslint/eslint-plugin": "^2.7.0", "@typescript-eslint/parser": "^2.7.0", "apidoc": "^0.18.0", "babel-core": "^7.0.0-bridge", "babel-eslint": "^10.0.1", "babel-jest": "^24.8.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-preset-airbnb": "^4.2.0", "babel-preset-env": "^1.7.0", "eslint": "^6.6.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-config-prettier": "^6.5.0", "eslint-friendly-formatter": "^4.0.1", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^23.0.4", "eslint-plugin-prettier": "^3.1.0", "jest": "^24.8.0", "moxios": "^0.4.0", "nodemon": "^1.19.4", "prettier": "^1.19.1", "retire": "^2.0.1", "supertest": "^4.0.2", "typescript": "^3.7.2", "uuid": "^3.3.2"

.babelrc

"presets": ["@babel/typescript", ["airbnb", { "useBuiltIns": "usage" "plugins": [ "syntax-class-properties", "transform-class-properties"

.eslintrc

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    project: "./tsconfig.json"
  env: {
    node: true,
    jest: true
  extends: [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:jest/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  plugins: ["@typescript-eslint", "jest", "import"],
  rules: {
    "import/no-commonjs": "error",
    "import/no-amd": "error",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "no-underscore-dangle": 0,
    "prettier/prettier": [
        printWidth: 80,
        singleQuote: true,
        trailingComma: "all"
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"]

tsconfig.json

"compilerOptions": { "target": "esnext", "module": "commonjs", "declaration": true, "outDir": "./dist", "strict": true, "noImplicitAny": true, "strictNullChecks": true, "noImplicitThis": true, "esModuleInterop": true, "resolveJsonModule": true "include": ["index.d.ts"]

My real code is more complicated but you have a good idea of the problem. The error appears in Visual Studio Code and with yarn build (with real code). With this code you can use yarn tsc src/index.ts to show error.

Do you have any idea how I can solve this problem please?

Therefore you need to have an ES module (not namespace/module keywords which are TypeScript modules).

Your index.d.ts should look like:

  export interface LabeledValue {
    label: string;
    size: number;

A root level export makes the file an ES module and now your ES import will work.

Even with this trick, the error is always present. What's the difference with ES module and typescript module ? – Oyabi Nov 15, 2019 at 18:58

I had Visual Studio Code reporting ts(2307) on my own module from a test file. The problem was my test files were compiled using a file named tsconfig.misc.json; that worked for my VSCode typechecking and linting EXCEPT for this one issue. When I renamed it to tsconfig.json in the test subdirectory of the project, it worked.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.