{"id":3709,"date":"2020-05-04T14:10:40","date_gmt":"2020-05-04T14:10:40","guid":{"rendered":"http:\/\/codethataint.com\/blog\/?p=3709"},"modified":"2020-05-17T14:56:22","modified_gmt":"2020-05-17T14:56:22","slug":"type-script-basic-commands","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/type-script-basic-commands\/","title":{"rendered":"Type Script Basics"},"content":{"rendered":"

Type Script Command Line<\/strong><\/p>\n

\r\n\/\/Install Typescript\r\n>>npm install -g typescript\r\n\r\n\/\/Check version of Type Script\r\n>>tsc -v\r\n\r\n\/\/Compile Typescript Code\r\n\/\/this would generate javascript file test.js\r\n>>tsc test.ts\r\n\r\n\/\/Running js file\r\n>>node test.js\r\n<\/pre>\n
Data Types in Typescript<\/strong>
\nTypescript allows to declare variable static(optional).If you use static typing then IDE will allow for type safety at compile time.<\/p>\n
\r\n\/\/Declaring String\r\nlet Name: String = "Mugil"; \r\n\r\n\/\/Declaring Number\r\nlet Age: number = 25;\r\n\r\n\/\/Declaring Boolean\r\nlet Gender: boolean = true;\r\n\r\n\/\/Declaring Any datatype\r\nlet Street: any = 1 (or) "First" (or) true;\r\n<\/pre>\n
var is Function Scoped and let is block scoped<\/em>
\nUsing var<\/strong><\/p>\n
\r\nvar foo = 123;\r\nif (true) {\r\n    var foo = 456;\r\n}\r\n\r\nconsole.log(foo); \/\/ 456\r\n<\/pre>\n
Using let<\/strong><\/p>\n
\r\nlet foo = 123;\r\nif (true) {\r\n    let foo = 456;\r\n\r\n}\r\nconsole.log(foo); \/\/ 123\r\n<\/pre>\n
\r\n\/\/Determined by Type Inference\r\nvar firstName = 'Mugil';\r\nvar age = 33;\r\n\r\n\/\/Determined by Annotation\r\nvar LastName: string = 'vannan';\r\n\r\n\/\/Not yet Determined \r\nvar Location;\r\n\r\n\/\/Not yet Determined \r\nvar Location;\r\n\r\nvar previousExp = 6 ;\r\n\r\n\/\/If you add a number and string it would be string irrespective of order\r\nvar totalExp = previousExp + "five";\r\n\r\n\/\/result in error\r\nvar Exp: number = previousExp + "five";\r\n\r\nconsole.log("Total Exp - " + totalExp)\r\n<\/pre>\n
Interface<\/strong><\/p>\n
\r\ninterface Person{\r\n    name: String,\r\n    age: number,\r\n    pincode: any \r\n}\r\n\r\nvar objPerson:Person = {name: "Mugil", age:33, pincode:600018}\r\n\r\nconsole.log(objPerson.pincode);\r\n<\/pre>\n
Class<\/strong><\/p>\n
\r\nclass Person{\r\n    private name: string;\r\n    \r\n    constructor(pname: string){\r\n        this.name=pname;\r\n    }    \r\n\r\n    displayPerson(): void{\r\n        console.log(this.name);\r\n    }\r\n}\r\n\r\nvar objPerson = new Person('Piggy');\r\nobjPerson.displayPerson();\r\n<\/pre>\n
Importing Namespaces and Modules<\/strong><\/p>\n
    \n
  1. Namespace are not widely used for development rather they are used internally. Modules are widely used for development<\/li>\n
  2. In namespace you want to use would be imported using reference tag as in ArithmeticTester.ts, the one below. (Output is throwing error)<\/li>\n
  3. When using modules the function would be directly added in module ts file as in Arithmetic.ts and referred using import in ArithmeticTester.ts<\/li>\n
  4. Modules would be frequently used, the format would be import {FUNCTION_NAME} from ‘MODULENAME’ <\/li>\n<\/ol>\n
    Namespace Example<\/strong>
    \nArithmetic.ts<\/strong><\/p>\n
    \r\nnamespace Arithmetic{\r\n    export function Add(pNum1: number, pNum2: number){\r\n        return pNum1+pNum2;\r\n    }\r\n}\r\n<\/pre>\n
    ArithmeticTester.ts<\/strong><\/p>\n
    \r\n\/\/\/ <reference path=".\/Arithmetic.ts" \/>\r\n\r\nlet Sum = Arithmetic.Add(5,6);\r\nconsole.log(Sum);\r\n\r\n<\/pre>\n
    Modules Example<\/strong>
    \nArithmetic.ts<\/strong><\/p>\n
    \r\nexport function Add(pNum1: number, pNum2: number){\r\n    return pNum1+pNum2;\r\n}\r\n<\/pre>\n
    ArithmeticTester.ts<\/strong><\/p>\n
    \r\nimport {Add} from '.\/Arithmetic'\r\n\r\nlet Sum = Add(5,6);\r\nconsole.log(Sum);\r\n<\/pre>\n
    Output<\/strong><\/p>\n
    \r\n11\r\n<\/pre>\n
    Functions Example<\/strong><\/p>\n
      \n
    1. Arguments to function is optional. You can either set default value incase you are not sure about argument passed like in Add function<\/li>\n
    2. You are still allowed to not pass any argument using ?<\/em> in such case you would end up with different out put at runtime. NAN incase of number or undefined incase of string<\/li>\n
    3. return type of function is not mandatory and its optional as in displayName function<\/li>\n<\/ol>\n
      Arithmetic.ts<\/strong><\/p>\n
      \r\n\/\/pNum2 would be considered as 0 incase only one argument is passed\r\nfunction Add(pNum1: number, pNum2: number=0){\r\n    return pNum1+pNum2;\r\n}\r\n\r\nfunction displayName(firstName: string, lastName? : string) : void{\r\n    console.log("Her name is " + firstName + " "+ lastName); \r\n}\r\nconsole.log(Add(5, 8));\r\nconsole.log(Add(5));\r\ndisplayName("Piggy");\r\n<\/pre>\n
      Output<\/strong><\/p>\n
      \r\n13\r\n5\r\nHer name is Piggy undefined\r\n<\/pre>\n
      How to ensure type safety of arguments while using function<\/strong>
      \nWhile defining function you may want to ensure the argument type passed.In such case you should declare the argument type the function accepts as one below.<\/p>\n
      In the below code you could see display name with two parameters(firstName and lastName). TypeSafety of second parameter is ensured by making it as string whereas first one could
      \nbe of anytype. If you try to pass something other than string as argument to second parameter then compiler would complain for error.<\/p>\n
      \r\nclass SampleScript {\r\n    displayName: (firstName, lastName: string) => void = function(firstName, lastName) {\r\n        console.log("My Name is " + firstName + ' ' + lastName);\r\n    }\r\n}\r\n\r\nwindow.onload = function () {\r\n    var objSampleScript = new SampleScript();\r\n    objSampleScript.displayName(101,'Vannan');\r\n}\r\n<\/pre>\n
      Output<\/strong><\/p>\n
      \r\nMy Name is 101 Vannan\r\n<\/pre>\n
      Object Types<\/strong>
      \nObject types could be function, module, class, interface and literal literals<\/p>\n
      Object Literals<\/strong><\/p>\n
      \r\n var square={h:10, width:10}\r\n var rectangle:Object ={h:10, width:20}\r\n\r\n \/\/delcaring triangle as object literal\r\n var triangle:{};\r\n triangle={side1:10, side2:10, side3:10};\r\n\r\n<\/pre>\n
      Functions as Object<\/strong><\/p>\n
      \r\nvar multiply = function (num: number) {\r\n        return num * num;\r\n};\r\n\r\n\/\/declaration of divide function object\r\nvar divide: Function;\r\n\r\ndivide = function (num1: number, num2: number) {\r\n   return num1 \/ num2;\r\n};\r\n<\/pre>\n
      Object with variable and function<\/strong><\/p>\n
      \r\n var rectangle = {\r\n        height:10,\r\n        width:20,\r\n        calculateArea: function() {\r\n            return this.height* this.width;\r\n        }\r\n    };\r\n\r\n    console.log(rectangle.calculateArea());\r\n<\/pre>\n
      \r\n   var experience = {        \r\n        sendExp: function (exp?: number) {\r\n            if (exp < 3)\r\n                return 'Beginner';\r\n            else if (exp > 3 && exp < 6)\r\n                return 'Intermediate';\r\n            else\r\n                return 'Fresher'; \r\n\r\n        }\r\n    };\r\n\r\n    console.log(experience.sendExp(5));\r\n    console.log(experience.sendExp());\r\n<\/pre>\n
      Output<\/strong><\/p>\n
      \r\nIntermediate\r\nFresher\r\n<\/pre>\n
      Function taking Object as parameter<\/strong><\/p>\n
      \r\nvar experience = {\r\n        sendExp: function (job: { skill: String, exp?: number}) {\r\n            if (job.exp < 3)\r\n                return 'Beginner in ' + job.skill;\r\n            else if (job.exp > 3 && job.exp < 6)\r\n                return 'Intermediate in ' + job.skill;\r\n            else\r\n                return 'Fresher'; \r\n\r\n        }\r\n    };\r\n\r\n    console.log(experience.sendExp({ skill: 'Java' }));\r\n    console.log(experience.sendExp({ skill: 'Java', exp: 5 }));\r\n<\/pre>\n
      Output<\/strong><\/p>\n
      \r\nFresher\r\nIntermediate in Java\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Type Script Command Line \/\/Install Typescript >>npm install -g typescript \/\/Check version of Type Script >>tsc -v \/\/Compile Typescript Code \/\/this would generate javascript file test.js >>tsc test.ts \/\/Running js file >>node test.js Data Types in Typescript Typescript allows to declare variable static(optional).If you use static typing then IDE will allow for type safety at… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[296],"tags":[],"class_list":["post-3709","post","type-post","status-publish","format-standard","hentry","category-typescript"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=3709"}],"version-history":[{"count":5,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3709\/revisions"}],"predecessor-version":[{"id":3747,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3709\/revisions\/3747"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=3709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=3709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=3709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}