3-1: Type Assertion
Telling the type to the compiler when it’s confused. This means I am asserting the type, not the compiler.
Alt syntax can not be used in JSX.
let emni: any;
emni = "Next level dev";
(emni as string).length; // asserting type
// -------------------------
function kgToGram(param: string | number): string | number | undefined {
// string conversion
// number conversion
}
const resultToBeNumber = kgToGram(5) as number; // asserting type
const resultToBeString = kgToGram("5") as string;
// -------------------------
type CustomErrorType = {
message: string;
};
try {
// blink
} catch (error) {
console.log((error as CustomErrorType).message);
}
// -------------------------
// alternative syntax
<string>emni.length;
const resultToBeNumber = <number>kgToGram(5)
3-2: Interface, Type vs Interface
interface
- Only used for Object data types / Non-primitive types. Function, Object, Array
- Can be extended using
extends
keyword.
type
- used for primitive data types and Non-primitive data types.
- can not be extended.
- In function, array using
type
alias makes it more readable instead ofinterface
.- Thumb rule 👍🏻
- When working with Object or class, use interface.
- Otherwise, always use type alias.
- Thumb rule 👍🏻
index signature
- a label that describes what kind of values you can put into an object's properties.
3-3: Introduction of Generic in Type
A generic type is a type that can work with many different kinds of values. It's like a container that can hold anything you want, no matter what type it is.
Imagine you have a toy box that can hold different types of toys - like cars, dolls, and blocks. This toy box is like a generic type because it can hold many different kinds of toys.
3-4: Generic in Interface
It’s the same as type. But as its interface
, it’s used for object
and class
3-5: Generic in Function
3-6: Constraints in Generics
Though generic allows us to pass any type of data, a constraint is some rule to tell certain types must be passed when passing data.
interface IMandatory {
name: string;
age: number;
salary: number;
}
const addMeToMyCrushMind1 = <T extends IMandatory>(myInfo: T) => {
// code
};
When calling the addMeToMyCrushMind1
function and passing the arguments, the properties in the IMandatory
must be passed. This is a constraint, a rule.
3-7: Generic Constraints Using Key Of Part 1
keyof
takes an object’s key’s and makes them a union.
type PersonType = {
name: string;
age: number;
address: string;
};
type NewType = "name" | "age" | "address";
type NewTypeKeyof = keyof PersonType;
// NewType and NewTypeKeyof are the same
function getProperty<X, Y extends keyof X>(obj: X, key: Y) {
obj[key];
}
const result7 = getProperty({ name: "Mr. X", age: 100 }, "age");
// Y extends keyof X means Y = "name" | "age"
3-8: Asynchronous TypeScript
3-9: Conditional Types
extends
- The
extends
keyword in TypeScript is used to check whether one type can be assigned to another type. It works like an if-statement where you are asking whether a particular typeextends
another type.
- The
A type, dependent on another type.
- When a value from a union type equals
never
, then that specific value is removed from the union
3-10: Mapped Types
When we want to create a new type by transforming an existing type, we can use mapped types.