I have case where two files with same name but different custom extensions, for example in react native i have :
CompA.android.tsx
CompA.ios.tsx
and i want to import like this import CompA from './CompA' but i got error from typescript says: "Cannot find module './CompA' or its corresponding type declarations.".
I tried to add something in tsconfig, like this
"paths": {
"*":["src/*","*.android.tsx","*.ios.tsx"],
},
but did not work
So is there any configs i can add to make my case works?
Related
I am new to Typescript. Currently I am trying to use TypeScript in an electron app(just practice TypeScript).
In my app I need to import a "type" and a "variable/class" in to my app from electron package, but currently I am doing it this way:
import { dialog } from 'electron';
import type { BrowserWindowConstructorOptions } from 'electron';
Is there a way I can make it one line while still clearly show what I am importing(a "type" or a "variable/class")?
I know that I can do something like this:
import { dialog ,BrowserWindowConstructorOptions } from 'electron';
but with above code, it's not clear what I am importing, it's hard to tell if the "dialog" I am importing is a type or a variable.
To specify type for selected imports, you may use type keyword before the imported name:
import { dialog, type BrowserWindowConstructorOptions } from 'electron';
This is documented under Modules > Importing Types section in TypeScript docs.
Yes, you can import both a type and a variable in one line using the following syntax
import { dialog, BrowserWindowConstructorOptions as type } from 'electron';
This way, you can clearly distinguish between the imported dialog variable and the imported BrowserWindowConstructorOptions type. The as keyword allows you to give an alias to the imported type, in this case type.
I have a typescript file in which there are some functions for validating objects of different classes. So, I have to import those classes into the ts file. For instance,
import { UserDetail } from "../../entity/user/userDetail";
The following block of code depicts a function which is used for validating the objects of the mentioned class.
export function validateSignUpData(userDetail:UserDetail):Array<String>{
let errorMessages = new Array<String>();
/* Some Code */
As you can see the imported class has been used as the function's input type. Now the problem is that it seems we are not allowed to use both import and module.exports simultaneously! Therefore, I am not able to use require in order to get the mentioned function in the Node server file.
When I add the following block of code to my ts file, the following exception is thrown!
module.exports = validateSignUpData;
TypeError: Cannot assign to read only property 'exports' of object '# object'
Question: How can I use all import, modules.export, and export in the same ts file?
I will be glad if someone can help me with the situation.
Thank You
Of course you're able to import that function with require. Just do it like this:
const {validateSignUpData} = require('./my-module.js')
And pay attention to require the compiled javascript file, not the typescript file. They may be in different folders, depending on your build setup.
I have imported both pixi and pixi-filters like so:
import 'pixi.js';
import 'pixi-filters';
However, after running the code:
const outlineFilterRed = new PIXI.filters.GlowFilter(15, 2, 1, 0xff9999, 0.5);
Following error is thrown:
Property 'GlowFilter' does not exist on type 'typeof filters'.
What am I doing wrong?
P.S
I'm following this example: https://pixijs.github.io/examples/#/filters/outline-filter.js
Seems like every filter needs to be imported individually, like it's written in the GlowFilter's README.md on Github.
Install:
npm install #pixi/filter-glow
Import:
import { GlowFilter } from '#pixi/filter-glow';
According to the definitions file, the GlowFilter (And other filters) do not exit. And according to the original js library they should exist.
This simply means that the definitions files are out-dated.
You have two options:
Add a local definitions to the PIXI.filters.
Create a PR to the definitions repository. (BEST)
I have a component that has 2 different designs based on the platform for React-Native: MyComponent.ios.tsx and MyComponent.android.tsx.
Although when I import my component into MyView.tsx, it complains.
MyView.tsx(5,38): error TS2307: Cannot find module './MyComponent'.
I have tried to modify my tsconfig file paths to the following:
"paths": {
"*": ["*", "*.ios", "*.android"]
},
Although I still have the same problem.
Does any of you know how to resolve this problem?
Thanks
Basically this approach won't work for one reason, once your ts files are transpiled, the relative path is not there anymore for the compiler to add ".ios" or ".android" and stop complaining, so the output will not work on react-native side when reading the pure JS.
I got it working by creating a typings (MyComponent.d.ts) file in the same folder, ex:
// This file exists for two purposes:
// 1. Ensure that both ios and android files present identical types to importers.
// 2. Allow consumers to import the module as if typescript understood react-native suffixes.
import DefaultIos from './MyComponent.ios';
import * as ios from './MyComponent.ios';
import DefaultAndroid from './MyComponent.android';
import * as android from './MyComponent.android';
declare var _test: typeof ios;
declare var _test: typeof android;
declare var _testDefault: typeof DefaultIos;
declare var _testDefault: typeof DefaultAndroid;
export * from './MyComponent.ios';
Since TypeScript 4.7 there is now a new option to handle this for react native, but also web
{
"compilerOptions": {
"moduleSuffixes": [".android", ".ios", ""]
}
}
You can read more about it here:
https://www.typescriptlang.org/tsconfig#moduleSuffixes
I downloaded the angular starter and ran the app and it ran well. Now I Added a new file "people.service.ts" located in "src/app/services/people.service.ts".
When I try to import it, I get an error:
Module not found: Error: Can't resolve 'services/people.service' in
'/path-to-project/angular-starter-master/src/app'
This is the code I use to import it (in src/app/app.module.ts):
import {PeopleService} from 'services/people.service';
I'm sure that there's no typos because the IDE recognizes it. There isn't any TypeScript error in the entire project. The file 'services/people.service' does contain a class named PeopleService.
Any help will be profoundly appreciated. Please let me know if you need any additional information.
The problem is that you're using absolute path instead of a relative path. Change the import to the following:
import {PeopleService} from './services/people.service';
TypeScript 2.0+
In TypeScript 2.0 you can add a baseUrl property in tsconfig.json:
{
"compilerOptions": {
"baseUrl": "."
// etc...
},
// etc...
}
Then you can import everything as if you were in the base directory:
import {PeopleService} from 'services/people.service';
On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
Which would allow you to import it from anywhere like so:
import {PeopleService} from 'services/people.service';
From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.
You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.
OR
You can directly change the absolute path to relative path like this:
import {PeopleService} from './services/people.service';