有没有办法在打字稿中将类型添加到外部包含的 javascript 文件中？

Question

For context; I am making a clientside script and I got tired of waiting for webpack to bundle all of my dependencies anytime I made a change. So I added the dependencies via a <script> tag in my html file but, I cannot figure out a way to add typings to the global variable that's created by the dependencies.

For Example:

In my html I include d3 like so:

<script src="https://cdn.jsdelivr.net/npm/d3@5.15.0/dist/d3.min.js"></script>

In my index.ts file I have the following:

declare const d3; // currently has the <any> type

//I do stuff with d3 down here

and that works fine. But, D3 is a massive library and intellisense helps a bunch so I'm not constantly looking at their confusing documentation constantly. I would love to be able to include my typings file like so:

import type d3 from 'd3'
declare const d3:d3; 

but, that errors because it conflicts with my local declaration.

In Summary

Does anyone have a good way to apply typings to a externally included javascript file?

[EDIT] I've included my package.json file below to show what pieces of tech i'm using. It's really not much.

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack -w"
  },
  "keywords": [],
  "author": "Michael Sorensen",
  "license": "ISC",
  "dependencies": {
     // I'm including the dependencies that were here in my html file
  },
  "devDependencies": {
    "@types/chart.js": "^2.9.16",
    "@types/d3": "^5.7.2",
    "@types/geojson": "^7946.0.7",
    "@types/papaparse": "^5.0.3",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-node-externals": "^1.7.2"
  }
}

Answer 1

If your editor supports the .d.ts type files, you should be able to find one at:

https://github.com/DefinitelyTyped/DefinitelyTyped

Answer 2

So if you find this post on SO @Erik Phillips' answer is probably the one you're looking for.

However, in my case I just set up my webpack incorrectly. I needed to manually define my external modules instead of using the node_externals webpack plugin.

My webpack.config.js file now looks like this:

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  devtool: "inline-source-map",
  externals: [
    {
      d3: "d3",
      "chart.js": "Chart",
      papaparse: "Papa",
    }
  ], // in order to ignore all modules in node_modules folder
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".json"]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build")
  }
};

Now, I can bundle my typescript files without including the libraries mentioned while not changing how they are imported. Seems so obvious now.