A brief introduction to Typescript

why we use Typescript

Typescript is a ‘superset’ to the javascript . syntacs are based on the core javascript ,but added the static type .

below ,use a small demo to show you why we use Typescript.

function add(a,b){
    reuturn a+b;
}
const result1 = add(2,5);
console.log(result1);    //7

const result2=add('2','5');
console.log(result2);   //25

we can see that , when we write the javascript code , we do not know exactly what kind of parameters we use to pass to the add function , if we pass string params , it will cause problems . This is why typescript comes .

with typescript , we can just specify thAe type of parameters just simply by :, and spot the errors before running the code .

function add(a:number,b:number){
    reuturn a+b;
}

How to use Typescript

1.) install the Typescript

npm install -g typescript

2.) run the typescript code

tsc filename.ts // the typescript file name 

there are also other useage ,like use with ReactJs , you can just create a react-typescript project with npx

npx create-react-app my-app --template typescript

for more information about how to create a project with typescript and reactJs , you can click here Create React App

basic syntax

Typing

The type system allows you to add types to variables ,function arguments and function return types,giving a more rigid structure to your program .

The advantages are better tooling :

• detact the bugs in advance(editors like vscode , can help you a lot during development,poing out bugs as you write the code.)

• teamwork get easier because the code is more explicit.

Typesystem

there are mainly two types of type system and we can use : or by inference to define them .

• Primitive: number,string,boolean(if it is Number,String,Boolean ,which starts with big letter , it will be number object , instead of number primitive),bigint, null, symbol, and undefined,any (allow anything), unknown (ensure someone using this type declares what the type is), never (it’s not possible that this type could happen), and void (a function which returns undefined or has no return value).

• Complex type : objects,arrays

Type inference

below two lines of code is the same ,first line we difine the type by inference . Typescript knows the javascript and will genereate the types for you in many cases . For example in creating a variable and assigning it to a particular value ,Typescript will use the value as its type .

let helloWorld = 'hello world';
let helloWorld:string = 'hello world';

Defining Types with :

One can use a wide variety of design patterns in Javascript and some makes it difficult for types to inferred automatically . To cover these cases , Typescript offers places for you tell Typescript what the type should be by :;

below is the demo to show how to define types ,

<!-- number variable  -->

let a : number = 4;

<!-- string array  -->

let hobbies:string[] = ["reading",'swimming'];

<!--   -->

let person : {
    name:'string',
    age:'number'
}

// this is right
person={ 
    name:'Abdulla',
    age:24
}

// this is wrong 
person = {
    interest:'reading'
}

<!-- Array of object -->

let people: {
    name: string,
    age: number
}[];

people = [{
    name: "ab",
    age:34
},
    {
    name: "abc",
    age:34
}
];

<!-- or can use interface kwyword to explicitly describe the shape of the variable -->

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};

for fucntions

function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

Union types

specify more than one type to the variables.

let course : string | number = 'react-course';

course = 1234;

<!-- describe the set of string or number literals that a value is allowed to be: -->
type WindowStates = "open" | "closed" | "minimized";

Generics

helps we write safe yet flexiable functions.It provide variables to types. In short, you can create a function, interface or class that works with different types, without specifying the type up front.

// any is too general ,and it loses the meaning of using typescript

function insertAtBegining(array:any[],value:any) {
    let newArr = [value, ...array];
    return newArr;
}

// if we specify the type number , this function will lost it's utility 

function insertAtBegining(array:number[],value:number) {
    let newArr = [value, ...array];
    return newArr;
}

// if we specify the type string , this function will lost it's utility 

function insertAtBegining(array:string[],value:string) {
    let newArr = [value, ...array];
    return newArr;
}

const demoArr = [1, 2, 3];

const updatedArr = insertAtBegining(demoArr, 4);

// more generic functions

function insertAtBegining<T>(array:T[],value:T) {
    let newArr = [value, ...array];
    return newArr;
}

Reference

TypeScript Tutorial

TypeScript for JavaScript Programmers