TypeScript types, interfaces, generics, utility types, and type manipulation for type-safe JavaScript development
Basic Types
Primitive Types
Basic type annotations
let isDone: boolean = false;
let count: number = 42;
let username: string = "Alice";
let nothing: null = null;
let notDefined: undefined = undefined; Arrays
Array type syntax variants
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b"];
let mixed: (number | string)[] = [1, "two", 3]; Objects
Object type literals
let user: { name: string; age: number } = {
name: "John",
age: 30
};
// Optional properties
let config: { debug?: boolean } = {}; Interfaces
Basic Interface
Define object shape with interface
interface User {
id: number;
name: string;
email: string;
age?: number; // Optional property
readonly created: Date; // Readonly property
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com",
created: new Date()
}; Extending Interfaces
Inherit properties from another interface
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: number;
department: string;
} Function Interface
Define function signatures
interface SearchFunc {
(source: string, substring: string): boolean;
}
const search: SearchFunc = (src, sub) => {
return src.includes(sub);
}; Generics
Generic Function
Create reusable type-safe functions
function identity<T>(arg: T): T {
return arg;
}
const num = identity<number>(42);
const str = identity("hello"); // Type inference Generic Interface
Flexible interfaces with generics
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
const userResponse: ApiResponse<User> = {
data: { id: 1, name: "John", email: "j@e.com", created: new Date() },
status: 200,
message: "Success"
}; Generic Constraints
Constrain generic types
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
console.log(arg.length);
}
logLength("hello"); // OK
logLength([1, 2, 3]); // OK
// logLength(42); // Error: number doesn't have length Utility Types
Partial<T>
Make all properties optional
interface User {
name: string;
age: number;
email: string;
}
// All properties become optional
type PartialUser = Partial<User>;
const updateUser: PartialUser = {
age: 31 // Only updating age is fine
}; Pick<T, K>
Select specific properties
type UserPreview = Pick<User, 'name' | 'email'>;
const preview: UserPreview = {
name: "Alice",
email: "alice@example.com"
// age not required
}; Omit<T, K>
Exclude specific properties
type UserWithoutEmail = Omit<User, 'email'>;
const user: UserWithoutEmail = {
name: "Bob",
age: 25
// email property is excluded
}; Record<K, T>
Create object type with specific key-value types
type UserRoles = Record<string, boolean>;
const roles: UserRoles = {
admin: true,
editor: false,
viewer: true
}; Find this helpful?
Check out more cheatsheets and learning resources, or get in touch for personalized training.