typescript-tips-and-tricks

View Github Repository Open presentation in a new window

nicojs

See all presentation from nicojs

typescript-tips-and-tricks

0 0

typescript-tips-and-tricks

Top 10 tips and tricks for TypeScript

On Github nicojs / typescript-tips-and-tricks

10'ish tips and tricks

1. Use source maps

2. use tsconfig.json 

    tsc --init

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": "dist"
    },
    "exclude": [
        "node_modules"
    ]
}

3. Integrate in your build

// Grunt
module.exports = function (grunt) {
  grunt.initConfig({
    ts: {
      build: {
        tsconfig: true
      }
  }
}
// Gulp
var ts = require('gulp-typescript');
 
gulp.task('default', function () {
    return gulp.src('src/**/*.ts')
      .pipe(ts())
      .pipe(gulp.dest('dist'));

});

// Package.json
{
    "scripts": {
        "start": "tsc"
    }
}

# MSBuild
PM> Install-Package 
  Microsoft.TypeScript.MSBuild
   
   

4. choose a module strategy

import * as _ from 'lodash'; 
export class ArrayWrapper<T> {
    constructor(private arr: T[]){
    }
    
    last(){
        return _.last(this.arr);
    }
}
{
        "module": "commonjs",
        "target": "es5"
}




5. typed libraries



    
Library

    
// tsconfig.json
{
    "compilerOptions": {
        "declaration": true,
        // ...
     }
}

    
// Package.json
{
    "main": "./lib/foo.js",
    "typings": "./lib/foo.d.ts"
}    




5. typed libraries



    
Consumer

    
// tsconfig.json
{
    "compilerOptions": {
        "moduleResolution": "node",
        // ...
     }
}

    
// file.ts
import * as foo from 'foo';

foo.bar();// use the library




5. typed libraries



    
Alternative option

    
// Library package.json
{
    "main": "./lib/foo.js",
    "typings": "./lib/foo.d.ts"
    "main": "./foo.js"
}    

    
# move files to root of your module
$ ls node_modules/foo
foo.d.ts  foo.js  foo.ts

    
// Consumer
import * as foo from 'foo/foo';

foo.bar();// use the library    




Create unit tests before migrating




Fault tolerance




8. Configuration


  • There are 49 compiler options, take a look
    • 
    
  • noImplicitAny
    • 
    
  • noImplicitReturns
    • 
    
  • noFallthroughCasesInSwitch
    • 
    
  • forceConsistentCasingInFileNames
    • 

9. The any thing


any-type can provide flexibility


// MutantRunResultMatcher.ts
import Mutant from './Mutant';

export default class MutantRunResultMatcher {
  constructor(mutants: Mutant[], results: RunResult[]) { }
  // some realy complex stuff
}



// MutantRunResultMatcherSpec.ts
import Mutant from './Mutant';
import MutantRunResultMatcher from './MutantRunResultMatcher';
describe('MutantRunResultMatcher', () => {
  let mutants: any[]; // Flexibility
  let results: any[];

  beforeEach(() => {
    mutants = [];
    results = [];
    sut = new MutantRunResultMatcher(mutants, runResultsByTestId);
  });


10. Teamwork


TypeScript is flexible. Make sure you work together in your team


  • Allow implicit any?
    • 
    
  • Explicitly type everything?
    • 
    
  • External modules vs internal modules?
        
    • If external: which syntax?
      • 
        
    • 
    
  • Bundeling to production
    •