Getting Started with TypeScript and React

Installing and Configuring TypeScript

First install TypeScript locally with Yarn, initialize a project, and create a tsconfig.json using tsc --init (or the local binary). The example configuration enables ES6 modules, strict mode, source maps, and JSX preservation.

yarn init
yarn add typescript

After installing TypeScript you can run the tsc command‑line tool to compile files. Running tsc --init generates a tsconfig.json where you can edit compiler options such as module , target , allowSyntheticDefaultImports , strict , and others.

{
  "compilerOptions": {
    "module": "es6", // use ES2015 modules
    "target": "es6", // compile to ES2015
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "sourceMap": true,
    "outDir": "ts-build",
    "jsx": "preserve",
    "strict": true
  },
  "exclude": [
    "node_modules"
  ]
}

allowSyntheticDefaultImports

Setting this option to true lets you use the ES2015 default‑import syntax even when the imported module does not have a default export, which is convenient for importing React.

strict:true

Enabling strict turns on a set of strict type‑checking options, including noImplicitAny and strictNullChecks , helping catch errors early.

noImplicitAny

When noImplicitAny is true, variables without an explicit type are not allowed to default to any , forcing you to annotate types.

function log(thing) {
  console.log('thing', thing)
}

strictNullChecks

With strictNullChecks enabled, the compiler warns when a value might be undefined or null , preventing runtime errors.

Configuring Webpack, Babel and TypeScript

Install Webpack, Babel, and related loaders so that TypeScript files are first processed by ts-loader and then by Babel to transpile ES6 to ES5.

yarn add webpack babel-core babel-loader babel-preset-es2015 babel-preset-react ts-loader webpack-dev-server

A typical webpack.config.js looks like this:

const webpack = require('webpack')
const path = require('path')

module.exports = {
  // set sourcemaps to eval mode
  devtool: 'eval',

  // entry point
  entry: [
    'index.tsx'
  ],

  // output configuration
  output: {
    filename: 'app.js',
    publicPath: 'dist',
    path: path.resolve('dist')
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
    inline: true,
  },

  resolve: {
    // resolve .ts/.tsx first, then .js
    extensions: ['.ts', '.tsx', '.js'],
    modules: ['src', 'node_modules']
  },

  module: {
    loaders: [
      // .ts/.tsx files go through ts-loader then babel-loader
      { test: /\.tsx?$/,
        loaders: ['babel-loader', 'ts-loader'],
        include: path.resolve('src') }
    ]
  },
}

Place a .babelrc file with the required presets:

{
  "presets": ["es2015", "react"]
}

Writing a TypeScript React Component

Create src/index.tsx as the entry point and add a simple component:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
Hello world!
)
}

ReactDOM.render(
, document.getElementById('app'))

Install type definitions for React and React‑DOM to satisfy the compiler:

yarn add @types/react
yarn add @types/react-dom

Defining a Module Declaration

For third‑party libraries without type definitions (e.g., react-ace ), create a .d.ts file to declare the module and its props:

declare module 'react-ace' {
  interface ReactAceProps {
    mode: string
    theme: string
    name: string
    editorProps?: {}
    showPrintMargin?: boolean
    minLines?: number
    maxLines?: number
    wrapEnabled?: boolean
    value: string
    highlightActiveLine?: boolean
    width?: string
    fontSize?: number
  }

  const ReactAce: React.ComponentClass
export = ReactAce
}

Testing with Jest and ts‑jest

Configure Jest to handle TypeScript files using ts-jest and install the corresponding type definitions.

"jest": {
  "moduleFileExtensions": ["ts", "tsx", "js"],
  "transform": {
    "\\.(ts|tsx)$": "
/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "/*.spec.(ts|tsx|js)$"
},
"devDependencies": {
  "ts-jest": "^...",
  "@types/jest": "^..."
}

Enforcing Code Style with TSLint

Use TSLint with the tslint-react preset to lint TypeScript React projects. Example tslint.json :

{
  "defaultSeverity": "error",
  "extends": ["tslint:latest", "tslint-react"],
  "rules": {
    "quotemark": [true, "single", "jsx-double"],
    "semicolon": [true, "never"],
    "interface-name": [true, "never-prefix"],
    "object-literal-sort-keys": false
  },
  "rulesDirectory": []
}

Run tslint --project tsconfig.json to lint the project.

Conclusion

Using TypeScript with React provides stronger type safety, better tooling, and a smoother development experience. The article demonstrates how to set up the build pipeline, configure TypeScript, add typings for third‑party modules, test with Jest, and enforce code quality with TSLint.