I am facing a problem that I cannot resolve. I want to share somes interfaces and types between my classes files.
My repo is something like this :
test
-> 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've got 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": [
2,
{
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 appear 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?
The "Cannot find module or its corresponding type declarations" error occurs when TypeScript cannot locate a third-party or local module in our project. To solve the error, make sure to install the module and try setting moduleResolution to node in your tsconfig. json file.
In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).
To solve the error "Cannot find module '@angular/core'", make sure you have installed all dependencies by running the npm install command, set the baseUrl option to src in your tsconfig. json file and restart your IDE and development server. Copied!
I resolve my problem with the installation of eslint-import-resolver-typescript and the default configuration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With