Skip to main content

Command Palette

Search for a command to run...

Learning TypeScript - Part 2

TypeScript's Static Type System

Updated
3 min readView as Markdown
Learning TypeScript - Part 2

Type System

In programming languages, a type system is a logical system comprising a set of rules that assigns a property called a type to the various constructs of a computer program, such as variables, expressions, functions or modules. The main purpose of a type system is to reduce possibilities for bugs in computer programs by defining interfaces between different parts of a computer program, and then checking that the parts have been connected in a consistent way. This checking can happen statically (at compile time), dynamically (at run time), or as a combination of both.

JavaScript's Dynamic Type System

Before getting to know about TypeScript's type system, we can look at JavaScript's type system so that we can understand how TypeScript's type system helps us for writing code.

const getPersonName = (person) => {
        return person.name.toUpperCase();
}
functionA();

In the above code snippet the function getPersonName function accepts a ‘person’ object and it returns the name property in upper case. This will work only when the person with the name object is passed or else we’ll get an error “VM280:1 Uncaught TypeError: Cannot read properties of undefined”. This problem could not be identified until we execute the code because of JavaScript’s type dynamic type system. The type system which checks the types during the runtime / execution of the program is known as Dynamic type system and So JavaScript possess the same

  • In JavaScript for primitive data types, there is a mechanism to find the data type of the variable during the execution time using ‘typeof’ operator. But for the functions we don’t have mechanism to identify the types.

TypeScript's Static Type system

Here comes the Typescript’s static type system into play which is completely cross platform helps to find the errors while writing the code, rather finding the bugs after the code execution. This greatly helps to avoid refactoring the large code base at the end. Static type systems try to describe the shapes and behaviors of what our values will be when we run our programs. It also constantly checks whether are we trying to access the property which does not exist in an object or whether a function call is made on a simple variables that doesn’t have functions in it.

const message = "hello";
console.log(message());

/*
    Errors in code
    This expression is not callable.
    Type 'String' has no call signatures.
*/

TypeScript's static type system could be leveraged for editing code too. The core type checker can provide error messages and code completion as we type in the editor. It could also suggest which properties could be accessed in an object.

const user = {
    "name": "Daniel",
    "age": 34
}
console.log(user.location)
/*
    Errors in code
    Property 'location' does not exist on type '{ name: string; age: number; }'.
*/

TypeScript’s static type checker also helps to find the legitimate bugs. Legitimate bugs like typo errors which we make during the development.

const user = {
    "name": "Daniel",
    "age": 34
}
console.log(user.name.toLocalLowerCase())
/*
    Property 'toLocalLowerCase' does not exist on type 'string'. 
    Did you mean 'toLocaleLowerCase'?
*/

Here the type checker automatically provides us some suggestions when we make mistakes.

function flipCoin() {
  return Math.random < 0.5;
}
/*
    Operator '<' cannot be applied to types '() => number' and 'number'
*/

TypeScript helps to identify the issues on the function calls, and also provides the right context of usage while calling the functions.

const value = Math.random() < 0.5 ? "a" : "b";
if (value !== "a") {
  // ...
} else if (value === "b") {
}
/*
    This condition will always return 'false' 
    since the types '"a"' and '"b"' have no overlap.
*/

We can also able to identify the logical errors in our code and lot more during the development.

Thanks for reading. We can see more about TypeScript in future!.