TypeScript (Microsoft)

MakeTypes from JSON samples:
https://jvilk.com/MakeTypes/

Linter documenttion https://palantir.github.io/tslint/

VisualStudoCode plugin for typescript:
https://marketplace.visualstudio.com/items?itemName=eg2.tslint

-- tsconfig can be generated by
$ tsc --init

-- if error js file will not be generated
"noEmitOnError": true

$ vi app.ts

[0,1,2].map((num) => num);

# npm install -g grunt-cli

$ npm init -y
$ npm install --save-dev grunt grunt-ts grunt-tslint tslint typescript

$ vi tslint.json

{
    "EXTENDS": [
        "tslint:recommended"
    ],
    "rules": {
        "only-arrow-functions": true
    }
}

$ vi Gruntfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function(grunt) {
grunt.initConfig({
ts: {
default : {
src: ['*.ts', '!node_modules/**']
}
},
tslint: {
options: {
configuration: 'tslint.json'
},
files: {
src: ["*.ts"]
}
}
});

grunt.loadNpmTasks('grunt-ts');
grunt.loadNpmTasks('grunt-tslint');
grunt.registerTask('default', ['ts', 'tslint']);
};

$ grunt

Using Jasmine to Unit Test Your Code

$ npm install --save jasmine

$ jasmine init

$ vi spec/support/jasmine.json

$ vi product.ts

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec2/code/video3/product.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export class Product {
private name: string;
private price: number;
constructor(name, price) {
this.name = name;
this.price = price;
}

getName(): string {
return this.name;
}

getPrice(): number {
return this.price;
}

getDiscountedPrice(discount): number {
return this.price - (this.price \* discount / 100);
}
}

$ tsc product.ts

$ vi spec/product-spec.js

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec2/code/video3/spec/product-spec.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const productModule = require('./../product.js');

describe('Product Unit test', () => {
let product;
beforeEach(() => {
product = new productModule.Product('football', 100);
})

it('should return the product name', () => {
expect(product.getName()).toBe('football');
});
it('should return the product price', () => {
expect(product.getPrice()).toBe(100);
});
it('should return the exact product price', () => {
expect(product.getPrice()).not.toBe(110);
});
it('should return 10% discount price', () => {
expect(product.getDiscountedPrice(10)).toBe(90);
});
it('should return 50% discount price', () => {
expect(product.getDiscountedPrice(50)).toBe(50);
});
});

$ jasmine

Karma - test runner

$ npm install jasmine-core karma-chrome-launcher karma-typescript karma

$ karma init

$ vi karma.conf.js


***

frameworks: ['jasmine', 'karma-typescript'],

***

preprocessors: {
'*.ts': ['karma-typescript']
},


$ vi product-test.ts

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec2/code/video4/product-test.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Product } from './product';

describe('Product Unit test', () => {
let product;
beforeEach(() => {
product = new Product('football', 100);
})

it('should return the product name', () => {
expect(product.getName()).toBe('football');
});
it('should return the product price', () => {
expect(product.getPrice()).toBe(100);
});
it('should return the exact product price', () => {
expect(product.getPrice()).not.toBe(110);
});
it('should return 10% discount price', () => {
expect(product.getDiscountedPrice(10)).toBe(90);
});
it('should return 50% discount price', () => {
expect(product.getDiscountedPrice(50)).toBe(50);
});
});  

$ karma start –single-run

PhantomJS

https://stackoverflow.com/questions/45369418/karma-typescript-cant-find-variable-exports

https://github.com/saurabhranjansingh/UnitTestingKarmaMocha

$ npm install --save-dev karma-spec-reporter

$ vi karma.conf.js


reporters: ['spec', 'coverage'],

$ karma start --single-run --log-level debug
$ karma start

=======================================

3 - Task Automation

09-Using Grunt to Auto-Compile TypeScript

$ vi Gruntfile.js

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video01/Gruntfile.js

$ vi tsconfig.json

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video01/tsconfig.json

$ vi product-class.ts

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video01/product-class.ts

$ vi product-class.ts

https://raw.githubusercontent.com/marley-js/Mastering-TypeScript-Programming-Techniques/master/Sec3/code/video01/product.ts

$ npm install --save-dev grunt-contrib-watch

$ grunt

10-Auto-Compile and Auto-Build TypeScript Files

$ vi tsconfig.json

https://raw.githubusercontent.com/marley-js/Mastering-TypeScript-Programming-Techniques/master/Sec3/code/video02/tsconfig.json

$ vi app.ts

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video02/app.ts

$ tsc

11-Auto-Unit Testing Your TypeScript Application

$ vi tsconfig.json

https://raw.githubusercontent.com/marley-js/Mastering-TypeScript-Programming-Techniques/master/Sec3/code/video03/tsconfig.json

$ mkdir -p spec
$ vi spec/product-spec.js

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video03/spec/product-spec.js

$ jasmine spec/product-spec.js

$ npm install --save grunt-exec

$ vi Gruntfile.js

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video03/Gruntfile.js

Protractor (e2e testing tool) uses Selenium

jre/jdk (java) shoudl be installed.

# npm install -g protractor
# webdriver-manager update

$ webdriver-manager start

$ vi tsconfig.json

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video04/tsconfig.json

$ vi conf.ts

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video04/conf.ts

$ vi spec.ts

https://raw.githubusercontent.com/marley-js/Mastering-TypeScript-Programming-Techniques/master/Sec3/code/video04/spec.ts

site:

https://github.com/webmakaka/Mastering-TypeScript-Programming-Techniques/tree/master/Sec3/code/video04/site

$ cd site
$ python -m SimpleHTTPServer 8080

$ tsc *.ts
$ protractor conf.js