import js script in TypeScript - javascript

I need to import a javascript lib into my project without .d.ts files (for some reason it doesn't have), while sadly I cannot use 'import' or 'require' at the same time (the ts poject structure is old but cannot upgrade).Is there still any solution?The tsconfig.json may like the following:
{
"compilerOptions": {
"target": "ES5",
"module": "amd",
"skipLibCheck": true,
"lib": [
"DOM",
"ES2015"
],
"allowJs": true,
"checkJs": false,
"outFile": "./out/js/bundle.js"
},
"exclude": [
"node_modules"
],
"include": [
"./lib/lib.js",
"./src/**/*.ts"
]
}

Related

Typescript error TS5055 when importing js file into ts

I want to mix .js and .ts files in the same project, but there is an error (TS5055) that i want to fix, which appears when the project is compiled with tsc, although the output is fine.
here is a tsconfig.json
{
"compilerOptions": {
"target": "es2022",
"module": "ES2022",
"allowJs": true,
"lib": [
"es2022",
"DOM"
],
"removeComments": true
},
"files": [
"./index.ts"
]
}
and here is example ts file:
import { lib } from "./lib/impotr.js"
console.log(["imported", lib.hello("friend")]);
typescript compiler gives this error:
PS D:\WHY> tsc -p .
error TS5055: Cannot write file 'D:/WHY/lib/impotr.js' \
because it would overwrite input file.
How to fix it in tsconfig?
full example img
It seems you didn't specify an outDir.
Take a look at this:
{
"compilerOptions": {
"target": "es2022",
"module": "ES2022",
"allowJs": true,
"outDir": "build",
"lib": [
"es2022",
"DOM"
],
"removeComments": true
},
"files": [
"./index.ts"
]
}
If the error is still present after this, it is recommended to set allowJs to false

How to exclude files from being processed by tsc?

How do you stop tsc from processing a Javascript file required by another?
I want to run full checks on my main index.js, but it requires() a generated.js Javascript file created by emcc, which is perfectly fine, but doesn't pass a lot of tsc's checks.
I tried adding the file to my exclude list in my tsconfig.json, like:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"dom",
"webworker"
],
"allowJs": true,
"checkJs": true,
"outDir": "./dist",
"noImplicitAny": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"index.js"
],
"exclude": [
"generated.js"
]
}
but that had no effect. When I run tsc --build tsconfig.json I get a tone of errors from generated.js.
The tsconfig.json file looks for typescript files by default, while you are providing it .js files. you can change the file extensions from .js to .ts to let typescript look after them. so your tsconfig.json file may end up looking like this:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"lib": [
"dom",
"webworker"
],
"allowJs": true,
"checkJs": true,
"outDir": "./dist",
"noImplicitAny": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"index.ts"
],
"exclude": [
"node_modules",
"generated.ts"
]
}

Typescript export named default of module

I have just converted my React project from javascript to typescript, and I have many instances where I'll have an index file in a directory and export all the functions/components from the respective directory. For example, the directory might look like this:
components
|--index.js
|--ComponentA
|--ComponentB
|--ComponentC
|...
And index.js would contain:
export ComponentA from './ComponentA'
export ComponentB from './ComponentB'
export ComponentC from './ComponentC'
...
Which I believe babel converts to:
export { default as ComponentA } from './ComponentA'
...
I've converted all .js/.jsx files to .ts/.tsx and I'm using webpack with babel-loader to compile these files. Everyting runs just fine, but I get eslint errors in my editor because typescript doesn't understand these exports. Here's my tsconfig.json file:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "es6",
"target": "es6",
"jsx": "preserve",
"lib": ["es5", "es6", "dom"],
"esModuleInterop": true,
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": [
"./src/**/*"
],
"types": [
"#reachify/graphql-schema"
],
"awesomeTypescriptLoaderOptions": {
"reportFiles": [
"./src/**/*"
]
}
}
And .eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"browser": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
},
"plugins": [
"#typescript-eslint/eslint-plugin"
]
}
How can I get typescript to understand export Component from './Component?
As mentioned in the comments, it looks like this is still a stage 1 feature and not yet implemented in Typescript.

Ionic3 Highcharts-More import Error --JsAllow Not Set

I try to import Highcharts-more like this:
import Highmore from '../../node_modules/highcharts/highcharts-more';
then im getting the following Error:
Module '../../node_modules/highcharts/highcharts-more' was resolved to 'C:/Users/.../node_modules/highcharts/highcharts-more.js', but '--allowJs' is not set.
So I go into my tsconfig.json and add allowJs to my settings:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
After that Im getting a new Error:
Cannot write file 'C:/Users/../node_modules/highcharts/highcharts-more.js' because it would overwrite input file.
I need highcharts-more in my whole Project and I couldnt find another way to import it. Please help
Use the same syntax as it's shown in this doc (Typescript section): https://www.npmjs.com/package/highcharts
The example is done for the exporting module - highcharts-more module should be imported analogically.

ts-jest cannot run testing on imported ES6 modules

I'm using a compiled ES6 library in my Typescript application. The testing fails with an error
TypeError: Cannot read property 'PropTypes' of undefined
The module it is complaining about is importing react as
import React from 'react';
If I change this to
import * as React from 'react';
then it will compile and run fine. Here is my package.json's jest config:
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json"
],
"verbose": true,
}
And here is my tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"preserveConstEnums": true,
"removeComments": true,
"noImplicitAny": false,
"moduleResolution": "node",
"noUnusedParameters": true
},
"include": [
"./src/**/*"
],
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/index.d.ts"
]
}
What configuration have I messed up here?
then it will compile and run fine.
That is the way to go for TypeScript. import * as React from "react".

Categories