From scratch to learn this programming language: TypeScript

Haywo
4 min readOct 21, 2022

--

Key points:

1. know the TypeScript
2. install TypeScript

I. What is TypeScript?

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open-source.” This definition of TS is from the official website. In the other words, TS is an object-oriented language and provides a type system and support for ES6. It was developed and maintained by Microsoft and the code is open-sourced on GitHub.

**ECMAScript 2015 = ES6 = ECMAScript 6 : was the second major revision to JavaScript**

II. Why use TypeScript?

📌 TypeScript increased the readability and maintainability of code

  • The type system is accessible for reading, most functions can be understood how to use by looking at the type definition.
  • Most errors can be found at compile time, which is better than found at execution time.
  • Enhanced editor and IDE feature, including code completion, hints, refactoring, etc.
  • TypeScript is also closer in syntax to backend languages like Java and Scala. This helps back-end developers write front-end code faster.

📌 TypeScript has high compatibility

  • TypeScript was born from JavaScript, so we can directly rename the file from a .js file extension to a .ts file extension.
  • You can define many types from simple to complex (i.e., union, generics)
  • Generate JavaScript files even though the TypeScript files compile errors
  • Compatible with the third-party library, even if the library is not written in TypeScript. You also can create different types for TypeScript to read and use.

📌 TypeScript has an active community

  • TypeScript has support for the latest JavaScript features from ECMAScript 2015. It includes features from ES6 and ES7 that can run in ES5-level JavaScript engines like Node.js. This offers a massive advantage of using features from future JavaScript versions in current JavaScript engines.
  • Angular 2 developed by Google is written in TypeScript.

📌 TypeScript remarkable features

  1. Static type-checking: TypeScript uses static typing. This is done using type annotations.
  • Dynamic typing means that type checking is done at runtime, and any wrong type in this language often leads to runtime errors.
⚠️ JS: uncaught type error, because a.split is not a function   let a=1;
a.split(' '); // it will cause error at runtime
  • Static typing means that the type of each variable can be checked during compiling, and if there is any type of error in this language, often display syntax errors.
  • Due to TypeScript needs to be compiled into JavaScript before running, and type-checking will perform during the compilation phase, so TypeScript is static type-checking.
⚠️ TS: display error when compiling  let b:number =1;
  b.split(' '); //Property "split" does not exist on type "number"

2. Multi-platform : TypeScript runs on any platform, engine, or browser that JavaScript runs on. The TypeScript compiler can be installed on any Operating System such as Windows, macOS, and Linux.

3. Object-Oriented Language : TypeScript provides powerful features such as Classes, Interfaces, and Modules. You can write pure object-oriented code for client-side as well as server-side development.

4. Coexist with JS : TypeScript code can be called from an existing JavaScript code. TypeScript also works with existing JavaScript frameworks and libraries without any issues.

5. Type inference : TypeScript is a typed language. However, it is not mandatory to specify the type of a variable. TypeScript infers types of variables when there is no explicit information available in the form of type annotations.

⚠️ type inference in the primitive type  let a = "Hello";
  let b = 5;
  a = b;
  //it will show an error because type 'number' can not be assigned
  to type "string"
⚠️ type inference in the array type  const arr = [0, 1, "heeha"];
  //this is an array which type is 'number|string' (a union type)
  arr.push("CowBoy"); //it works
  arr.push(false); //it will show an error because Boolean is not a
            part of union

III. Where & When can use TypeScript?

TypeScript is compiled into JavaScript. Therefore, TS can be used anywhere JS could be used: both the front-end and the back-end. According to the introduction above, there are 4 scenarios to choose TypeScript:

1. When you have a huge codebase. Such as Big applications

2. When you accustom statically typed language. Such as C#, Java

3. When you need speed and multiple browsers

4. When frameworks encourage TypeScript

IV. How to use TypeScript?

A TypeScript file can be written in any code editor, but its compiler needs to be installed on your platform. The name of TypeScript file is written with “.ts” extension.

Once you installed it, use the command: tsc <filename>.ts compiles the TS code into a plain JavaScript file. Next, you can include JavaScript in the HTML and run it on any browser.

V. Video

In this video, you will learn :

1. How to install TypeScript

2. Create a simple TypeScript and compile into JavaScript

https://www.youtube.com/watch?v=-fKGJu9O-0c

--

--