How To Use TypeScript to Avoid Bugs
Tags: typescript, webdev, javascript, beginners
Published: 2020-01-10 03:48:12

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

TypeScript is a superset of JavaScript that is created to address common problems that JavaScript has.

A problem that JavaScript has is that all objects have dynamic types. This means that you have no way of knowing which properties an objects has without logging it in a debugger.

This creates a lot of frustration as you have to check every object yourself, slowing down development. Without static types, you also cannot have auto-complete in your editor as there is no way to know what are in those objects with 100% certainty.

Static typing is optional so you can still use objects as hashes.

* * *

Type Checks
===========

Also, you can put any argument into your JavaScript functions, which brings the same difficulties as the dynamic types as there is no enforcement of what is passed in.

This creates problems as arguments that you’re supposed to pass in but didn’t will be undefined and then you get undefined errors. There is also nothing stopping you from passing in too many arguments.

With both checks, TypeScript makes code easier to understand and follow. You don’t have to worry about breaking things when you change code as the compiler will tell you that you got those basic errors.

In addition, dependency injection is part of TypeScript, which means you don’t have to resolve dependencies yourself. It also makes mocking dependencies easy for testing.

TypeScript provides features in the upcoming versions of JavaScript (which is not finalized yet) that might be handy for some developers.

TypeScript adds types to your objects by defining type files for your objects. It works by setting up a module and then including a `module.d.ts` file with it.

An example of this is in the [TypeScript doc](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html)s.

```typescript
// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// Project: [~THE PROJECT NAME~]
// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
/*~ This is the module template file. You should rename it to index.d.ts
 *~ and place it in a folder with the same name as the module.
 *~ For example, if you were writing a file for "super-greeter", this
 *~ file should be 'super-greeter/index.d.ts'
 */
/*~ If this module is a UMD module that exposes a global variable 'myLib' when
 *~ loaded outside a module loader environment, declare that global here.
 *~ Otherwise, delete this declaration.
 */
export as namespace myLib;
/*~ If this module has methods, declare them as functions like so.
 */
export function myMethod(a: string): string;
export function myOtherMethod(a: number): number;
/*~ You can declare types that are available via importing the module */
export interface someType {
    name: string;
    length: number;
    extras?: string[];
}
/*~ You can declare properties of the module using const, let, or var */
export const myField: number;
/*~ If there are types, properties, or methods inside dotted names
 *~ of the module, declare them inside a 'namespace'.
 */
export namespace subProp {
    /*~ For example, given this definition, someone could write:
     *~   import { subProp } from 'yourModule';
     *~   subProp.foo();
     *~ or
     *~   import * as yourMod from 'yourModule';
     *~   yourMod.subProp.foo();
     */
    export function foo(): void;
}
```

According to the example from the website, you can define top-level properties as a line of code. And, nested properties can be defined by using the keyword `namespace`.

* * *

Combining Types
===============

You do not have to use single types in TypeScript. Multiple types can be combined into one. Intersection types are data types where multiple data types are combined into one.

For example:

```typescript
function(foo: Foo, bar: Bar): Foo & Bar {  
    const result: Partial<Foo & Bar> = {};  
    for (const prop in foo) {  
        if (foo.hasOwnProperty(prop)) {  
            (result as Foo)[prop] = foo[prop];  
        }  
    }  
    for (const prop in bar) {  
        if (bar.hasOwnProperty(prop)) {  
            (result as Bar)[prop] = bar[prop];  
        }  
    }  
    return result as Foo & Bar;  
}
```

The object with the combined type gets to properties from both types.

Union types are a data type where an object can either be one type or another. For example:

```typescript
let foo: number|string;
```

After that declaration, you can assign a number or a string to the variable and the TypeScript compiler will not throw an error.

TypeScript allows for static typing while still allowing for flexibility.

With TypeScript, ES6 or later, these features are all available. `let` and `const` should be used to avoid scope collision that happens with `var`.

You also get new types of tuples and enums. You can define a tuple, an array with a fixed number of elements and type, by doing:

```typescript
let x: [string, number] = ["hello", 1]; 
```

If you set `x` to `[1, “hello”]`, the TypeScript compiler will fail.

You can define an `enum` type for a list of constants. For example:

```typescript
enum Color {Red, Green, Blue}   
let green: Color = Color.Green;
```

Arrays can have fixed types in TypeScript. For example, to define an array of numbers, we put:

```typescript
let x: number[] = [1,2,3];
```

Equivalently, you can assign an array like:

```typescript
**let** x: Array<number> = [1, 2, 3];
```

If you set `x` to `['1','2','3']`, compilation will fail.

TypeScript also adds an access modifier to properties and methods. You can optionally set properties and methods as `public`, `private`, or `protected`.

`public` properties and methods are available to all outside classes. `protected` properties and methods are available to subclasses and the current class. `private` properties and methods are available within the class only.

For example:

```typescript
class classA {  
  public publicProp: number;  
  private privateProp: number;  
}

class classB {  
  public a: classA;  
}

let b: classB = new classB();  
b.a: classA = new classA();  
b.a.publicProp = 1; // OK  
b.a.privateProp = 1; // error
```

The last line will give an error since `privateProp` is not available to outside classes.

To include TypeScript in your project, you can run the following in your JavaScript project folder:

```bash
$ npm install typescript --save-dev 
```

These are some basic and important advantages that TypeScript offers. With those features, it will save you a lot of time developing JavaScript apps!