{"id":41532,"date":"2016-10-13T16:05:06","date_gmt":"2016-10-13T10:35:06","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=41532"},"modified":"2017-02-12T19:21:17","modified_gmt":"2017-02-12T13:51:17","slug":"typescript-a-primer","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/typescript-a-primer\/","title":{"rendered":"TypeScript – A Primer"},"content":{"rendered":"

The evolution of JavaScript from merely a scripting language\u00a0to a general purpose programming \u00a0language is indicative of the Atwood Law<\/a>.\u00a0JavaScript is a multi-paradigm object based<\/em> language with roots in C<\/strong>, Java<\/strong>, Self<\/strong> and Scheme<\/strong>.\u00a0It was designed to be relaxed i.e. without a static type system. This in my opinion is a perfect rationale for a scripting language – \u00a0more so if you are designing such a thing in weeks time; my respect to Brendan Eich.<\/p>\n

However, the web today is not the same as it was before and evolution demands civilization. TypeScript<\/a> is Microsoft’s forte for JavaScript’s civilization, adding nothing more but syntactic sugar – developers on insulin be fore warned<\/em> – for static typing to meet the need(s) (Microsoft does not provide reference to this need!<\/em>) of JavaScript teams<\/a> that build and maintain large scale JavaScript applications.<\/p>\n

This blog is a primer to TypeScript, just enough sugar to make you mobile – not agile – so that you can, like me, understand the code written by other in TypeScript, and write your\u00a0own code too. So let’s begin.<\/p>\n

It’s all about types<\/h3>\n

Types in TypeScript are an extension over that provided by JavaScript.\u00a0We have<\/p>\n

    \n
  • boolean<\/code> for booleans<\/li>\n
  • number<\/code> for numbers – decimal, hexa, octa, binary<\/li>\n
  • string<\/code> for strings<\/li>\n
  • enum<\/code> for enumerative values<\/li>\n
  • any<\/code> for unrestrictive type and many more …<\/li>\n<\/ul>\n

    We annotate a variable with its type while declaration. The grammar for this construct is <scope identifier> <variable identifier> : <type identifier><\/em>. Here’s how we do that in code:<\/p>\n

    [code lang=”js”]
    \n —— scope identifier (e.g. var, let)
    \n| \t —— variable identifier
    \n| \t| \t\t \t \t\t —— type identifier
    \n| \t| \t\t\t \t\t|
    \nvar isJavaScriptAwesome: boolean;
    \nconst withoutAnyDoubt: boolean = true;
    \nlet isTypeScriptASuperSetOfJavaScript : boolean = false;<\/p>\n

    function echo(sayTheWords: string) {
    \n\t\/\/ All (wo)men must die!
    \n}<\/p>\n

    echo(‘Valar Morghulis’);<\/p>\n

    isJavaScriptAwesome = withoutAnyDoubt;
    \n\/\/ This will be a TypeScript compiler error though
    \nisJavaScriptAwesome = 20
    \n[\/code]<\/p>\n

    Although the last statement is a compiler error, it will be processed and a valid JavaScript file will be generated as there is no notion of types inherent to the language. However, this definitely help developers in discovering and avoiding author time errors that previously were discoverable only during run time.<\/p>\n

    We can similarly define the structure of our JavaScript code through TypeScript’s rich type vocabulary. The TypeScript compiler will try to infer the structure of JavaScript code and provide valuable hints, tooling in terms of intellisense, code-completion, warnings and\/or error\u00a0etc, through mechanism dubbed as duck typing<\/strong><\/em>. Here’s how we can define type for an object using interface<\/code>s provided by TypeScript.<\/p>\n

    [code lang=”js”]
    \n\/**
    \nDefining structure for a Person object. The object:
    \n – must have a `name` key which can only be assigned a string values
    \n – can have an optional(see ? mark) `age` key of type number
    \n – must have an `address` key the type of which is not known or not restricted by the compiler
    \n*\/<\/p>\n

    interface Person {
    \n\tname: string,
    \n\tage?: number,
    \n\taddress: any
    \n}<\/p>\n

    \/\/ defines a function that accepts an argument of type Person
    \nfunction displayPersonInfo(person: Person) {
    \n\t\/\/ logic to do the magic
    \n}<\/p>\n

    var p: Person = {
    \n\tname: ‘Mr X in Bombay’,
    \n\taddress: [
    \n\t\t‘A deprecated steet’,
    \n\t\t‘on lonesome locality’,
    \n\t\t‘in the vicinity of’,
    \n\t\t‘erstwhile Bombay’
    \n\t]
    \n}<\/p>\n

    displayPersonInfo(p);<\/p>\n

    \/\/ we can also write
    \ndisplayPersonInfo({
    \n\tname: ‘Rocket Singh’,
    \n\tage: 40,
    \n\taddress: {}
    \n});<\/p>\n

    \/\/ this is error, required parameter missing
    \ndisplayPersonInfo();<\/p>\n

    \/\/ this too, this aint quack like a duck!
    \ndisplayPersonInfo({
    \n\tfirstName: ‘Rocket’
    \n});
    \n[\/code]<\/p>\n

    Now that we have seen a glimpse of the TypeScript’s vocab, here are some common use cases.<\/p>\n

    Defining variable types<\/h3>\n

    [code lang=”js”]
    \nlet amIDumb: boolean = true;
    \nlet binaryDecision: number = 0b01;
    \nlet whatIsTheColorOfSky: string = ‘blue’ \/\/ are you sure?<\/p>\n

    const theNinjas: string[] = [‘Doug Crockford’, ‘Kyle Simpson’, ‘John Resig’];
    \nconst theSamurais: Array&lt;string&gt; = [‘Ryan Dhal’, ‘Misko’];<\/p>\n

    var assignMeAnything: any = ‘Typeless in a typed world’;
    \nassignMeAnything = {};
    \nassignMeAnything = [];
    \nassignMeAnything = 3.14159;<\/p>\n

    let deVoid: void = null; \/\/ null and undefined are void types
    \ndeVoid = undefined;
    \n[\/code]<\/p>\n

    Defining enums<\/h3>\n

    [code lang=”js”]
    \nenum TrafficSignal {
    \n\tGreen,
    \n\tYellow,
    \n\tLight
    \n}<\/p>\n

    let signal: TrafficSignal;<\/p>\n

    … \/\/ some code<\/p>\n

    if ( signal === TrafficSignal.Green) {
    \n\t\/\/ good to go
    \n} else {
    \n\t\/\/ don’t risk life over triffle things
    \n}
    \n[\/code]<\/p>\n

    Defining types for functions<\/h3>\n

    [code lang=”js”]
    \nfunction funcAlias(argument: type) : returnType {<\/p>\n

    }<\/p>\n

    function squareInt(input: number) : number {
    \n\treturn input * input;
    \n}
    \n[\/code]<\/p>\n

    Defining structure through interfaces<\/h3>\n
      \n
    • \n

      Type for objects<\/h4>\n

      [code lang=”js”]
      \ninterface Point {
      \n\tx: number,
      \n\ty: number
      \n}<\/p>\n

      function printCoordinates(point : Point ) : void {
      \n\tlet pointStr = `(${point.x}, ${point.y})`;
      \n\tconsole.log(pointStr);
      \n}
      \n[\/code]<\/p>\n<\/li>\n

    • \n

      Type for functions<\/h4>\n

      [code lang=”js”]
      \n\/\/ a function that works with type T and return boolean; remember generics
      \ninterface Predicate&lt;T&gt; {
      \n\t(item: T) : boolean
      \n}<\/p>\n

      \/\/ a function that takes an array of T and a predicate of T
      \n\/\/ and return an array of T
      \ninterface Filter&lt;T&gt; {
      \n\t(collection: Array&lt;T&gt;, predicate: Predicate&lt;T&gt; ) : Array&lt;T&gt;;
      \n}<\/p>\n

      let isEven: Predicate&lt;number&gt;;
      \nisEven = function (arg: number): boolean {
      \n\treturn (arg &amp; 1) == 0;
      \n}<\/p>\n

      let getEvens: Filter&lt;number&gt;;
      \ngetEvens = function(collection: number[], predicate: Predicate&lt;number&gt;) {
      \n\treturn collection.filter(isEven);
      \n}<\/p>\n

      console.log( getEvens([1,2,3,4,5,6,7], isEven) );
      \n[\/code]<\/p>\n<\/li>\n<\/ul>\n

      Similarly we can define interfaces for advanced structures like classes, but that would be too much for a primer. So enjoy the a la carte <\/em> and I promise<\/code> will serve the meal soon.<\/p>\n

      Do let me know your opinions in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"

      The evolution of JavaScript from merely a scripting language\u00a0to a general purpose programming \u00a0language is indicative of the Atwood Law.\u00a0JavaScript is a multi-paradigm object based language with roots in C, Java, Self and Scheme.\u00a0It was designed to be relaxed i.e. without a static type system. This in my opinion is a perfect rationale for a […]<\/p>\n","protected":false},"author":939,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5},"categories":[3429,1185,1994,1],"tags":[4860,55,4117],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/41532"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/939"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=41532"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/41532\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=41532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=41532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=41532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}