{"id":1655,"date":"2022-08-11T08:52:10","date_gmt":"2022-08-11T08:52:10","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1655"},"modified":"2022-08-11T08:52:10","modified_gmt":"2022-08-11T08:52:10","slug":"introduction-to-typescript","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2022\/08\/11\/introduction-to-typescript\/","title":{"rendered":"Introduction to TypeScript"},"content":{"rendered":"<p>TypeScript\u00c2\u00a0is an\u00c2\u00a0open-source\u00c2\u00a0programming language\u00c2\u00a0developed and maintained by\u00c2\u00a0Microsoft. It is a strict syntactical\u00c2\u00a0superset\u00c2\u00a0of\u00c2\u00a0JavaScript, and adds optional static typing to the language.<\/p>\n<p>TypeScript is designed for development of large applications and\u00c2\u00a0transcompiles\u00c2\u00a0to JavaScript.\u00c2\u00a0As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. TypeScript may be used to develop JavaScript applications for both\u00c2\u00a0client-side\u00c2\u00a0and\u00c2\u00a0server-side\u00c2\u00a0execution (as with\u00c2\u00a0Node.js\u00c2\u00a0or\u00c2\u00a0Deno).<\/p>\n<p>There are multiple options available for transcompilation. Either the default TypeScript Checker can be used,\u00c2\u00a0or the\u00c2\u00a0Babel\u00c2\u00a0compiler can be invoked to convert TypeScript to JavaScript.<\/p>\n<p>TypeScript supports definition files that can contain type information of existing JavaScript libraries, much like\u00c2\u00a0C++\u00c2\u00a0header files can describe the structure of existing\u00c2\u00a0object files. This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities. There are third-party header files for popular libraries such as\u00c2\u00a0jQuery,\u00c2\u00a0MongoDB, and\u00c2\u00a0D3.js. TypeScript headers for the\u00c2\u00a0Node.js\u00c2\u00a0basic modules are also available, allowing development of\u00c2\u00a0Node.js\u00c2\u00a0programs within TypeScript.<\/p>\n<p>The TypeScript compiler is itself written in TypeScript and\u00c2\u00a0compiled\u00c2\u00a0to JavaScript. It is licensed under the\u00c2\u00a0Apache License 2.0.<\/p>\n<p>TypeScript is included as a first-class programming language in\u00c2\u00a0Microsoft Visual Studio\u00c2\u00a02013 Update 2 and later, beside\u00c2\u00a0C#\u00c2\u00a0and other Microsoft languages.\u00c2\u00a0An official extension allows Visual Studio 2012 to support TypeScript as well.<\/p>\n<p>Anders Hejlsberg, lead architect of\u00c2\u00a0C#\u00c2\u00a0and creator of\u00c2\u00a0Delphi\u00c2\u00a0and\u00c2\u00a0Turbo Pascal, has worked on the development of TypeScript.<\/p>\n<p>TypeScript originated from the shortcomings of JavaScript for the development of large-scale applications both at Microsoft and among their external customers.\u00c2\u00a0Challenges with dealing with complex JavaScript code led to demand for custom tooling to ease developing of components in the language.<\/p>\n<p>TypeScript developers sought a solution that would not break compatibility with the standard and its cross-platform support. Knowing that the current ECMAScript standard proposal promised future support for\u00c2\u00a0class-based programming, TypeScript was based on that proposal. That led to a JavaScript compiler with a set of syntactical language extensions, a superset based on the proposal, that transforms the extensions into regular JavaScript. In this sense TypeScript was a preview of what to expect of ECMAScript 2015. A unique aspect not in the proposal, but added to TypeScript, is optional\u00c2\u00a0static typing\u00c2\u00a0that enables static language analysis, which facilitates tooling and IDE support.<\/p>\n<p><span id=\"Compatibility_with_JavaScript\" class=\"mw-headline\">Compatibility with JavaScript:<\/span><\/p>\n<p>TypeScript is a strict superset of\u00c2\u00a0ECMAScript\u00c2\u00a02015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript.\u00c2\u00a0As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. By default the compiler targets ECMAScript 5, the current prevailing standard, but is also able to generate constructs used in ECMAScript 3 or 2015.<\/p>\n<p>With TypeScript, it is possible to use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript-generated code from other JavaScript.\u00c2\u00a0Type declarations for these libraries are provided with the source code.<\/p>\n<p><span id=\"Type_annotations\" class=\"mw-headline\">Type annotations:<\/span><\/p>\n<p>TypeScript provides\u00c2\u00a0static typing\u00c2\u00a0through type annotations to enable\u00c2\u00a0type checking\u00c2\u00a0at\u00c2\u00a0compile time. This is optional and can be ignored to use the regular\u00c2\u00a0dynamic typing\u00c2\u00a0of JavaScript.<\/p>\n<p>The annotations for the primitive types are\u00c2\u00a0<code>number<\/code>,\u00c2\u00a0<code>boolean<\/code>\u00c2\u00a0and\u00c2\u00a0<code>string<\/code>. Weakly- or dynamically-typed structures are of type\u00c2\u00a0<code>any<\/code>.<\/p>\n<p>Type annotations can be exported to a separate\u00c2\u00a0declarations file\u00c2\u00a0to make type information available for TypeScript scripts using types already compiled into JavaScript. Annotations can be declared for an existing JavaScript library, as has been done for\u00c2\u00a0Node.js\u00c2\u00a0and\u00c2\u00a0jQuery.<\/p>\n<p>The TypeScript compiler makes use of\u00c2\u00a0type inference\u00c2\u00a0to infer types when types are not given. For example, the\u00c2\u00a0<code>add<\/code>\u00c2\u00a0method in the code above would be inferred as returning a\u00c2\u00a0<code>number<\/code>\u00c2\u00a0even if no return type annotation had been provided. This is based on the static types of\u00c2\u00a0<code>left<\/code>\u00c2\u00a0and\u00c2\u00a0<code>right<\/code>\u00c2\u00a0being\u00c2\u00a0<code>numbers<\/code>, and the compiler&#8217;s knowledge that the result of adding two\u00c2\u00a0<code>numbers<\/code>\u00c2\u00a0is always a\u00c2\u00a0<code>number<\/code>. However, explicitly declaring the return type allows the compiler to verify correctness.<\/p>\n<p><span id=\"Declaration_files\" class=\"mw-headline\">Declaration files:<\/span><\/p>\n<p>When a TypeScript script gets compiled there is an option to generate a\u00c2\u00a0declaration file\u00c2\u00a0(with the extension\u00c2\u00a0<code>.d.ts<\/code>) that functions as an\u00c2\u00a0interface\u00c2\u00a0to the\u00c2\u00a0components\u00c2\u00a0in the compiled JavaScript. In the process the compiler strips away all function and method bodies and preserves only the signatures of the types that are exported. The resulting declaration file can then be used to describe the exported virtual TypeScript types of a JavaScript library or module when a third-party developer consumes it from TypeScript.<\/p>\n<p>The concept of declaration files is analogous to the concept of\u00c2\u00a0header file\u00c2\u00a0found in\u00c2\u00a0C\/C++.<\/p>\n<p><span id=\"Classes\" class=\"mw-headline\">Classes:<\/span><\/p>\n<p>TypeScript supports ECMAScript 2015 classes that integrate the optional type annotations support.<\/p>\n<p><span id=\"Modules_and_namespaces\" class=\"mw-headline\">Modules and namespaces:<\/span><\/p>\n<p>TypeScript distinguishes between modules and namespaces. Both features in TypeScript support encapsulation of classes, interfaces, functions and variables into containers. Namespaces (formerly internal modules) utilize\u00c2\u00a0immediately-invoked function expression\u00c2\u00a0of JavaScript to encapsulate code, whereas modules (formerly external modules) leverage JavaScript library patterns to do so (AMD\u00c2\u00a0or\u00c2\u00a0CommonJS).<\/p>\n<p><span id=\"Compiler\" class=\"mw-headline\">Compiler:<\/span><\/p>\n<p>The TypeScript compiler, named\u00c2\u00a0<code>tsc<\/code>, is\u00c2\u00a0written in TypeScript. As a result, it can be compiled into regular JavaScript and can then be executed in any JavaScript engine (e.g. a browser). The compiler package comes bundled with a script host that can execute the compiler. It is also available as a\u00c2\u00a0Node.js\u00c2\u00a0package that uses Node.js as a host.<\/p>\n<p>There is also an\u00c2\u00a0alpha\u00c2\u00a0version of a client-side compiler in JavaScript, which executes TypeScript code on the fly, upon page load.<\/p>\n<p>The current version of the compiler supports ECMAScript 5 by default. An option is allowed to target ECMAScript 2015 to make use of language features exclusive to that version (e.g. generators). Classes, despite being part of the ECMAScript 2015 standard, are available in both modes.<\/p>\n<p>The above is a brief about TypeScript. Watch this space for more updates on the latest trends in Technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TypeScript\u00c2\u00a0is an\u00c2\u00a0open-source\u00c2\u00a0programming language\u00c2\u00a0developed and maintained<\/p>\n","protected":false},"author":1,"featured_media":1657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[910,7,370],"tags":[911,18,371],"class_list":["post-1655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source-programming-language","category-techtrends","category-typescript","tag-open-source-programming-language","tag-technology","tag-typescript"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1655"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1655\/revisions"}],"predecessor-version":[{"id":1656,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1655\/revisions\/1656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1657"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}