{"id":2173,"date":"2017-03-20T10:18:13","date_gmt":"2017-03-20T10:18:13","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=2173"},"modified":"2017-03-20T10:50:13","modified_gmt":"2017-03-20T10:50:13","slug":"typescript","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2017\/03\/20\/typescript\/","title":{"rendered":"TypeScript"},"content":{"rendered":"

Ref: https:\/\/www.typescriptlang.org\/docs\/tutorial.html
\nInstallation:<\/p>\n

    \n
  1. Install from npm\n
    teddy@teddy-K43SJ:~$ sudo npm install -g typescript\r\n[sudo] password for teddy: \r\n\/usr\/local\/bin\/tsc -> \/usr\/local\/lib\/node_modules\/typescript\/bin\/tsc\r\n\/usr\/local\/bin\/tsserver -> \/usr\/local\/lib\/node_modules\/typescript\/bin\/tsserver\r\n\/usr\/local\/lib\r\n\u2514\u2500\u2500 typescript@2.2.1<\/pre>\n
    Check the typescript version:<\/p>\n
    teddy@teddy-K43SJ:~$ tsc --version\r\nVersion 2.2.1<\/pre>\n
     <\/li>\n
  2. Try it via Visual Studio Code.
    \nCreate a new file ‘greeter.ts’ and here is the content:<\/p>\n
    function greeter(person) {\r\n    return \"Hello, \" + person;\r\n}\r\n\r\nvar user = \"Jane User\";\r\n\r\ndocument.body.innerHTML = greeter(user);<\/pre>\n
    Then compile it via<\/p>\n
    teddy@teddy-K43SJ:~\/Documents\/node\/typescript$ tsc greeter.ts<\/pre>\n
    It’d create a new js file: greeter.js\"\"<\/a>greeter.js has same content with greeter.ts.<\/li>\n
  3. TypeScript Interface
    \nCreate a new file ‘greeter-interface.ts’:<\/p>\n
    interface Person{\r\n    firstName: string;\r\n    lastName: string;\r\n}\r\n\r\nfunction greeter(person: Person){\r\n    return \"Hello, \" + person.firstName + \" \" + person.lastName;\r\n}\r\n\r\nvar user = {firstName: \"Jane\", lastName: \"Doe\"};\r\n\r\ndocument.body.innerHTML = greeter(user);<\/pre>\n
    Then compile it<\/p>\n
    teddy@teddy-K43SJ:~\/Documents\/node\/typescript$ tsc greeter-interface.ts<\/pre>\n
    Here is the output ‘greeter-interface.js’<\/p>\n
    function greeter(person) {\r\n    return \"Hello, \" + person.firstName + \" \" + person.lastName;\r\n}\r\nvar user = { firstName: \"Jane\", lastName: \"Doe\" };\r\ndocument.body.innerHTML = greeter(user);<\/pre>\n
    \"\"<\/a><\/li>\n
  4. TypeScript Class
    \nCreate a new file ‘greeter-class.ts’:<\/p>\n
    class Student {\r\n    fullName: string;\r\n    constructor(public firstName, public middleInitial, public lastName){\r\n        this.fullName = firstName + \" \" + middleInitial + \" \" + lastName;\r\n    }\r\n}\r\n\r\ninterface Person{\r\n    firstName: string;\r\n    lastName: string;\r\n}\r\n\r\nfunction greeter(person: Person){\r\n    return \"Hello, \" + person.firstName + \" \" + person.lastName;\r\n}\r\n\r\nvar user = new Student(\"Jane\", \"M.\", \"Doe\");\r\n\r\ndocument.body.innerHTML = greeter(user);<\/pre>\n
    Then compile it<\/p>\n
    teddy@teddy-K43SJ:~\/Documents\/node\/typescript$ tsc greeter-class.ts<\/pre>\n
    Here is the output ‘greeter-class.js’<\/p>\n
    var Student = (function () {\r\n    function Student(firstName, middleInitial, lastName) {\r\n        this.firstName = firstName;\r\n        this.middleInitial = middleInitial;\r\n        this.lastName = lastName;\r\n        this.fullName = firstName + \" \" + middleInitial + \" \" + lastName;\r\n    }\r\n    return Student;\r\n}());\r\nfunction greeter(person) {\r\n    return \"Hello, \" + person.firstName + \" \" + person.lastName;\r\n}\r\nvar user = new Student(\"Jane\", \"M.\", \"Doe\");\r\ndocument.body.innerHTML = greeter(user);<\/pre>\n
    \"\"<\/a><\/li>\n
  5. Open it on your web browser
    \nCreate a new file ‘greeter.html’<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n    <head><title>TypeScript Greeter<\/title><\/head>\r\n    <body>\r\n        <script src=\"greeter-class.js\"><\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
    Then open the html file on your browser. It’d show like this:<\/p>\n
    Hello, Jane Doe<\/pre>\n
     <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Ref: https:\/\/www.typescriptlang.org\/docs\/tutorial.html Installation: Install from npm teddy@teddy-K43SJ:~$ sudo npm install -g typescript [sudo] password for teddy: \/usr\/local\/bin\/tsc -> \/usr\/local\/lib\/node_modules\/typescript\/bin\/tsc \/usr\/local\/bin\/tsserver -> \/usr\/local\/lib\/node_modules\/typescript\/bin\/tsserver \/usr\/local\/lib \u2514\u2500\u2500 typescript@2.2.1 Check the typescript version: teddy@teddy-K43SJ:~$ tsc –version Version 2.2.1   Try it via Visual Studio Code. Create a new file ‘greeter.ts’ and here is the content: function greeter(person) { return … Continue reading “TypeScript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-2173","post","type-post","status-publish","format-standard","hentry","category-typescript"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=2173"}],"version-history":[{"count":5,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2173\/revisions"}],"predecessor-version":[{"id":2181,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/2173\/revisions\/2181"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=2173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=2173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=2173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}