Introduce TypeScript

[rayrfan]

Objective

As my client side code grows in size and complexity, it's time to get started with TypeScript and see if it could mesh well with my particular setup.

1. All js files in Admin Panel to be rewritten to ts files
2. The ts files should have full intellisense (either class-based or Vue.extend)
3. .ts files need to be transpiled into .js files, minified, comments removed and console statements removed

Help Wanted!!!

Here is where I am and how I'm stuck and need your help.

I rewrote one of my .js into .ts and got it to compile with minimal changes, and it works but no intellisesne :( So I update it the a class based syntax, then I did get intellisense, but it did not work.

All experimental code is saved in the 225-introduce-typescript branch.

I'm also considering an alternative which is to go full SPA.

Investigation

typescript

• seems like tsc cannot compile ts into minified js file

babel

• @babel/preset-typescript can transpile ts in js
• babel-preset-minify can
  • minify js code
  • it has a plugin babel-plugin-transform-remove-console that can remove console
• https://babeljs.io/repl/ is a tool useful to see how it minify your js file

Configurations

• I downloaded and installed the latest TypeScript SDK for VS2017, as of this writing it's 3.1
• create tsconfig.json with these options, note I didn't include sourceMap option because babel will output that later

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [
      "dom",
      "es2015"
    ],
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es2015"
  },
  "include": [
    "ts/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

VS somehow updated my web .csproj by adding <TypeScriptToolsVersion>3.1</TypeScriptToolsVersion> I removed it.

When I build the sln, all the .ts files (exclude folders mentioned in exclude) will be compiled to .js, When I make a change to .ts file and save, that .ts file will output js

Now what's left is minify .js and remove comments and console.

• install the following npm packages console statements

    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "babel-plugin-transform-remove-console": "6.9.4",
    "babel-preset-minify": "^0.5.0"

• create .babelrc

{
   "comments": false,
    "presets": [
		"minify"
    ]
}

Reading

• https://alligator.io/vuejs/typescript-class-components/
• https://frontendsociety.com/writing-single-file-components-vue-files-in-typescript-vue-class-component-vs-vue-extend-c5c1d8e47b7
• https://www.codementor.io/vuejsdevelopers/create-publish-web-components-with-vue-cli-3-jqkyamofd