Start a new typescript project step by step

$ npm install webpack webpack-dev-server typescript ts-loader --save-dev

if you don't have already installed webpack CLI

$ npm install webpack-cli --save-dev

Let’s add a script with name start to the scripts section in package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
  },

so

$ npm run start

To build dist version in scripts package.json

"build": "webpack"

so

$ npm run build

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
};

tsconfig.json

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "moduleResolution": "node",
      "target": "es6",
      "allowJs": true,
      "lib": [
        "es2017",
        "dom"
      ]
    }
}

TSlint

In case of problem with tslint

tslint -c tslint.json 'src/**/*.ts'

or

npm install tslint -g

See Schema

inspired by CodingTheSmartWay