This is a small sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking. This README will also explain step-by-step how you can set up this repository so you can understand how each component fits together.

For simplicity, we've used babel-cli with a bare-bones TypeScript setup, but we'll also demonstrate integration with JSX/React, as well as adding bundlers into the mix. Specifically, we'll show off integration with Webpack for if you're deploying an application, and Rollup for if you're producing a library.

npm run build

npm run type-check

And to run in --watch mode:

npm run type-check:watch

Either run the following:

npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript

or make sure that you add the appropriate "devDependencies" entries to your package.json and run npm install:

"devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "typescript": "^3.7.5"
}

Then run

tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib

Note: TypeScript also provides a --declarationDir option which specifies an output directory for generated declaration files (.d.ts files). For our uses where --emitDeclarationOnly is turned on, --outDir works equivalently.

Then copy the .babelrc in this repo, or the below:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-typescript"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
}

Add the following to the "scripts" section of your package.json

"scripts": {
    "type-check": "tsc --noEmit",
    "type-check:watch": "npm run type-check -- --watch",
    "build": "npm run build:types && npm run build:js",
    "build:types": "tsc --emitDeclarationOnly",
    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
}

Full example available here

Install the @babel/preset-react package as well as React, ReactDOM, and their respective type declarations

npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev @babel/preset-react

Then add "@babel/react" as one of the presets in your .babelrc.

Update your tsconfig.json to set "jsx" to "react".

Make sure that any files that contain JSX use the .tsx extension. To get going quickly, just rename src/index.ts to src/index.tsx, and add the following lines to the bottom:

import React from 'react';
export let z = <div>Hello world!</div>;

Full example available here

npm install --save-dev webpack webpack-cli babel-loader

Create a webpack.config.js at the root of this project with the following contents:

var path = require('path');

module.exports = {
    // Change to your "entry-point".
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [{
            // Include ts, tsx, js, and jsx files.
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    }
};

Add

"bundle": "webpack"

to the scripts section in your package.json.

npm run bundle

Full example available here

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs

Create a rollup.config.js at the root of this project with the following contents:

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

Add

"bundle": "rollup -c"

to the scripts section in your package.json.

npm run bundle

Full example available here

npm install --save-dev @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript typescript

Add

"start": "babel-node -x \".ts\" src/index.ts"

to the scripts section in your package.json.

npm run start