I'm trying to use a type declaration file. When using triple slash reference like so:
/// <reference path="../declarations.d.ts" />
The app builds fine, but I get the above eslint error: "Do not use a triple slash reference for ../declarations.d.ts, use import style instead(https://typescript-eslint.io/rules/triple-slash-reference/)
If I do use an import:
import "../declarations.d.ts"
The build fails and the declarations file is being ignored.
I also tried to use tsconfig.json to add the file, but that also failed (I'm using NX environment, probably there's some bug with NX)
So only the reference syntax is working, but then I get that es-lint error. Does anyone know how to fix this?
My custom declaration file:
import '#types/my-react-package';
declare module '#types/my-react-package' {
export interface PackageProps {
showPreview?: boolean;
}
}
Related
I am unable to import xml file in tsx file, but in jsx file i can able to access that xml file
You need to define a module for typescript to evaluate, otherwise it will try to look for something like toolbox.xml.ts.
Something along these lines in a file called XML.d.ts (for this placed in a folder #types in src):
declare module "*.xml" {
const doc: any; // Change this to an actual XML type
export default doc;
}
and add "typeRoots": ["src/#types", "node_modules/#types"] to your tsconfig.json (this makes typescript pick up the new typings file along with all installed types).
I have the same issue and am not sure how this works; I cannot even solve a simple txt file import issue. In my case, my target is esnext and ESM modules
New to typescript, try to follow the demo https://www.npmjs.com/package/cp-react-tree-table to use this control in my project, but get below information.
Try to search and seems it's related to module definition which confuse.
Hope someone can show me light.
import * as jQuery from 'jquery';
import TreeDataTable from 'cp-react-tree-table';
'TreeDataTable' is declared but its value is never read.ts(6133)
Could not find a declaration file for module 'cp-react-tree-table'. 'path/node_modules/cp-react-tree-table/dist/index.js' implicitly has an 'any' type.
Try npm install #types/cp-react-tree-table if it exists or add a new declaration (.d.ts) file containing declare module 'cp-react-tree-table';ts(7016)
Could not find a declaration file for module 'cp-react-tree-table'. path/node_modules/cp-react-tree-table/dist/index.js' implicitly has an 'any' type.
Try npm install #types/cp-react-tree-table if it exists or add a new declaration (.d.ts) file containing declare module 'cp-react-tree-table';ts(7016)
Could not find a declaration file for module 'cp-react-tree-table'
Create a new file like cp-react-tree-table.d.ts then add the following content to resolve the error quickly, but it's unsafe.
declare module "cp-react-tree-table" {
let TreeDataTable: any;
export default TreeDataTable;
}
Also, make sure typescript honoring our declaration file.
Your module doesn't have a type definition.
You should have install : #types/cp-react-tree-table but apparently it doesn't exist.
So you have to manualy create a file : "cp-react-tree-table.d.ts" containing the types.
You have examples of types definition here.
I have created a react typescript project with CRA with the command yarn create react-app my-app --typescript
now I have a module foo installed that does not have any typing not by default, not in defentlytyped repository.
i.e. in a component, I have
import {bar} from 'foo';
which throws error Type error: Could not find a declaration file for module 'foo'. '/*/node_modules/foo/dist/entry.js' implicitly has an 'any' type.
I created foo.d.ts in types folder at the root of the project like
declare module 'foo'{ import * as React from 'react' }
just to have the foo as type any but still, get the same error. it seems that whatever compiler (webpack,other transpiler) does not find the declaration at types folder
how can I add custom type declaration to the project?
Here is a real use-case example.
I managed to integrate kendo-ui-core into CRA+Typescript.
The problem was that there are no typings for kendo-ui-core, namely the typings have a different name: #types/kendo-ui
Typescript was complaining about not having type definitions
To resolve the issue, create a file called kendo-ui-core.d.ts in your /src directory with the following contents:
// src/kendo-ui-core.d.ts
declare module 'kendo-ui-core' {
import * as KendoTypings from '#types/kendo-ui';
export = KendoTypings;
}
This works:
/* create src/CustomTypes.ts */
namespace MyCustomType {
export type foo = number;
}
export default MyCustomType;
use like this:
import MyCustomType from "src/CustomTypes";
const num: MyCustomType.foo = 123;
I'm trying to use Highcharts with some of its extensions (like "highcharts-more") in a project that uses webpack, TypeScript and AngularJS (version 1.5).
I've installed Highcharts through npm (https://www.npmjs.com/package/highcharts), but I'm not able to import the extensions that come with it.
The actual trick I'm doing is to set some global variables in the webpack config file
plugins: [
new webpack.ProvidePlugin({
Highcharts: 'highcharts',
HighchartsMore: 'highcharts/highcharts-more',
HighchartsExporting: 'highcharts/modules/exporting'
})
]
and extending Highcharts manually
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
without any import in between. With this non-ideal solution TypeScript is complaining because
error TS2304: Cannot find name 'HighchartsMore'
error TS2304: Cannot find name 'HighchartsExporting'
In particular with Highcharts there is no error. Which I guess has to do with the fact that Highcharts is the only thing I manage to import, via
import * as Highcharts from 'highcharts';
which I can substitute with the Highchart global declaration in the webpack config. What I would like is to import every module in a clean way, something like
import {HighchartsMore} from 'highcharts-more';
Any idea is very much appreciated.
This type of error can occur when you do not have definition files for exported variables. Those Highcharts extensions still require them - you might want to read more about importing modules without d.ts here: https://github.com/Urigo/meteor-static-templates/issues/9 - it might change in the future.
You need to create a d.ts file for the extensions. For highcharts-more this is my file:
/// <reference path="index.d.ts" />
declare var HighchartsMore: (H: HighchartsStatic) => HighchartsStatic;
declare module "highcharts/highcharts-more" {
export = HighchartsMore;
}
reference path points to standard DefinietelyTyped Highcharts file from here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts
It allows to use type from Highcharts.d.ts because initializing will need proper typing for initializing extension:
HighchartsMore(Highcharts);
And finally don't forget to include all d.ts files by defining tsconfig or writing reference path in your files.
remove these lines from webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
Highcharts: 'highcharts',
HighchartsMore: 'highcharts/highcharts-more',
HighchartsExporting: 'highcharts/modules/exporting'
})
]
install typings file for highcharts using this:
npm install --save #types/highcharts
change your import statements to following:
import * as Highcharts from 'highcharts';
import HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);
I installed a module via npm, and am trying to access it inside my typescript file.
npm install marker-animate-unobtrusive --save
import SlidingMarker = require('marker-animate-unobtrusive');
This results in
//Error TS2307: Cannot find module 'marker-animate-unobtrusive'
Search for this issue brings upchanging the compiler options, others mention creating a d.ts file for Type Script to recognize the module, but I never got a clear answer anywhere. I tried these methods, but with little success so far.
I am using Angular 2 and Ionic 2 for this, if that information helps.
Any help is appreciated!!
The problem is because the SlidingMarker npm module doesn't yet have a type definition.
1) Create generic definition in typings/marker-animate-unobtrusive.d.ts:
declare module 'marker-animate-unobtrusive' {
const x: any;
export = x;
}
2) Add this file to list of definitions in typings/main.d.ts (or typings/index.d.ts if you are using the newer typings):
/// <reference path="marker-animate-unobtrusive.d.ts"></reference>
3) Next, update your import statement:
import * as SlidingMarker from 'marker-animate-unobtrusive';
Volia! Note, you may need to change any variables cast as "SlidingMarker" to "any" to avoid other TypeScript errors.