Introduction to TypeScript

Posted by perrohunter on Thu, 19 Sep 2019 09:08:36 +0200

Advantages of TypeScript

  • Enhanced code maintainability and readability
  • It's very inclusive.

Disadvantages of TypeScript

  • Learning cost
  • development cost

TypeScript installation

  • Command Line Installation of TypeScript
npm install -g typescript
  • The above command will install tsc command in the global environment. After installation, we can execute tsc command anywhere.
  • Compiling a TypeScript file is simple:
tsc hello.ts

TypeScript Basic Data Type

Raw data type
  • The original data types include Boolean values, numeric values, strings, null, undefined, and the new type Symbol in ES6
Boolean value

In TypeScript, boolean is used to define boolean value types

let isLoading: boolean = false;
numerical value

In TypeScript, numeric types are defined using number:

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// Binary Representation in ES6
let binaryLiteral: number = 0b1010;
// Octal Representation in ES6
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

//   Among them, 0b1010 and 0o744 are binary and octal representations in ES6, which are compiled into decimal digits.
Character string

In TypeScript, string is used to define string types:

let myName: string = 'Tom';
let myAge: number = 25;

// Template string
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;


//    Where `is used to define the template string in ES6, ${expr} is used to embed expressions in the template string.
Null and Undefined

In TypeScript, null and undefined are used to define the two original data types:

let u: undefined = undefined;
let n: null = null;
Null value

JavaScript does not have the concept of void. In TypeScript, void can be used to represent functions without any return value:

function alertName(): void {
    alert('My name is Tom');
}

//    It's no use declaring a variable of void type, because you can only assign it undefined and null:
let unusable: void = undefined;
  • The difference between undefined and null and void:
    • undefined and null are subtypes of all types.
    • In other words, variables of undefined type can be assigned to variables of number type:
    // It won't make a mistake.
    let num: number = undefined;
    // It won't make a mistake.
    let u: undefined;
    let num: number = u;
    
    Variables of void type cannot be assigned to variables of number type:
    let u: void;
    let num: number = u;
    // Type 'void' is not assignable to type 'number'.
    
Arbitrary value

An arbitrary value (Any) is used to indicate that an allowable assignment is of any type.

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
  • Access to any property on any value is permitted:
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
  • Any method is also allowed to be invoked:
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');

It can be assumed that after declaring a variable as an arbitrary value, the type of content returned is arbitrary for any operation on it.

Variables of undeclared type

If a variable is not specified at the time of declaration, it will be recognized as an arbitrary value type:

let something;
something = 'seven';
something = 7;
something.setName('Tom');

## Equivalent to
let something: any;
something = 'seven';
something = 7;
something.setName('Tom');
  • If no specific type is specified, then TypeScript infers a type according to the rules of type inference.
  • If there is no assignment at the time of definition, no matter whether there is an assignment later, it will be inferred as any type and not checked at all.
Joint type

Indicates that the value can be one of many types. Joint Type Use | Separate each type

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
//	Here let myFavoriteNumber: string | number means that the type of myFavoriteNumber allowed is string or number, but not other types.
  • When TypeScript is not sure what type of variable a federated type is, we can only access properties or methods common to all types of the federated type.

Topics: TypeScript npm Javascript