Skip to content

Commit

Permalink
Update README for optional TS type checking (#2548)
Browse files Browse the repository at this point in the history
  • Loading branch information
hueter committed May 1, 2020
1 parent 9671e5f commit 260295a
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions docs/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,33 @@ bundle exec rails webpacker:install:typescript

After that, a new file called `hello_typescript.ts` will be present in your `packs` directory (or rather the `source_entry_path` of your `webpacker.yml` configuration). You're now ready to write TypeScript.

## (Optional) Adding Compile-Time Type Checking

The default installation only transpiles your TypeScript code using Babel. If you would like to enable type checking as part of the Webpack compilation process (i.e. fail the build if there are TS errors), you can do the following:

1. Install the Fork TS Checker Webpack Plugin

```sh
yarn install -D fork-ts-checker-webpack-plugin
```

2. Then add it to your development environment config in `config/webpack/development.js`

```js
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const path = require("path");

environment.plugins.append(
"ForkTsCheckerWebpackPlugin",
new ForkTsCheckerWebpackPlugin({
// this is a relative path to your project's TypeScript config
tsconfig: path.resolve(__dirname, "../../tsconfig.json"),

This comment has been minimized.

Copy link
@connorshea

connorshea May 9, 2020

Contributor

@hueter out of curiosity, is there a specific reason the tsconfig option is used here?

This comment has been minimized.

Copy link
@connorshea

connorshea May 9, 2020

Contributor

Also it might be worth noting that you should add the vue: true option if you're using Vue.js

This comment has been minimized.

Copy link
@hueter

hueter May 9, 2020

Author Contributor

hi @connorshea I had to add this line to make it work for me, although I have multiple tsconfig files in my project. It's possible that it just works with the root for most people by default tho

// non-async so type checking will block compilation
async: false,
})
);
```

## Upgrading to 5.1

If you update your App to `webpacker >= 5.1` and had TypeScript installed before, you need to add some new/remove some old configurations:
Expand Down

1 comment on commit 260295a

@pjholmes
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

error install has been replaced with add to add new dependencies. Run "yarn add fork-ts-checker-webpack-plugin --dev" instead.

Please sign in to comment.