Typescript
Typescript
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate Typescript with webpack.
Basic Setup
In order to get started with webpack and Typescript, first we must install webpack in our project.
To start using webpack with Typescript you need a couple of things:
- Install the Typescript compiler in your project.
- Install a Typescript loader (in this case we're using ts-loader).
- Create a tsconfig.json file to contain our TypeScript compilation configuration.
- Create webpack.config.js to contain our webpack configuration.
You can install the TypeScript compiler and loader by running:
npm install --save-dev typescript ts-loader
tsconfig.json
Let's set up a simple configuration to support JSX and compile TypeScript down to ES5...
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true } }
See TypeScript's documentation to learn more about tsconfig.json
configuration options.
webpack.config.js
Now let's configure webpack to handle TypeScript:
module.exports = { entry: './index.ts', module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, } ] }, output: { filename: 'bundle.js', path: __dirname } };
This will direct webpack to enter through ./index.ts
, load all .ts
and .tsx
files through the ts-loader
, and output a bundle.js
file in our current directory.
Loaders
The following loaders for TypeScript:
Awesome TypeScript Loader has created a wonderful explanation of the difference between awesome-typescript-loader
and ts-loader
.
We chose to use ts-loader
in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.
Source Maps
To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our tsconfig.json
:
"sourceMap": true
Now we need to tell webpack to extract these source maps and into our final bundle:
webpack.config.js
module.exports = { devtool: 'inline-source-map', // Remaining configuration... };
See the devtool documentation for more information.
Using 3rd Party Libraries
When installing 3rd party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found in the @types package.
For example if we want to install lodash we can run the following command to get the typings for it:
npm install --save-dev @types/lodash
For more information see this blog post.
Importing Other Assets
To use non code assets with TypeScript, we need to defer the type for these imports. This requires a custom.d.ts
file which signifies custom definitions for TypeScript in our project. Let's set up a declaration for .svg
files:
custom.d.ts
declare module "*.svg" { const content: any; export default content; }
Here we declare a new module for SVGs by specifying any import that ends in .svg
and defining the module's content
as any
. We could be more explicit about it being a url by defining the type as string. The same concept applies to other assets including CSS, SCSS, JSON and more.
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/guides/typescript