TypeScript (Microsoft)

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

https://marketplace.visualstudio.com/items?itemName=eg2.tslint


$ 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/marley-js/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/marley-js/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/marley-js/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
25
    
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/marley-js/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video01/Gruntfile.js


$ vi tsconfig.json

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


$ vi product-class.ts 

https://github.com/marley-js/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/marley-js/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/marley-js/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/marley-js/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/marley-js/Mastering-TypeScript-Programming-Techniques/blob/master/Sec3/code/video04/tsconfig.json


$ vi conf.ts


https://github.com/marley-js/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/marley-js/Mastering-TypeScript-Programming-Techniques/tree/master/Sec3/code/video04/site

$ cd site
$ python -m SimpleHTTPServer 8080

$ tsc *.ts
$ protractor conf.js