challenge
Since typescript became more and more popular those days i decided to try and take the following challenge: To convert this angular1. seed-project from old fashioned ES5 to Typescript.
I have very little experience with typescript, and that why it is interesting. This project consist only from two basic views so it seems to be not so hard...
Typings
First we need to add typings to our project. What are those typings?
Typings are dependencies as angular or angular-routes libraries which translated to typescript
First step we need to add typescript & typings dependencies to package.json file
"typescript": "^1.8.10",
"typings": "^0.8.1",
Lets also add
typings.json file which has list of Definitions of libraries we use in project
{
"ambientDependencies": {
"angular": "registry:dt/angular#1.5.0+20160412133217",
"angular-route": "registry:dt/angular-route#1.3.0+20160317120654",
"jquery": "registry:dt/jquery#1.10.0+20160417213236"
}
}
After adding those files lets update again the package.json file so it will install typings after installing all dependencies:
...
"scripts": {
"postinstall": "bower install && typings install",
...
}
...
Lets check - after runing npm i command the "typings" directory should appear:
Compiling
The compile command of typescript you need to call for convert your ts files into js is "tsc -p ./".
tsc takes other options of how to compile typescript from
tsconfig.json file:
{
"compileOnSave": false,
"compilerOptions": {
"module": "commonjs",
"target": "es5"
},
"exclude": [
"bower_components",
"node_modules",
"typings"
]
}
It is convenient to configure package.json "scripts" zone so you can run the tsc with npm:npm run build
..
"scripts": {
"build": "tsc -p ./",
...
}
...
Change the code to typescript
Now you can start to convert the project to typescipt:
First - lets start with view1.js file , by rename it to view1.ts
/// <reference path="../../typings/main/ambient/jquery/index.d.ts" />
/// <reference path="../../typings/main/ambient/angular/index.d.ts" />
/// <reference path="../../typings/main/ambient/angular-route/index.d.ts" />
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', ($routeProvider: angular.route.IRouteProvider) => {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [() => {
}]);
See that after running "npm run build" the view1.js file generates!
see full code here: repo
Thanks for reading
