src/
user.ts
department.ts
using above as a context structure, if i do tsc is it possible to ignore/prevent generaton of declaration files for department.ts within tsconfig or webpack while bulding the app?
Currently its generating declaration for all the files within src directory
Yes, you can use the exclude key in the tsconfig.json file.
{
// ...other config options
"exclude": ["src/user.ts", "src/department.ts"]
}
See the TypeScript documentation for more details
Related
I can't find a way to generate d.ts and d.ts.map files using webpack. babel-loader only generates js and js.map files. I also need d.ts and d.ts.map files (which I was able to generate using tsc command) as shown in this picture:
Here is a minimal repo that contains all the settings: https://github.com/stavalfi/lerna-yarn-workspaces-example
More Details
I moved to Lerna + yarn. One of my packages is core (will be used in other packages) which is written in TS and JS.
I'm using webpack 4,babel-loader 8 for ts-to-js.
The other packages are trying to find type definitions and implementation of my core package but I was only able to generate index.js and index.js.map with webpack:
output: {
path: distPath,
filename: 'index.js',
},
{
"extends": "../tsconfig.settings.json",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"declarationDir": "dist",
"rootDir": "src",
"outDir": "dist"
}
}
When I compile with tsc (without webpack), everything is working great as I showed in the picture above.
Does my strategy is wrong? what should I do?
I have tried a lot of plugins that generate d.ts files but they don't work and doesn't create d.ts.map files.
I already tried: typescript-declaration-webpack-plugin, npm-dts-webpack-plugin, dts-bundle-webpack, #ahrakio/witty-webpack-declaration-files. (They are listed in the package.json of core so you can clone and play with it).
Running ts-loader before babel-loader will do the trick.
Specifying that you want declaration files in config is all you need.
If you are using an absolute path, the output d.ts files will also contain absolute paths which are useless and will result in typescript compilation errors.
To fix that, I wrote a plugin to convert an absolute path to a relative path:
https://github.com/stavalfi/babel-plugin-module-resolver-loader
You can call the Typescript compiler tsc directly to do that.
Use tsc --declaration to output a .d.ts file and tsc --declarationMap to generate the corresponding map file.
You can find more documentation here:
https://www.typescriptlang.org/docs/handbook/compiler-options.html
I'm creating a command-line script, using classes from the main express app.
Script resides in the folder:
bin/utils/
├── sync-buyers.ts
└── tsconfig.json
The main express app is in /app use uses import '#/foo/bar/thing.
This is set up in the tsconfig.json of the main app, as follows:
"paths": {
"#/*": ["*"],
"*": [
"node_modules/*",
"app/typings/*"
]
}
},
"include": ["app/**/*", "test/**/*"],
"exclude": ["app/**/*.test.ts", "/__tests__/", "/__mocks__/", "/__snapshots__/", "app/**/__mocks__/"],
"files": ["typings/global.d.ts"]
Script Execution
I'm testing to see if I can import from the main app, so I created a sayHello() function.
#!/usr/bin/env ts-node
/* tslint:disable */
import { sayHello } from '../../app/services/v2/oapp';
sayHello();
When I run it:
TSError: ⨯ Unable to compile TypeScript:
../../app/services/v2/oapp.ts(9,19): error TS2307: Cannot find module
'#/helpers/fetch'.
../../app/services/v2/oapp.ts(10,31): error TS2307: Cannot find module
'#/services/v2/buyer'.
../../app/services/v2/oapp.ts(11,51): error TS2307: Cannot find module
'#/http/HttpHeader'.
Summary:
Does ts-node support '#' style of import? If so, how do I set it up?
So the TypeScript paths configuration only applies to TypeScript's type resolution and checking, meaning that it will allow TypeScript to understand those imports for the purposes of type-checking only, but the code it generates won't automatically rewrite those imports to the correct locations.
There's two common approaches for solving this:
Update the Node resolver to understand the TypeScript paths config. The generated files will still refer to those paths by their #-name.
Most commonly, the tsconfig-paths module is used for this. You can require that module from the node command directly:
node -r tsconfig-paths/register main.js
Rewrite the generated files so that the #-names get replaced with the "real" local relative path locations.
There's a standalone module for this, tspath - you simply run tspath after compiling your TypeScript, and it updates the generated files with the correct paths.
If you're using Webpack, you can also use tsconfig-paths-webpack-plugin, which will take care of configuring Webpack's resolver to correctly locate those #-name paths.
And finally if you're using Babel, you might be interested in babel-plugin-module-resolver which does a similar thing for the Babel toolchain, however the downside here is it doesn't read the paths config from tsconfig.json, so you essentially have to duplicate your paths config in the alias config of this plugin.
Personally I'd recommend tsconfig-paths if this is a Node script or server that's compiled with tsc directly and tsconfig-paths-webpack-plugin if this is a frontend Webpack build.
I didn't find a declaration file for 'google-spreadsheet' so I'm trying to create one by myself:
in typings -> modules, I've added a new folder named "google-spreadsheet", and there I've added a new file named "index.d.ts" which has the following content:
export class GoogleSpreadsheet {
}
In the client file I have this:
import * as GoogleSpreadsheet from 'google-spreadsheet';
But 'google-spreadsheet' is marked with red, saying:
TS2307 Cannot find module 'google-spreadsheet'.
BTW I've NPM-installed 'google-spreadsheet' and it works JavaScriptly. Only the TypeScript bothers me here.
Any ideas how to solve that?
If you dont need to care about the typings inside this module you can only create a *.d.ts file and put the following content (e.g. create a typings.d.ts):
declare module 'google-spreadsheet';
To define the types inside the module you can change the above code to:
declare module 'google-spreadsheet' {
// define the types...
}
From the root of your project:
mkdir -p src/#types/google-spreadsheet - create a folder for your module's type declarations.
echo "declare module 'google-spreadsheet';" > src/#types/google-spreadsheet/index.d.ts
Also, ensure your tsconfig is configured to include the #types folders using the typeRoots option.
{
"compilerOptions": {
"typeRoots": ["src/#types", "node_modules/#types"]
}
}
Also, you might want to take a look at the documentation on declaration files.
I´ve ran into this problem while developing PowerBI custom visuals with echarts.
Just creating the .d.ts file didnt helped. I had to make an include statement inside the tsconfig.json which pointed to the root (where my .d.ts file is located with the declare mdoule statement)
externals.d.ts ->
declare module 'XXX/XXX'
tsconfig.json ->
"include": ["./"]
I use Atom to write code. It uses tsconfig.json to include and exclude folders. In order to use intellisense I need node_modules to be included, but when I want to compile it to js I don't want node_modules to be compiled.
So I need to call tsc in the upper folder where the config.ts is, and this results in compiling the whole node_modules.
My folder structure looks like this:
node_modules
config.ts
spec
|--test1.ts
|--test2.ts
Any idea how to exclude node_modules when compiling with tsc command?
Use exclude property
{
"compilerOptions": {
...
}
"exclude": [
"node_modules"
]
}
Files included using "include" can be filtered using the "exclude" property. However, files included explicitly using the "files" property are always included regardless of "exclude". The "exclude" property defaults to excluding the node_modules, bower_components, jspm_packages and directories when not specified.
link updated:
https://www.typescriptlang.org/tsconfig#exclude
I have a Node.js project written in Typescript and I am trying to get it to work with mime.js (https://github.com/broofa/node-mime). I have a declaration file (https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mime.d.ts) but cannot get node.js in typescript to work nicely with it.
I have the following:
/// <reference path="../../libs/mime.d.ts" />
import mime = require( 'mime' );
This keeps the type script compiler happy and all is good until I try to run it in Node.
When I try to run it I get
Cannot find module 'mime'
However, if I edit the generated javascript to the following:
import mime = require( '../../libs/mime' );
It all works fine. If I change the typescript file to have the require with the relative path I get a compiler error:
Cannot find external module '../../libs/mime'
How do I refer Typescript to both the mime.d.ts file and to the mime.js file so that both the compiler and Node are happy.
Many Thanks
TypeScript supports relative paths only for TypeScript modules. Ambient JavaScript modules should be placed in node_modules folder. From Node.js doc:
If the module identifier passed to require() is not a native module, and does not begin with '/', '../', or './', then node starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location.
Workaround 1
Place .d.ts next to .js module and change it from:
declare module "mime" {
...
}
to:
declare module Mime {
...
}
export = Mime;
Workaround 2
Rewrite .d.ts files from:
declare module "mime" {
export function lookup(path: string): string;
...
}
to:
declare interface IMime {
function lookup(path: string): string;
...
}
And then use plain var instead of import:
var mime = <IMime>require( '../../libs/mime' );
Try the following: in the root of the project 'npm install mime'. It will create the node_modules directory with mime inside of it. You can import it by 'require('mime')'. You also have to 'reference' the .d.ts file but that's the minor thing, with the npm package node will be able to import the actual javascript lib.
I also recommend using TSD ('npm install tsd -g') for getting the .d.ts files from DefinitelyTyped.
Btw sry for typos, I'm writing from mobile.
you need:
Add definitions file(*.d.ts) of the library
You must understand, the definition file contains only the interfaces of the library. You should be add the library source code separately.
References:
The typescript definitions:
https://github.com/borisyankov/DefinitelyTyped
The definitions for mime:
https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mime.d.ts
I've found a better way of doing this that works with node_modules folders and typings folder. A working example can be seen here:
https://github.com/Roaders/contact-list-checker/tree/external-js-module-example
In this app I import the csv js library in the ContactList class:
import csv = require('csv');
This is after installing it:
npm install csv
as the csv lib is in the node_modules folder we do not need to specify and path to the lib and just csv is sufficient for the compiler to find it. Without a d.ts declaration file we get errors though. This declaration file could be located in the typings folder and come directly from tsd but this lib is not found on tsd so I had to create my own. csv.d.ts is in libs/csv:
declare module "csv" {}
(I will add function interfaces to this later)
the module name HAS to match the import name. The filename can be anything.
You can add a reference to this file in the file that's doing the import:
///<reference path="../../../libs/csv/csv.d.ts" />
or as I have done you can just add a reference to it in the tsconfig.json in the root of the project:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"diagnostics": true
},
"files": [
"./app.ts",
"./typings/tsd.d.ts",
"./libs/libs.d.ts"
]
}
(where libs.d.ts has a reference to csv.d.ts)
This method allows you to install js libs using npm install and use declarations from tsd.