How to Start Using TypeScript Today!

Here are several tips to get you started using TypeScript (currently on 0.9.1.1) today!

Compile on Save

For fast development you MUST compile your TypeScript files on save. While this is not built into the current pre 1.0 release of TypeScript, it is still very easy to enable. There is a very simple article on CodePlex that provides you the exact XML configuration to add to your Project file to compile on save.

Compile-On-Save

Here are some the simple steps to compile on save:

1. Right click on your project in Solution Explorer and unload it.
2. Rick click on your project file and open it for editing.
3. Copy and paste the PropertyGroup and Import nodes from the link above.
4. Save and close the project file.
5. Right click and reload the project in solution explorer.
6. Open the TypeScript Options
   • Tools -> Options -> Text Editor -> TypeScript -> Project -> General
7. Check "Automatically compile TYpeScript files which are part of a project"
8. Close the options menu, you are almost done!
9. Open your TypeScript (.ts) file and save it...boom, it compiled on save. :)

Make Generated Files Dependent

Whenever you compile a TypeScript file it will generate a JavaScript file for you. However, as of .9, that JavaScript file will not be automatically included in your project. First, you should include those generated files in your project. Second, you should modify the project file to mark those generated fiels as being dependent upon their related TypeScript (.ts) file. This will ensure that no one accidentally modifies those files, and it will ensure that TFS automatically checks them out for edit before being regenerated.

<TypeScriptCompile Include="Scripts\jqueryExtensions.ts" />

<Content Include="Scripts\jqueryExtensions.js">

  <DependentUpon>jqueryExtensions.ts</DependentUpon>

</Content>

Here are some the simple steps to compile on save:

1. Right click on your project in Solution Explorer and unload it.
2. Open your project file in a text editor.
3. Add a dependent node under the JavaScript file (see above for an example).
4. Right click and reload the project in solution explorer.

Use a Master Definition File

Your TypeScript files require reference tags to include information about other TypeScript files. One of my favorite features of TypeScript is that the community builds definition files for other frameworks. However including multiple references in each file is a lot of work, and a bad idea in general.

I strongly suggest keeping one master definition that references all of your other definition files, and then your code files need only reference that one file inherit information regarding all of your code and dependencies.

Master Definition File

/// <reference path="jquery.d.ts" />

/// <reference path="jqueryui.d.ts" />

interface JQuery {

    alertOnClick(): JQuery;

}

interface JQueryStatic {

    stringFormat(format: string, ...args: Array<any>): string;

}

Normal Code File

/// <reference path="../Definitions/typeScriptDemo.d.ts" />

(function ($: JQueryStatic) {

    $.stringFormat = stringFormat;

    function stringFormat(format: string, ...args: Array<any>): string {

        return format.replace(/{(\d+)}/g, replaceFormat);

        function replaceFormat(match, index) {

            return typeof args[index] != 'undefined'

                ? args[index]

                : match;

        }

    }

})(jQuery);

Next week I'll talk about how to get your TypeScript compiling on Team Foundation Server.

Enjoy,
Tom