Declaration file emit

[andrew-w-ross]

Hi

How do I get declaration file to emit? I've set "declaration": true in my tsconfig.json and I've set the library in the output on my webpack config.

Is there anything else I'm not doing?

[s-panferov]

@andrew-w-ross

I'm not sure that TypeScript supports generation of "all-in-one" definition file for your library. Most likely we can emit a definition per source file, but I think that it's not what you want, right?

I need to think about that.

[andrew-w-ross]

@s-panferov It would be best if it could be one definition. That way you could just set the typings field on package.json and definitions would just work if you had commonjs module resolution. The tricky bit would be definitions that the project is dependent on. Do you bundle them in or reference to them?

[s-panferov]

@andrew-w-ross sorry for a long delay. I've had some time today to make basic implementation of declaration option support. I believe that this impl is not sufficient, but enough to discuss.

Please try the version 0.17.0-rc.3

[andrew-w-ross]

@s-panferov Thanks I'll give this a try. Although currently I do have a very hacky workaround.

[akasapu2985]

How can I use this.. I have "declaration": true in my tsconfig "CompilerOptions", do I have to set any other options to get the declaration file.

[akasapu2985]

I see that the d.ts files are generated but one for each file.. how can I get a single declaration file for all the code.

[andrew-w-ross]

@akasapu2985 Looks like the files have to be separate or the declaration becomes ambient. So you would have to reference your "entry point" declaration file in your typings field in the package.json.

@s-panferov After going through some testing your current solution seems like the best. As I mentioned to @akasapu2985 to roll this up into a single declaration file makes the declaration ambient and therefore not suitable to include in as the typings for the package created. Doing the work that would be required to roll up the declarations is a non-trivial task.

[s-panferov]

@andrew-w-ross you're right, declaration "squashing" is not a trivial thing and I think it can only be implemented on TS side.

I don't have any libraries that require declaration generation, so I'm waiting for some real-world feedback about the feature.

[rcollette]

For a very simple single directive bower/npm module, creating a single bundle, I've used the directions here: https://medium.com/@vladimirtolstikov/how-to-merge-d-ts-typings-with-dts-bundle-and-webpack-e8903d699576#.k2ajzm943

Except that I was not able to point to just a single main .d.ts file but rather use the "experimental" feature of globbing. I'm not even sure it's a real glob implementation because the documentation states that it looks for "/*/.d.ts" in the configuration.

It would definitely be nicer if something like this could be done on a bundle by bundle basis. This PlugIn isn't really using properties of the compiler to determine what should be processed. It's more like a trigger to run a command.

// `CheckerPlugin` is optional. Use it if you want async error reporting.
// We need this plugin to detect a `--watch` mode. It may be removed later
// after https://github.com/webpack/webpack/issues/3460 will be resolved.
const webpack = require('webpack');
const {CheckerPlugin} = require('awesome-typescript-loader');
const path = require('path');

function DtsBundlePlugin(){}
DtsBundlePlugin.prototype.apply = function (compiler) {
  compiler.plugin('done', function(){
    var dts = require('dts-bundle');

    dts.bundle({
      name: 'spp-web-ui-common-header',
      main: 'dist/**/*.d.ts',
      out: 'header.bundle.d.ts',
      removeSource: true,
      outputAsModuleFolder: true // to use npm in-package typings
    });
  });
};

module.exports = () => {
  return {
    entry: {
      app: './src/header.module.ts'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'header.bundle.js',
      library:'commonHeader',
      libraryTarget: 'umd'
    },
    devtool: 'source-map',
    plugins: [
      new CheckerPlugin(),
      new DtsBundlePlugin(),
    ],
    resolve: {
      extensions: ['.ts', '.js', '.html'],
      modules: ['bower_components', 'node_modules']
    },
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'ng-cache-loader?exportIdOnly&prefix=rooted&module=spp.header.templates'
        },
        {
          loader: `awesome-typescript-loader?configFileName=${path.resolve(__dirname, 'src/tsconfig.json')}`,
          test: /\.ts$/
        }
      ]
    },
    externals: {
      angular: 'angular'
    }
  }
};

[JonWallsten]

Not sure if I have the entirely same issue. I use "declaration": true to generate typings and then bundle them with dts-bundle like @rcollette. But I'm not getting updated definition files when using webpack --watch. I have to stop the watch and run tsc manually again. Any ways around that?

[dolanmiu]

I am having the same issue, I need this feature!

I am using baseUrl and paths for non-relative imports.

I am using awesome-typescript-loader to bundle into a single index.js for the non-relative imports to work.

Because the .d.ts files are importing from absolute paths, it gets confused

For example, the .d.ts file has:

import { IMediaData } from "file/media";

but when using my module, it shows:

../../docx/build/file/footer/footer.d.ts(1,28): error TS2307: Cannot find module 'file/media'.

I can "fix" this by setting declarations to false, so no type definitions are created, then create them manually and upload them to DefinitelyTyped, but that's obviously un-ideal

Related issue here:

https://github.com/Microsoft/TypeScript/issues/21507#issuecomment-361837536

Webpack config: https://github.com/dolanmiu/docx/blob/master/webpack.config.js tsconfig: https://github.com/dolanmiu/docx/blob/master/tsconfig.json