  “compensating” patterns   “JavaScript code ‘rots’ over time”  “Writing JavaScript code in a large project is like carving code in stone” 

Transcript   “compensating” patterns   “JavaScript code ‘rots’ over time”  “Writing JavaScript code in a large project is like carving code in stone” 

  “compensating” patterns    “JavaScript code ‘ rots ’ over time” “Writing JavaScript code in a large project is like carving code in stone ”  

Describing APIs

Keep the description in synch with the implementation

     

Interfaces to be implemented

} interface IModelChangeAccessor { insertText(position:IPosition, text:string): IEditorPosition; deleteText(range:IRange): IDeleteTextResult; } interface change(callback: (changeAccessor:IModelChangeAccessor)=>any): … IEditableTextModel {

Callbacks

} export interface IValidationFilter { (resource:IEventEmitter): boolean; } public constructor(filter: IValidationFilter ) { new Validator( (resource)=>this.includeModel(resource) );

Option bags

} interface //… ICommonEditorOptions { selectOnLineNumbers?:boolean; glyphMargin?:boolean; roundedSelection?:boolean; theme?:string; readOnly?:boolean;

JSON structures

var options:IBuildData = JSON.parse(req.responseText); } export interface IBuildData { requestId:string; logOutput?:string; buildOutput?:BuildOutput; killOutput?:KillOutput;

External types from other libraries

} declare module module //...

WinJS { Binding { } } } class Promise { //...

then

 

promise.then((result) => {...}, (err) => {...});

http://promises-aplus.github.io/promises-spec/ https://github.com/promises-aplus/promises-spec/blob/master/implementations.md

} class Promise { then(success?: (value: T) => Promise, error?: (error: any) => Promise, progress?: (progress: any) => void): Promise; //… export interface ITypeDeclarationSupport { findTypeDeclaration(position:Editor.IPosition):Promise; }

TSD: a package manager to search and install TypeScript definition files directly from the DefinitelyTyped repository.

We started with internal modules

     

Code organization started to rot

“… our dependency graph was such a mess that each area had a dependency on just about every other area.”

 

File main.ts:

import adder= require("./adder"); adder.add(3,4); }

File adder.ts:

export function add(op1: number, op2: number):number { return op1+op2;

 var adder = require(“adder”); adder.add()  define main ‘adder' // code goes here adder.add() function tsc --module amd main.ts

tsc --module commonjs main.ts

AMD in JavaScript

define([‘…./winjs.base‘, ‘…./zoneWidget’], function (WinJS, ZoneWidget) { … } );

AMD in TypeScript

import WinJS= require ('vs/base/lib/winjs'); import ZoneWidget = require ('vs/editor/zoneWidget');

    

csharp.contribution.ts

modeRegistry.registerMode( [‘text/x-csharp'], new Platform.Descriptor( 'vs/languages/csharp/csharp', ‘CSMode') );

Registered on start-up

csharp.ts

{ export class CSMode extends AbstractMode constructor() { super('vs.languages.csharp'); } // lots of code ….

}

Loaded on demand

      

    “As I did conversions, I began typing various object literals I was passing around as interfaces. Soon enough, I realized how inconsistent I was, the same data was flowing around in at least 3 different formats data?... Just create a new literal object.” . This is because of the easiness through which you can create literals in JavaScript …. Need some placeholder for

   tsc –declarations –out typescriptservices.js typescript.ts



    



  www.typescriptlang.org

  http://requirejs.org/docs/whyamd.html

  http://blogs.msdn.com/b/bharry/archive/2012/10/24/typ escript-a-real-world-story-of-adoption-in-tfs.aspx

   Monaco Channel9 Series Monaco Blog

Partner Program

SPECIAL OFFERS

for MSDN Ultimate subscribers Go to

http://msdn.Microsoft.com/specialoffers