"Testing1"
TypeScript Utility Types
TypeScript Utility Types
TypeScript ships with powerful built-in types that simplify and enhance type manipulation. These utility types allow developers to write cleaner, reusable, and more expressive code.
ReadonlyArray
Creates an array type where elements cannot be modified.
Example
const numbers: ReadonlyArray<number> = [1, 2, 3]; Numbers[0] = 10;
NonNullable
Removes null and undefined from a type.
Example
type Name = string | null | undefined; type ValidName = NonNullable<Name>; const name: ValidName = "Alice";
Extract
Selects only the types from a union that are assignable to a given type.
Example
type Mixed = string | number | boolean; type OnlyStrings = Extract<Mixed, string>; const val: OnlyStrings = "hello";
InstanceType
Gets the instance type of a constructor function.
Example
class Animal {
name = "Dog";
}
type AnimalInstance = InstanceType<typeof Animal>;
const pet: AnimalInstance = new Animal();
ThisParameterType
Gets the type of the this parameter in a function, if specified.
Example
function greet(this: { name: string }) {
return `Hello, ${this.name}`;
}
type GreetThis = ThisParameterType<typeof greet>;
OmitThisParameter
Removes the this parameter from a function type.
function sayHello(this: { user: string }) {
return `Hi, ${this.user}`;
}
Const simpleHello: OmitThisParameter<typeof sayHello> = sayHello.bind({ user: "Sahand" });
ConstructorParameters
Returns a tuple of the types of a class constructor's parameters.
Example
class Person {
constructor(public name: string, public age: number) {}
}
type PersonParams = ConstructorParameters<typeof Person>;
Awaited
Unwraps the value inside a Promise.
type Response = Promise<string>; type Resolved = Awaited<Response>;
Uppercase / Lowercase / Capitalize / Uncapitalize
Manipulates string literal types.
type Greet = "hello"; type Loud = Uppercase<Greet>; // "HELLO" type Small = Lowercase<"WORLD">; type FirstBig = Capitalize<"name">; type FirstSmall = Uncapitalize<"Title">;
Prefer Learning by Watching?
Watch these YouTube tutorials to understand TYPESCRIPT Tutorial visually:
What You'll Learn:
- 📌 Typescript Utility Types | TS Beginners Tutorial
- 📌 TypeScript Utility Types You Must Learn