A simple introduction to Typescript

A brief introduction to some concepts of Typescript

TypeScript compiler

The TypeScript compiler is a JavaScript program that converts TypeScript code into plain JavaScript code. It is written in TypeScript and can be run on any platform that supports JavaScript.The TypeScript compiler is open source and available on GitHub. The compiler is developed and maintained by Microsoft and can be used from the command line, or it can be used as a plug-in for popular IDEs such as Visual Studio and WebStorm.

The TypeScript compiler can emit JavaScript code that is compatible with different JavaScript runtimes, such as Node.js, Internet Explorer, and Chrome. It can also generate source maps, which map the generated JavaScript code back to the TypeScript code. This allows for debugging of the TypeScript code in the browser.

The compiler can be configured to check for type errors, and will report errors if any are found. Type checking can be disabled if desired. The TypeScript compiler is available under the Apache 2.0 open source license.

Not a strongly-typed language

Typescript is not a strongly-typed language because it does not require variables to be declared with a specific type. This means that a variable can be declared as one type and then reassigned to a value of another type. This can lead to errors if the variable is used in a way that is not compatible with the type that it has been declared as.

A basic example to illustrate this characteristic can be shown with the type "any".

// We initialze the variable as a string.
const something: any = "Tom";

// Now it's a number. This is valid TypeScript code.
something = 42;

Compiling TypeScript to JavaScript

The TypeScript compiler takes TypeScript code and converts it into plain JavaScript code. This process is known as transpilation. The compiler first parses the TypeScript code, which checks for syntax errors. If no errors are found, the compiler then checks for type errors. If any type errors are found, the compiler will report them and exit.

If no type errors are found, the compiler will continue and emit the JavaScript code. The emitted JavaScript code will be compatible with the target JavaScript runtime that is specified.

The TypeScript compiler can also generate source maps, which map the generated JavaScript code back to the TypeScript code. This allows for debugging of the TypeScript code in the browser.

TypeScript language server

The TypeScript language server is a language server that provides features such as code completion, go-to-definition, and type checking for TypeScript projects.

The language server is required for the TypeScript compiler to be able to provide these features. Without the language server, the TypeScript compiler would only be able to provide basic features such as syntax highlighting and code formatting. The TypeScript language server is open source and available on GitHub.

Steps to create a TypeScript project

Before describing the steps, here's the command to initialize a TypeScript project in your terminal.

npx tsc --init

Description: Install the TypeScript compiler. Create a tsconfig.json file in the root of the project. This file contains the compiler options for the TypeScript compiler. Add the src directory to the tsconfig.json file. This is where the TypeScript source files will be located.

Add a main.ts file in the src directory. This is the entry point for the TypeScript program.Compile the TypeScript code by running tsc from the command line. This will generate the JavaScript files in the src directory.Run the TypeScript program by running node main.js from the command line.

Differences between TypeScript and JavaScript

There are a few key differences between TypeScript and other strongly-typed languages: TypeScript is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. This makes it easy to adopt for existing JavaScript projects.

TypeScript uses an optional type system, which means that types can be specified for variables, but it is not required. Other strongly-typed languages, such as Swift and Kotlin, use a mandatory type system, which requires all variables to be declared with a specific type.

TypeScript supports generics, which allows for type-safe collections and other data structures. This is not available in JavaScript.

When should I use Javascript instead of Typescript for coding?

There is no hard rule for when to use JavaScript or TypeScript. It is up to the developer to choose the right tool for the job. However, there are a few general guidelines that can be followed.

If a project is already written in JavaScript, it is usually best to continue using JavaScript. There is no need to convert the code to TypeScript just for the sake of using TypeScript. But keep in mind that mainting a JavaScript-project can be harder due to the lack to a type system leading to hidden bugs. Therefore it's best to consider adopting TypeScript if the project will be mainted (and extended) in the future.

If a project is starting from scratch, it is usually best to use TypeScript. This will allow for better code organization and maintenance in the long run.

Simple examples

// TypeScript.
class Person {
  name: string;
  age: number;
}

const person: Person = new Person();
const person.name = "Tom";
const person.age = 42;

// JavaScript.
var Person = function() {};
Person.prototype.name = "";
Person.prototype.age = 0;

// TypeScript.
// Here's we're also using the class, but this
// time conforming to an interface, something that
// doesn't exist in JavaScript.
interface IPerson {
  name: string;
  age: number;
}

class Person implements IPerson {
  name: string;
  age: number;
}

// JavaScript.
var IPerson = function() {};
IPerson.prototype.name = "";
IPerson.prototype.age = 0;

var Person = function() {};
Person.prototype = Object.create(IPerson);

Closing words

TypeScript is a powerful language that can help to improve the quality of your code. It is easy to get started with, and can be used on any platform that supports JavaScript. This article only gave a very brief introduction, as the language provides much more features and concepts to learn now.

Check the links in the addendum at the end of the page for some useful learning materials.

Suggestions

Related

Addendum

Languages