This content originally appeared on DEV Community and was authored by Jakaria Masum
TypeScript enhances JavaScript by adding static types, which can improve code quality and development efficiency. This guide covers key TypeScript features including data types, objects, optional and literal types, functions, spread and rest operators, destructuring, type aliases, union and intersection types, ternary operator, optional chaining, nullish coalescing operator, and special types like never, unknown, and null.
1. Data Types
TypeScript provides a variety of basic types, ensuring variables hold values of specified types:
let isDone: boolean = true; // boolean type
let age: number = 30; // number type
let name: string = "John Doe"; // string type
let list: number[] = [1, 2, 3, 4]; // array of numbers
let user: [string, number] = ["Alice", 25]; // tuple type, fixed length array with specified types
By specifying data types, you can catch type-related errors early, making your code more predictable and reducing bugs.
2. Objects
Objects in TypeScript can have specified property types, making it clear what properties an object should have:
let person: { name: string; age: number } = {
name: "Alice",
age: 25
};
This ensures that the object person always has name as a string and age as a number. Attempting to assign an incorrect type will result in a compile-time error.
3. Optional and Literal Types
Optional properties and literal types add more flexibility and specificity:
let optionalPerson: { name: string; age?: number } = { name: "Bob" };
// age is optional
type Color = "red" | "green" | "blue";
let favoriteColor: Color = "green"; // can only be one of the specified values
Optional properties allow for more flexible object structures, and literal types limit a variable to specific values, ensuring only predefined values can be assigned.
4. Functions
TypeScript allows type definitions for function parameters and return types, making functions easier to understand and use:
function greet(name: string): string {
return `Hello, ${name}`;
}
let greeting: string = greet("Alice"); // returns "Hello, Alice"
This ensures that the greet function always takes a string and returns a string. If you pass an argument of a different type, TypeScript will throw an error.
5. Spread and Rest Operators
Spread and rest operators help manipulate arrays and objects efficiently:
let numbers: number[] = [1, 2, 3];
let moreNumbers: number[] = [...numbers, 4, 5]; // spreading the numbers array
function sum(...values: number[]): number { // rest parameter
return values.reduce((acc, val) => acc + val, 0);
}
let total: number = sum(1, 2, 3, 4); // returns 10
The spread operator allows expanding arrays/objects into individual elements, and the rest operator gathers multiple arguments into an array.
6. Destructuring
Destructuring simplifies extracting values from arrays and objects:
let [first, second] = [1, 2]; // array destructuring
let { name, age } = { name: "Charlie", age: 28 }; // object destructuring
Destructuring makes it easier to work with complex data structures by breaking them into simpler parts, allowing for cleaner and more readable code.
7. Type Aliases
Type aliases create custom types, making the code more readable and reusable:
type Point = { x: number; y: number };
let point: Point = { x: 10, y: 20 };
Type aliases provide a way to name complex types, improving code clarity and making it easier to understand what types are expected.
8. Union and Intersection Types
Union types allow variables to hold multiple types, while intersection types combine multiple types:
type Id = number | string; // union type
let userId: Id = 123; // can be a number
userId = "ABC"; // or a string
type Employee = { name: string } & { age: number }; // intersection type
let employee: Employee = { name: "Dave", age: 30 };
Union types are flexible, allowing a variable to hold values of different types, and intersection types ensure objects meet multiple type requirements, providing more control over the structure of the data.
9. Ternary Operator
The ternary operator provides a shorthand for conditionals:
let age: number = 18;
let isAdult = age >= 18 ? "Yes" : "No"; // if age is 18 or more, isAdult is "Yes"; otherwise, "No"
The ternary operator is a concise way to write simple conditional expressions, making the code shorter and more readable.
10. Optional Chaining and Nullish Coalescing Operator
Optional chaining and nullish coalescing handle null and undefined values gracefully:
let user = { address: { street: "123 Main St" } };
let street = user?.address?.street; // safely access nested properties
let input = null;
let value = input ?? "default"; // returns "default" if input is null or undefined
Optional chaining prevents runtime errors when accessing nested properties that might not exist, and nullish coalescing provides default values for null/undefined, ensuring the code behaves as expected even with missing values.
11. Special Types: Never, Unknown, and Null
TypeScript has special types for specific use cases:
function error(message: string): never { // never indicates a function never returns
throw new Error(message);
}
let unknownValue: unknown = "hello"; // unknown type requires type assertions before use
let valueLength: number = (unknownValue as string).length;
let nullableValue: null = null; // null type
-
neverrepresents unreachable code or a function that never returns. -
unknownis a type-safe counterpart ofany, requiring explicit type assertions before use. -
nullexplicitly allows null values, indicating the absence of any value.
This content originally appeared on DEV Community and was authored by Jakaria Masum
Jakaria Masum | Sciencx (2024-07-13T05:25:00+00:00) Exploring TypeScript: A Comprehensive Guide. Retrieved from https://www.scien.cx/2024/07/13/exploring-typescript-a-comprehensive-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.