TypeScript Property: Syntax, Usage, and Examples
A TypeScript property refers to a named value inside an object, class, or interface. Properties define the structure of objects and control how data is stored and accessed. TypeScript adds type safety to properties, ensuring they hold the correct type of value.
How to Use Properties in TypeScript
Defining Properties in Objects
You can define properties directly in an object. TypeScript will infer the types automatically, or you can explicitly define them.
tsx
const user: { name: string; age: number } = {
name: "Alice",
age: 30,
};
console.log(user.name); // Output: Alice
Adding Properties to Objects
To add a property to an object in TypeScript, use type assertion or index signatures to extend the object dynamically.
tsx
const user = { name: "Alice" } as { name: string; age?: number };
user.age = 30;
console.log(user.age); // Output: 30
Using index signatures, you can allow objects to have additional dynamic properties.
tsx
type User = { name: string; [key: string]: any };
const user: User = { name: "Alice", age: 30, city: "New York" };
console.log(user.city); // Output: New York
Defining Properties in Classes
A TypeScript class property is defined inside a class and can have different access modifiers (public, private, protected).
tsx
class Person {
public name: string;
private age: number; // Only accessible inside the class
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const person = new Person("Bob", 25);
console.log(person.name); // Output: Bob
// console.log(person.age); // Error: Property 'age' is private
Optional Properties
A TypeScript optional property is defined using the ? symbol, meaning it may or may not be present in the object.
tsx
type Car = {
brand: string;
model: string;
year?: number; // Optional property
};
const car1: Car = { brand: "Toyota", model: "Corolla" };
const car2: Car = { brand: "Honda", model: "Civic", year: 2022 };
console.log(car1.year); // Output: undefined
console.log(car2.year); // Output: 2022
Read-Only Properties
To prevent modification of a property after initialization, use readonly.
tsx
class Book {
readonly title: string;
constructor(title: string) {
this.title = title;
}
}
const myBook = new Book("TypeScript Basics");
// myBook.title = "Advanced TypeScript"; // Error: Cannot assign to 'title' because it is a read-only property
When to Use Properties in TypeScript
Structuring Objects
Use properties to define the structure of objects and maintain consistency in your data.
tsx
type User = { id: number; username: string };
const user: User = { id: 1, username: "coder123" };
Managing Class Instances
Class properties store instance-specific data and control access through encapsulation.
tsx
class Employee {
constructor(public id: number, public name: string) {}
}
const employee = new Employee(101, "Alice");
console.log(employee.id); // Output: 101
Adding Dynamic Properties
Use index signatures to allow objects to have additional properties without a fixed structure.
tsx
type Config = { [key: string]: string };
const settings: Config = { theme: "dark", language: "en" };
console.log(settings.language); // Output: en
Examples of Using Properties in TypeScript
Checking If a Property Exists
To check if a property exists, use the in operator.
tsx
const user = { name: "Alice", age: 30 };
console.log("age" in user); // Output: true
console.log("city" in user); // Output: false
Alternatively, use optional chaining (?.) to avoid runtime errors.
tsx
console.log(user.city?.toUpperCase()); // Output: undefined (no error)
Handling Missing Properties
If you try to access a property that is not defined in the type, TypeScript throws an error.
tsx
type User = { name: string };
const user: User = { name: "Alice" };
// console.log(user.age); // Error: Property 'age' does not exist on type 'User'
Use index signatures if you need dynamic properties.
tsx
type UserDynamic = { name: string; [key: string]: any };
const userDynamic: UserDynamic = { name: "Alice", age: 30 };
console.log(userDynamic.age); // Output: 30
Removing a Property from an Object
To remove a property from an object, use the delete keyword.
tsx
const user = { name: "Alice", age: 30 };
delete user.age;
console.log(user); // Output: { name: "Alice" }
Sorting an Array of Objects by a Property
Sorting an array of objects by a property is common in TypeScript. Use sort().
tsx
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 },
];
users.sort((a, b) => a.age - b.age);
console.log(users); // Output: Sorted by age
Extending Interfaces and Adding Properties
You can extend an interface to add a property using extends.
tsx
interface User {
name: string;
}
interface Admin extends User {
role: string;
}
const admin: Admin = { name: "Alice", role: "SuperAdmin" };
console.log(admin.role); // Output: SuperAdmin
Adding a Property to a Type
To add a property to a type, use & (intersection type).
tsx
type User = { name: string };
type Admin = User & { role: string };
const admin: Admin = { name: "Alice", role: "Admin" };
Learn More About TypeScript Properties
Getters and Setters
Use getters and setters to control how a property is accessed and modified.
tsx
class Person {
private _age: number = 0;
get age() {
return this._age;
}
set age(value: number) {
if (value < 0) throw new Error("Age must be positive.");
this._age = value;
}
}
const person = new Person();
person.age = 25;
console.log(person.age); // Output: 25
Static Properties
Static properties belong to a class rather than an instance.
tsx
class App {
static version = "1.0.0";
}
console.log(App.version); // Output: 1.0.0
Computed Properties
Computed properties dynamically generate property names.
tsx
const key = "status";
const obj = { [key]: "active" };
console.log(obj.status); // Output: active
TypeScript properties define object structures, ensuring type safety and flexibility. You can declare properties in objects, classes, and interfaces, making them fundamental in TypeScript development.