Setup Development Environment for Basic Typescript Project

Readme.md

Notes

Ts classes

All Ts classes will be in ts-src folder

Finally

1. copy devDependancies in this package.json into your package.json
2. do npm install
3. type command webpack --config webpack.config.js to watch and build your code.
4. type command npm start to run the dev server.

App.ts

//This is how your App.ts will look like 

import "jquery-ui-dist/jquery-ui.min.js"   // load your external js files
import "jquery-ui-css/jquery-ui.theme.css" // load your external css files

import { A } from "./services/A";  //sample code, import typescript classes

package.json

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "http-server"
  },
  "author": "imal hasaranga",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^2.9.2",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "http-server": "^0.11.1",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "jquery-ui-dist": "^1.12.1"
  }
}

tsconfig.json

{
    "files" : [
        "ts-src/App.ts"
    ],
    "compilerOptions": {
        "sourceMap": true
    }
}

webpack.config.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
    devtool : "source-map",
    entry : [ "./ts-src/App.ts" ],
    output : {
        filename : "app.js",
        path : path.resolve(__dirname,"dist"),
        publicPath: '/dist/'
    },
    module : {
        rules : [
            {
                test : /\.tsx?$/,
                include:path.resolve(__dirname,"ts-src"),
                use : ["ts-loader"]
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    resolve : {
        extensions : [".tsx",".ts", ".js"],
        alias: { //creating aliases so that we can import js and css files using these aliases in the first entry poin
            'jquery-ui': 'jquery-ui-dist',
            'jquery-ui-css': 'jquery-ui-dist'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({  //loading external js libraries, remove if you dont' need jquery
          $: "jquery",
          jQuery: "jquery"
        })
    ],
    mode : "development",
    watch : true
}