All About Typescript For Javascript Developer
Salman Asu
Posted on November 22, 2024
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;
};
=>we can event extent the type with intersection type (&)
e.g.
type UserEvent = PlayEvent & {UserId: string}
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
For example, you can describe a boolean type as being either true or false:
type MyBool = true | false;
casting:
converting type into another type
e.g
let x: unknown = 'hello';
console.log((x as string).length);
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);
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
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);
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);
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...
Posted on November 22, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.