|
| 1 | +--- |
| 2 | +layout: docs |
| 3 | +title: Typescript compilation |
| 4 | +--- |
| 5 | + |
| 6 | +Just want to see the code? Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4). |
| 7 | + |
| 8 | +Typescript is a library for writing type-safe Javascript. Starting with version 5, ReactJS.NET supports stripping out type definitions from `.TS` and .`TSX` files, powered by Babel. |
| 9 | + |
| 10 | +Note that just using the library will compile your Typescript to Javascript, but will _not_ warn you about code that does not type check. To set up type checking in your project during the build: |
| 11 | + |
| 12 | +1. Install a supported version of [Node](https://nodejs.org/en/download/) (either LTS or Current is fine) |
| 13 | +1. Create an empty `package.json` to your project root by running `npm init`. Optionally fill out the questions asked by `npm`, or press Enter to accept the defaults. |
| 14 | +1. Run `npm i typescript --save-dev`, which will update the freshly generated `package.json`. It's important that the Typescript version is declared in this file so every developer on your project has the same type checking rules. |
| 15 | +1. Copy the [tsconfig.json](https://github.com/reactjs/react.net/blob/master/src/React.Sample.Mvc4/tsconfig.json) file from the Mvc sample to your project root. If your components are not located in `Content`, change that path to the appropriate directory. |
| 16 | +1. Typescript needs to be informed of the libraries available on the global scope. To do this, create [types/index.d.ts](https://github.com/reactjs/react.net/blob/master/src/React.Sample.Mvc4/types/index.d.ts) in your project root: |
| 17 | + |
| 18 | +```ts |
| 19 | +import _React from 'react'; |
| 20 | +import _PropTypes from 'prop-types'; // @types/prop-types is a dependency of `@types/react` |
| 21 | +import _Reactstrap from 'reactstrap'; // Third party library example |
| 22 | + |
| 23 | +declare global { |
| 24 | + const React: typeof _React; // the React types _also_ exported by the React namespace, but export them again here just in case. |
| 25 | + const PropTypes: typeof _PropTypes; |
| 26 | + const Reactstrap: typeof _Reactstrap; |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +Libraries imported in `types/index.d.ts` must be listed in `package.json` before typescript will load their type definitions. Types for `react` are defined by the `@types/react` library in the [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react) repo, so install the types package with `npm i --save-dev @types/react`. Sometimes libraries will ship with typescript support; if so, install the package directly via `npm i --save-dev <library name>` to make the types resolve. If a library you're using does not ship with types, chances are there will be community-provided types in DefinitelyTyped. |
| 31 | + |
| 32 | +To check that everything works at this point, run `node_modules/.bin/tsc` from your project's working directory. You'll see empty output from `tsc` if the type checking succeeds. |
| 33 | + |
| 34 | +Finally, add a compile-time step to your project file to get type checking with every Visual Studio build (works in both ASP.NET and .NET Core): |
| 35 | + |
| 36 | +```xml |
| 37 | +<Target Name="Typecheck" AfterTargets="AfterBuild"> |
| 38 | + <Exec WorkingDirectory="$(MSBuildProjectDirectory)" Command="node_modules/.bin/tsc" /> |
| 39 | +</Target> |
| 40 | +``` |
| 41 | + |
| 42 | +You're done! Introduce a type error in your project to verify things are working as expected. For example, you will see a message similar to `6>C:\code\react.net\src\React.Sample.Mvc4\Content/Sample.tsx(27,19): error TS2551: Property 'initialCommentss' does not exist on type 'CommentsBoxProps'. Did you mean 'initialComments'?` |
| 43 | + |
| 44 | +Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4) for the completed integration. |
0 commit comments