Start Coding

Subjects

JAVASCRIPTHTMLCSSPYTHONSQLJAVACPPCSHARPPHPTYPESCRIPTCRUBYGOSWIFTKOTLINRUSTRBASHSCALAOBJECTIVE-CDARTPERLLUAMATLABXMLJSONMARKDOWNASSEMBLYLATEXYAMLSOLIDITYBLOCKCHAIN

Topics

TypeScript Basics

Introduction to TypeScriptTypeScript vs JavaScriptSetting up TypeScriptTypeScript Compiler (tsc)tsconfig.json ConfigurationTypeScript in Node.jsTypeScript in the Browser

TypeScript Types

Basic Types in TypeScriptType AnnotationsType InferenceUnion TypesIntersection TypesType AliasesLiteral TypesEnums in TypeScriptAny and Unknown TypesVoid, Null, and UndefinedNever TypeObject Types

TypeScript Variables and Functions

Variable DeclarationsConst AssertionsFunction TypesOptional and Default ParametersRest ParametersFunction OverloadingArrow Functions in TypeScript

TypeScript Interfaces

Interface BasicsOptional PropertiesReadonly PropertiesExtending InterfacesImplementing InterfacesHybrid TypesInterfaces vs Type Aliases

TypeScript Classes

Class BasicsInheritanceAccess ModifiersAbstract ClassesStatic MembersTypeScript ConstructorsGetters and SettersMethod Overriding

Advanced Types

Generics in TypeScriptGeneric ConstraintsConditional TypesMapped TypesIndex TypesTypeScript Utility TypesDiscriminated UnionsIntersection Types

TypeScript Modules

Module BasicsExport and ImportDefault ExportsRe-exportsDynamic ImportsAmbient Modules

TypeScript and OOP

Encapsulation in TypeScriptPolymorphism in TypeScriptTypeScript MixinsDecorators in TypeScript

TypeScript Error Handling

Try-Catch BlocksCustom Error TypesError Handling with Promises

TypeScript and Asynchronous

Promises in TypeScriptAsync/Await in TypeScriptTypeScript Generators

TypeScript Type Manipulation

Keyof OperatorTypeof OperatorIndexed Access TypesConditional TypesInfer KeywordTemplate Literal Types

TypeScript Best Practices

Strict ModeNull CheckingType Assertion Best PracticesTypeScript LintingTypeScript Style Guide

TypeScript and Libraries

Definitely TypedWriting Declaration FilesUsing Third-Party Libraries

TypeScript Tools and Ecosystem

TypeScript PlaygroundTypeScript with VS CodeTypeScript with WebpackTypeScript with ReactTypeScript with AngularTypeScript with Vue

Advanced TypeScript Concepts

TypeScript Compiler APIAbstract Syntax Tree (AST)TypeScript Language ServiceProject ReferencesTypeScript Performance Tuning

Optional and Default Parameters in TypeScript

TypeScript enhances JavaScript's function capabilities by introducing optional and default parameters. These features allow developers to create more flexible and robust functions, improving code readability and reducing errors.

Optional Parameters

Optional parameters in TypeScript are denoted by appending a question mark (?) to the parameter name. This syntax allows a function to be called with or without that specific argument.

function greet(name: string, greeting?: string) {
    if (greeting) {
        return `${greeting}, ${name}!`;
    } else {
        return `Hello, ${name}!`;
    }
}

console.log(greet("Alice")); // Output: Hello, Alice!
console.log(greet("Bob", "Good morning")); // Output: Good morning, Bob!

In this example, the greeting parameter is optional. The function works whether you provide one or two arguments.

Default Parameters

Default parameters allow you to specify a default value for a parameter if no argument is provided or if the argument is undefined.

function calculateTotal(price: number, taxRate: number = 0.1) {
    return price + (price * taxRate);
}

console.log(calculateTotal(100)); // Output: 110
console.log(calculateTotal(100, 0.2)); // Output: 120

Here, taxRate has a default value of 0.1 (10%). If not specified, this default value is used in the calculation.

Combining Optional and Default Parameters

You can use both optional and default parameters together for even more flexibility:

function createUser(name: string, age?: number, country: string = "Unknown") {
    return `Name: ${name}, Age: ${age ?? "Not provided"}, Country: ${country}`;
}

console.log(createUser("Alice")); // Output: Name: Alice, Age: Not provided, Country: Unknown
console.log(createUser("Bob", 30)); // Output: Name: Bob, Age: 30, Country: Unknown
console.log(createUser("Charlie", 25, "USA")); // Output: Name: Charlie, Age: 25, Country: USA

This function demonstrates the use of both optional and default parameters, providing different levels of information based on the arguments passed.

Best Practices

  • Place optional parameters after required parameters in the function signature.
  • Use default parameters for values that are commonly used or have a logical default.
  • Be cautious with null or undefined as default values, as they can lead to unexpected behavior.
  • Consider using Union Types with optional parameters for more precise type checking.

Considerations

When working with optional and default parameters, keep these points in mind:

  • Optional parameters are always of type T | undefined, where T is the declared type.
  • Default parameters do not create optional parameters; they provide a fallback value.
  • Using Function Overloading can sometimes be a better alternative for complex scenarios.

By mastering optional and default parameters, you can create more versatile functions in TypeScript, leading to cleaner and more maintainable code. These features are particularly useful when designing APIs or libraries where flexibility is key.