Skip to content

Commit 97bbfdd

Browse files
authored
docs: add a note about TypeScript usage (#4301)
1 parent 7b19dc4 commit 97bbfdd

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ fast in-memory access to the webpack assets.
2727
- [With the CLI](#with-the-cli)
2828
- [With NPM Scripts](#with-npm-scripts)
2929
- [With the API](#with-the-api)
30+
- [With TypeScript](#with-typescript)
3031
- [The Result](#the-result)
3132
- [Browser Support](#browser-support)
3233
- [Support](#support)
@@ -249,6 +250,30 @@ While it's recommended to run webpack-dev-server via the CLI, you may also choos
249250

250251
See the related [API documentation for `webpack-dev-server`](https://webpack.js.org/api/webpack-dev-server/).
251252

253+
### With TypeScript
254+
255+
If you use TypeScript in the webpack config, you'll need to properly type `devServer` property in order to avoid TS errors (e.g. `'devServer' does not exist in type 'Configuration'`). For that use either:
256+
257+
```ts
258+
/// <reference path="node_modules/webpack-dev-server/types/lib/Server.d.ts"/>
259+
import type { Configuration } from "webpack";
260+
261+
// Your logic
262+
```
263+
264+
Or you can import the type from `webpack-dev-server`, i.e.
265+
266+
```ts
267+
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
268+
import type { Configuration } from "webpack";
269+
270+
const devServer: DevServerConfiguration = {};
271+
const config: Configuration = { devServer };
272+
273+
// module.exports
274+
export default config;
275+
```
276+
252277
### The Result
253278

254279
Either method will start a server instance and begin listening for connections

0 commit comments

Comments
 (0)