TypeScript Compiler:<\/strong> Two Jobs, One Goal: checking for type errors and compiling to JavaScript.<\/p>\n In the TypeScript realm, the compiler has two main tasks:<\/p>\n These two processes are independent of each other. Types do not affect the execution of the code in a JavaScript engine, as they are completely erased during compilation. TypeScript can still output JavaScript even in the presence of type errors. Here is an example of TypeScript code with a type error:<\/p>\n However, it can still produce executable JavaScript output:<\/p>\n You can’t inspect TypeScript types during runtime. For example:<\/p>\n TypeScript types disappear after compilation, running this code in JavaScript isn’t possible. To detect types at runtime, we use other methods, like TypeScript’s ‘tagged union’<\/strong> feature. For example:<\/p>\n The ‘kind’ property serves as a runtime value for distinguishing objects in JavaScript..<\/p>\n It is also possible for a value at runtime to have a type different from the one declared in the type declaration.<\/p>\n For example, if a developer misinterprets an API type and adds incorrect annotations. TypeScript, being an extension of JavaScript, allows us to use the ‘class’ keyword both as a type and as an actual value in runtime.<\/p>\n In JavaScript, when you have a ‘class,’<\/strong> it comes with a ‘prototype’<\/strong> property. You can use the ‘instanceof’<\/strong> operator to check if this ‘prototype’<\/strong> property of a constructor is anywhere in the object’s ‘prototype’<\/strong> chain.<\/p>\n Now, the cool thing about TypeScript is that it doesn’t impact how fast your code runs because it erases all the type information during compilation. However, it does add some extra work during the build process.<\/p>\n Speaking of TypeScript’s superpowers, it can take your fancy, modern JavaScript code and turn it into an older, more universally compatible version. We call this ‘downleveling.’ This way, you get to enjoy the latest JavaScript features while still being friends with older systems.<\/p>\n TypeScript translates your code into older JavaScript versions, it might make it run a tad slower than the original. Now, here are some cool modern JavaScript features that TypeScript supports:<\/p>\n TypeScript code generation TypeScript Compiler: Two Jobs, One Goal: checking for type errors and compiling to JavaScript. In the TypeScript realm, the compiler has two main tasks: Error […]<\/p>\n","protected":false},"author":1,"featured_media":2047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[87,25,175],"tags":[127,108,126,64,181,178,176],"class_list":["post-2046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-programming","category-typescript","tag-easy-coding","tag-easy-coding-school","tag-easycoding","tag-easycodingschool","tag-typescript-code-generation","tag-typescript-tutorial","tag-typescritp"],"yoast_head":"\n\n
const add = (a: number, b: number): number => a + b;\r\nconst result = add('x', 'y'); \/\/ Argument of type 'string' is not assignable to parameter of type 'number'.<\/code><\/pre>\n<\/div>\n'use strict';\r\nconst add = (a, b) => a + b;\r\nconst result = add('x', 'y'); \/\/ xy<\/code><\/pre>\n<\/div>\ninterface Animal {\r\nname: string;\r\n}\r\ninterface Dog extends Animal {\r\nbark: () => void;\r\n}\r\ninterface Cat extends Animal {\r\nmeow: () => void;\r\n}\r\nconst makeNoise = (animal: Animal) => {\r\nif (animal instanceof Dog) {\r\n\/\/ 'Dog' only refers to a type, but is being used as a value here.\r\n\/\/ ...\r\n}\r\n};<\/code><\/pre>\n<\/div>\ninterface Dog {\r\nkind: 'dog'; \/\/ Tagged union\r\nbark: () => void;\r\n}\r\ninterface Cat {\r\nkind: 'cat'; \/\/ Tagged union\r\nmeow: () => void;\r\n}\r\ntype Animal = Dog | Cat;\r\n\r\nconst makeNoise = (animal: Animal) => {\r\nif (animal.kind === 'dog') {\r\nanimal.bark();\r\n} else {\r\nanimal.meow();\r\n}\r\n};\r\n\r\nconst dog: Dog = {\r\nkind: 'dog',\r\nbark: () => console.log('bark'),\r\n};\r\nmakeNoise(dog);<\/code><\/pre>\n<\/div>\nclass Animal {\r\nconstructor(public name: string) {}\r\n}\r\nclass Dog extends Animal {\r\nconstructor(public name: string, public bark: () => void) {\r\nsuper(name);\r\n}\r\n}\r\nclass Cat extends Animal {\r\nconstructor(public name: string, public meow: () => void) {\r\nsuper(name);\r\n}\r\n}\r\ntype Mammal = Dog | Cat;\r\n\r\nconst makeNoise = (mammal: Mammal) => {\r\nif (mammal instanceof Dog) {\r\nmammal.bark();\r\n} else {\r\nmammal.meow();\r\n}\r\n};\r\n\r\nconst dog = new Dog('Fido', () => console.log('bark'));\r\nmakeNoise(dog);<\/code><\/pre>\n<\/div>\nModern JavaScript Now (Downleveling)<\/h3>\n
\n