DEV Community

Salman Asu
Salman Asu

Posted on

All About Typescript For Javascript Developer

interface:
to define the structure or shape of an object and specify the properties and methods that an object has or should have.
interface is built-in feature of typescript.
use interface if it possible instead of types.
usecase type checking, easier debugging
we can use interface at different level at:

  • function type use interface to their argument or return value.
  • class in object constructor
  • Optional properties
  • readonly properties

types alias:
u can create a complex type by combining multiple type.
One major difference between type aliases vs interfaces, are that interfaces are open and type aliases are closed.
=>This means you can extend an interface by declaring it a second time.
e.g

interface Kitten {
  purrs: boolean;
}

interface Kitten {
  colour: string;
}

// In the other case a type cannot be changed outside of
// its declaration.

type Puppy = {
  color: string;
};

type Puppy = {
  toys: number;
};
Enter fullscreen mode Exit fullscreen mode

=>we can event extent the type with intersection type (&)
e.g.

type UserEvent = PlayEvent & {UserId: string}
Enter fullscreen mode Exit fullscreen mode

extend keyword can be use with interface or class

unions:
Union types in TypeScript allow us to define a variable or parameter that can hold values of multiple types.
Use pipe (|) symbol to combine two or more data types to achieve Union type.
e.g

const randomtype= string | number
Enter fullscreen mode Exit fullscreen mode

For example, you can describe a boolean type as being either true or false:

type MyBool = true | false;
Enter fullscreen mode Exit fullscreen mode

casting:
converting type into another type
e.g

let x: unknown = 'hello';
console.log((x as string).length);

Enter fullscreen mode Exit fullscreen mode

generics:
defining varaible to type
e.g when value of type is unkown while creating or defining a function, but known after calling a function, we use generic

function myfun<type>(arg:type):type{
     return arg;
    }
    myfun<number>(3);
Enter fullscreen mode Exit fullscreen mode

type inside a type, u can defined generics at array, map or set.
we can declare own type that use generics

duck or structure typing:
This technique is used to compare two objects are identical in terms of having matching properties and methods(Type-checking).
e.g

class Pigeon {
  sound = "coos";
}

class Owl {
  sound = "hoots";
}

class Penguin {
  sound = "peeps";
  swim() {
    console.log("I'm a bird and i can swim");
  }
}

let pigeon: Pigeon = new Owl();      // Works
let owl: Owl = new Pigeon();         // Works
let pigeon2: Pigeon = new Penguin(); // Works
let penguin: Penguin = new Pigeon(); // Compile time error
Enter fullscreen mode Exit fullscreen mode

enums:
it is a way to defining set of constant in typescript, collection of related value of different data type.
usecases-
Enums provides a great way to organize the code in TypeScript.
Enums saves compile-time and runtime with inline code in JavaScript.

tuples:
In JavaScript, arrays consist of values of the same type, but sometimes we need to store a collection of values of different types in a single variable.
e,g.

let arrTuple: [number, string, number, string] = [501, "welcome", 505, "Mohan"];
console.log(arrTuple);
Enter fullscreen mode Exit fullscreen mode

satisfies:
The satisfies operator is used to ensure that a value conforms to a specific type without changing the type of the value itself.

any and unkown:
any- mean anything
unkown- mean it is unkown now but it is kown or declare later

keyof:
keyof is a keyword in TypeScript which is used to extract the key type from an object type.

decorator:
its a special kind of declartion can be appleied to class, methods, argument, variable

Type assertions:
Type assertion is a technique that informs the compiler about the type of a variable.
Type assertion is similar to typecasting but it doesn’t reconstruct code.
You can use type assertion to specify a value’s type and tell the compiler not to deduce it.
e.g.

let str: unknown = "geeksforgeeks"; 
     console.log(str); 
     let len: number = (str as string).length; 
     console.log(len);
Enter fullscreen mode Exit fullscreen mode

function overloading and overwritting:
overloading- i.e. changing number of parameters, change datatype of parameters, return type doesn’t play any role.
achieved at compile time.
overwriting-It is the redefinition of base class function in its derived class with same signature i.e. return type and parameters.
It can only be done in derived class.
achieved at run time.

want to know more about me, just write sallbro on search engine...

Top comments (0)