Typescript Flashcards
Learn Typescript basics and advance concepts
What is decorator in typescript?
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
Class Decorator:
A class decorator is applied to a class declaration and can be used to modify the class or its constructor behavior. It receives the constructor function of the class as its target.
function myClassDecorator(target: any) {
// Modify the class behavior or prototype here
target.prototype.customMethod = function () {
console.log("This is a custom method added by the decorator.");
};
}
@myClassDecorator
class MyClass {
// Class implementation
}
const instance = new MyClass();
instance.customMethod(); // Output: "This is a custom method added by the decorator."
A common use case for class decorators is to add functionality or metadata to classes, like logging, access control, or creating singleton instances.
Method Decorator:
A method decorator is applied to a method within a class and allows you to modify the behavior of that method. It receives either the constructor of the class (if the method is static) or the prototype of the class (if the method is an instance method) as its target.
function myMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling method ${propertyKey} with arguments: ${args}`);
const result = originalMethod.apply(this, args);
return result;
};
}
class ExampleClass {
@myMethodDecorator
sayHello(name: string) {
console.log(`Hello, ${name}!`);
}
}
const instance = new ExampleClass();
instance.sayHello("John"); // Output: "Calling method sayHello with arguments: John" followed by "Hello, John!"
Method decorators are useful for implementing cross-cutting concerns like logging, measuring execution time, caching, or authentication checks.
Property Decorator:
A property decorator is applied to a property within a class and allows you to modify the behavior of that property. It receives either the constructor of the class (if the property is static) or the prototype of the class (if the property is an instance property) as its target.
function myPropertyDecorator(target: any, propertyKey: string) {
const privateKey = `_${propertyKey}`;
Object.defineProperty(target, propertyKey, {
get: function () {
return this[privateKey];
},
set: function (value) {
this[privateKey] = value.toUpperCase();
},
enumerable: true,
configurable: true,
});
}
class ExampleClass {
@myPropertyDecorator
name: string;
}
const instance = new ExampleClass();
instance.name = "John";
console.log(instance.name); // Output: "JOHN"
Property decorators can be used for validation, formatting, or other transformations on class properties before their values are accessed or set.
Parameter Decorator:
A parameter decorator is applied to a parameter of a method or constructor within a class. It allows you to modify the behavior of that specific parameter.
function myParameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
console.log(`Parameter ${parameterIndex} of method ${propertyKey} in class ${target.constructor.name} is decorated.`);
}
class ExampleClass {
sayHello(@myParameterDecorator name: string) {
console.log(`Hello, ${name}!`);
}
}
const instance = new ExampleClass();
instance.sayHello("John"); // Output: "Parameter 0 of method sayHello in class ExampleClass is decorated." followed by "Hello, John!"
Parameter decorators can be used for logging, validation, or to provide additional context information for methods.
Decorators provide a way to extend and modify the behavior of classes, methods, properties, or parameters in a declarative manner. They can be used for various purposes like logging, validation, dependency injection, and more. TypeScript decorators are powerful tools that enhance code readability, reusability, and maintainability.
What Utility Types are in Typescript?
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
Partial<Type>
Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.
Readonly<Type>
Constructs a type with all properties of Type set to readonly, meaning the properties of the constructed type cannot be reassigned.
Record<Keys, Type>
Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.
Pick<Type, Keys>
Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.
Omit<Type, Keys>
Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals). The opposite of Pick.
What are Generics in Typescript?
Generics in TypeScript enable writing code that can work with a variety of data types while maintaining type safety. They allow the creation of reusable components, functions, and data structures without sacrificing type checking.
Generics are represented by type parameters, which act as placeholders for types. These parameters are specified within angle brackets (<>) and can be used throughout the code to define types of variables, function parameters, return types, and more.
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("hello");
console.log(output); // Output: hello
In this example, identity is a generic function that takes a type parameter T. The parameter arg is of type T, and the return type of the function is also T. When calling identity<string>("hello"), the type parameter T is inferred as string, ensuring type safety.
What is TypeScript and how does it differ from JavaScript?
TypeScript is a superset of JavaScript that compiles to plain JavaScript. Conceptually, the relationship between TypeScript and JavaScript is comparable to that of SASS and CSS. In other words, TypeScript is JavaScript’s ES6 version with some additional features.
TypeScript is an object-oriented and statically typed language, similar to Java and C#, whereas JavaScript is a scripting language closer to Python. The object-oriented nature of TypeScript is complete with features such as classes and interfaces, and its static typing allows for better tooling with type inference at your disposal.
From a code perspective, TypeScript is written in a file with a .ts extension whereas JavaScript is written with a .js extension. Unlike JavaScript, TypeScript code is not understandable by the browsers and can’t be executed directly in the browser or any other platform. The .ts files need to be transpiled using TypeScript’s tsc transpiler to plain JavaScript first, which then gets executed by the target platform.
What are the benefits of using TypeScript?
An immediate advantage of using TypeScript is its tooling.
TypeScript is a strongly typed language that uses type inferences. These characteristics open the doors to better tooling and tighter integration with code editors.
TypeScript’s strict checks catch your errors early, greatly reducing the chances of typos and other human errors from making their way to production.
From an IDE’s perspective, TypeScript provides the opportunity for your IDE to understand your code better allowing it to display better hints, warnings, and errors to the developer.
For example, TypeScript’s strict null check throws an error at compile time (and in your IDE) preventing a common JavaScript error of attempting to access a property of an undefined variable at runtime.
A long-run advantage of using TypeScript is its scalability and maintainability.
The ability to describe the shape of objects and functions directly in your code makes your codebase easier to understand and more predictable.
When used correctly, TypeScript provides a more standardized language resulting in better readability which could save time and effort down the road as the codebase grows.
What are interfaces in TypeScript?
Interfaces are TypeScript’s way of defining the syntax of entities. In other words, interfaces are a way to describe data shapes such as objects or an array of objects.
We declare interfaces with the help of the interface keyword, followed by the interface name and its definition. Let’s look at a simple interface for a user object:
interface User {
name: string;
age: number;
}
The interface can then be used to set the type of a variable (similar to how you assign primitive types to a variable). A variable with the User type will then conform to the interface’s properties.
let user: User = {
name: "Bob",
age: 20, // omitting the `age` property or a assigning a different type instead of a number would throw an error
};
Interfaces help drive consistency in your TypeScript project. Furthermore, interfaces also improve your project’s tooling, providing better autocomplete functionality in your IDEs and ensuring the correct values are being passed into constructors and functions.
How do you create a new type using a subset of an interface?
TypeScript has a utility type called omit that lets you construct a new type by passing a current type/interface and selecting the keys to be excluded from the new type. The example below shows how you create a new type UserPreview based on the User interface, but without the email property.
interface User {
name: string;
description: string;
age: number;
email: string;
}
// removes the `email` property from the User interface
type UserPreview = Omit<User, "email">;
const userPreview: UserPreview = {
name: "Bob",
description: "Awesome guy",
age: 20,
};
How do “enums” work in TypeScript?
Enums or enumerated types are a means of defining a set of named constants. These data structures have a constant length and contain a set of constant values. Enums in TypeScript are commonly used to represent a set number of options for a given value using a set of key/value pairs.
Let’s look at an example of an enum to define a set of user types.
enum UserType {
Guest = "G",
Verified = "V",
Admin = "A",
}
const userType: UserType = UserType.Verified;
Under the hood, TypeScript translates enums into plain JavaScript objects after compilation. This makes the use of enums more favorable compared to using multiple independent const variables. The grouping that enums offer makes your code type-safe and more readable.
What are arrow functions in TypeScript?
Arrow functions, also known as lambda functions, provide a short and convenient syntax to declare functions. Arrow functions are often used to create callback functions in TypeScript. Array operations such as map, filter, and reduce all accept arrow functions as their arguments.
However, arrow functions’ anonymity also has its downsides. If not careful, the shorter arrow function syntax can be more difficult to understand. Furthermore, arrow functions’ nameless nature also makes it impossible to create self-referencing functions (i.e. recursions).
const addNumbers = (x: number, y: number): number => {
return x + y;
};
addNumbers(1, 2); // returns 3
When do you use a return type of never and how does it differ from void?
Let’s take the function in the example below. It doesn’t explicitly return anything to the caller. However, if you assign it to a variable and log the value of the variable, you will see that the function’s value is undefined.
printName(name: string): void {
console.log(name);
}
const printer = printName('Will');
console.log(printer); // logs "undefined"
The above snippet is an example of void functions. Functions with no explicit returns are inferred by TypeScript to have a return type of void.
In contrast, never is a type that represents a value that never occurs. For example, a function with an infinite loop or a function that throws an error are functions that have a never return type.
const error = (): never => {
throw new Error("");
};
In summary, void is used whenever a function doesn’t return anything explicitly whereas never is used whenever a function never returns.
What access modifiers are supported by TypeScript?
The concept of “encapsulation” is used in object-oriented programming to control the visibility of its properties and methods. TypeScript uses access modifiers to set the visibility of a class’s contents. Because TypeScript gets compiled to JavaScript, logic related to access modifiers is applied during compile time, not at run time.
There are three types of access modifiers in TypeScript: public, private, and protected.
public: All properties and methods are public by default. Public members of a class are visible and accessible from any location.
protected: Protected properties are accessible from within the same class and its subclass. For example, a variable or method with the protected keyword will be accessible from anywhere within its class and within a different class that extends the class containing the variable or method.
private: Private properties are only accessible from within the class the property or method is defined.
To use any of these access modifiers, add the public, protected, or public (if omitted, TypeScript will default to public) in front of the property or method.
class User {
private username; // only accessible inside the `User` class
// only accessible inside the `User` class and its subclass
protected updateUser(): void {}
// accessible from any location
public getUser() {}
}
What are generics and how to use them in TypeScript?
Good software engineering practice often encourages reusability and flexibility. The use of generics provides reusability and flexibility by allowing a component to work over a variety of types rather than a single one while preserving its precision (unlike the use of any).
Below is an example of a generic function that lets the caller define the type to be used within the function.
function updateUser<Type>(arg: Type): Type {
return arg;
}
To call a generic function, you can either pass in the type explicitly within angle brackets or via type argument inference, letting TypeScript infer the type based on the type of the argument passed in.
// explicitly specifying the type
let user = updateUser<string>("Bob");
// type argument inference
let user = updateUser("Bob");
Generics allows us to keep track of the type information throughout the function. This makes the code flexible and reusable without compromising on its type accuracy.
What are abstract classes in Typescript?
Abstract classes specify a contract for the objects without the ability to instantiate them directly. However, an abstract class may also provide implementation details for its members.
An abstract class contains one or more abstract members. Any classes that extend the abstract class will then have to provide an implementation for the superclass’s abstract members.
Let’s look at an example of how an abstract class is written in TypeScript and how another class can extend it. In the example below, both Car and Bike extend the Vehicle class, however, they each have a different implementation of the drive() method.
abstract class Vehicle {
abstract drive(): void;
startEngine(): void {
console.log('Engine starting...');
}
}
class Car extends Vehicle {
drive(): void {
console.log('Driving in a car');
}
}
class Bike extends Vehicle {
drive(): void {
console.log('Driving on a bike');
}
}
What are type assertions in TypeScript?
Type assertion allows you to explicitly set the type of a value and tell the compiler not to infer it. This is useful when you know the type of an object more specifically than its current type or current inferred type. In such cases, you can use type assertions to tell TypeScript the current type of the variable.
TypeScript provides two syntaxes for type assertions – as and <>.
// using the `as` keyword const name: string = person.name as string; // using `<>` const name: string = <string>person.name;
How does function overloads work in TypeScript?
Function overload is when the same function name is used multiple times with a different set of arguments – the number of arguments, types, or return types.
Let’s look at an example of how a print function can accept multiple types as its parameter by using function overloading.
print(message: string): void;
print(message: string[]): void;
print(message: unknown): void {
if (typeof message === 'string') {
console.log(message);
} else if (Array.isArray(message)) {
message.forEach((individualMessage) => {
console.log(individualMessage);
});
} else {
throw new Error('unable to print');
}
}
Based on the code snippet above, we can now call print passing in either a single message string or an array of message strings.
print('Single message');
// Console Output:
// Single message
print(['First message', 'Second message']);
// Console Output
// First message
// Second message
Apart from the reusability of the function, function overloading also comes with autocomplete support. When calling a function (depending on your IDE), you will be provided with a list of all possible overloads that you can choose from for your specific use case, creating a better development experience.
What is the difference between any and unknown types in TypeScript?
-
anydisables all type checking for a variable, allowing it to be assigned any type. -
unknownis a type-safe counterpart to any. It requires a type assertion or check before it can be used as a specific type.
What mixins are in Typescript?
In TypeScript, a mixin is a way to combine multiple classes or objects into a single class that inherits the properties and methods of all the combined classes. This can be useful when you want to reuse code across multiple classes without creating a deep inheritance hierarchy.
// Define a simple class with a greet method
class Greeter {
greet(name: string) {
console.log(`Hello, ${name}!`);
}
}
// Define a mixin that adds a log method to a class
type Loggable = { log(message: string): void };
function withLogging<T extends new (...args: any[]) => Loggable>(Base: T) {
return class extends Base {
log(message: string) {
console.log(`[${new Date().toISOString()}] ${message}`);
}
};
}
// Create a new class that combines the Greeter and Loggable mixins
const MyGreeter = withLogging(Greeter);
// Use the new class to create an instance and call its methods
const greeter = new MyGreeter();
greeter.greet("Alice"); // Output: "Hello, Alice!"
greeter.log("An event occurred."); // Output: "[2023-04-04T12:00:00.000Z] An event occurred."
In this example, the Greeter class defines a simple method that greets a person by name. The Loggable type is a mixin that adds a log method to a class. The withLogging function is a factory function that takes a class constructor as an argument and returns a new class that extends the original class with the Loggable mixin. Finally, the MyGreeter class is a new class that combines the Greeter and Loggable mixins, and can be used to create instances that can greet people and log events.
Using mixins in TypeScript can make your code more modular and reusable, by allowing you to combine and reuse code across multiple classes in a flexible way. However, be aware that mixins can also make your code more complex, and can lead to unexpected behavior if the same method is defined in multiple mixins.
Here are some general guidelines to keep in mind when using mixins in TypeScript:
- Define your mixins as classes that contain the methods and properties you want to mix in.
- Use inheritance to create a base class that your mixins will extend.
- Use composition to combine your mixins into a single class that can be used by other classes.
- Be careful to avoid method name collisions when combining multiple mixins.
- Use type annotations and interfaces to provide type safety for your mixins.
- Test your mixins thoroughly to ensure that they work correctly and do not interfere with each other or with the classes they are applied to.
Use cases:
Mixins in TypeScript are a flexible and powerful way to reuse code across multiple classes. Here are some common use cases for mixins:
-
Adding behavior to existing classes: Mixins can be used to add behavior to existing classes without modifying their original implementation. This can be useful when you want to add features like logging, caching, or error handling to an existing class, without changing its existing functionality. -
Implementing interfaces with default behavior: Mixins can be used to implement interfaces with default behavior, without the need for the implementing class to define all the interface methods. This can be useful when you have an interface with many methods, and you want to provide a default implementation for some of them. -
Building reusable components: Mixins can be used to build reusable components that can be combined with other components to create more complex functionality. This can be useful when you have a set of related functions or methods that can be used across multiple projects or modules. -
Sharing code across multiple classes: Mixins can be used to share code across multiple classes, without creating a deep inheritance hierarchy. This can be useful when you have common functionality that is shared across multiple classes, but you don’t want to create a complex inheritance structure.
What generic constraints are in Typescript?
In TypeScript, generic constraints allow you to apply constraints on the types that can be passed as arguments to a generic function or used as type parameters in a generic class or interface.
By using generic constraints, you can ensure that a type parameter satisfies certain conditions or has specific properties. This can be useful when you want to restrict the types that can be used with a generic function or class to only those that meet certain criteria.
For example, you can define a generic function that takes two parameters of different types and returns a merged object of those types. You can apply constraints to ensure that the types being merged have specific properties or meet certain conditions.
function merge<U extends {name: string}, V extends {age: number}>(obj1: U, obj2: V) {
return { …obj1, …obj2 };
}
const person = { name: 'John' };
const age = { age: 25 };
const result = merge(person, age); // Output: { name: 'John', age: 25 }
In the merge function above, the type parameters U and V are constrained using the extends keyword. U is constrained to an object with a name property of type string, and V is constrained to an object with an age property of type number.
By applying these constraints, the TypeScript compiler ensures that only objects with the required properties can be passed as arguments to the merge function.
How TypeScript Compilation Process works?
General Concept
So, the compilation is about translating a language into another one. Note that the concepts and techniques used by software compilers are the very same used for analyzing and translating spoken languages such as English, French, German, you name it.
Compilation Steps:
To understand the different steps occurring in the compilation process, I’ll define and use natural language processing concepts. Since compilation is nothing more than a translation, those concepts also apply to it and represent it accurately.
So, compiling means translating high-level code (Source Code) into the lowest type of code which is Bytecode or Machine Code.
If a compilation process stops at the Bytecode level, this means that an interpreter will kick in later on (run-time), whereas if the final stop of Machine Code is reached, the machine will be able to understand and thus execute it and the compilation’s job will be done.
TypeScript Compilation Flow:
TypeScript source code is first analyzed through the lexing and parsing organs of the compiler.
The lexer identifies and generates tokens out of the source code and then passes it to the parser which builds up the Abstract Syntax Tree (AST).
Lexer
A Lexicon is the vocabulary inventory available in a language, basically, a list of words that have a meaning, and of course words are themselves composed of a list of characters.
So just like for natural language translation, the lexer’s goal is to:
- find words (
tokens) from a text (the source code which is a string composed of many characters). - extract coherent atomic pieces from the source code (aka the text). In other words, it identifies meaningful tokens and outputs them.
Parser
Then, the Parser uses the tokens found by the lexer in order to analyze the speech-language syntax.
In other words, the parser checks if the syntax (grammatical correctness) of your sentences (your code expressions) is correct and builds an internal representation of your code structure under the form of a tree: the Abstract Syntax Tree (AST).
Binder
Then, the AST is extended thanks to the binder which creates a Symbols table.
Consider the binder’s implementation as a big switch-cased statement that returns a Symbol (type) for a given node (for optimization reasons it is represented as a table rather than just injected in the AST).
Checker
The checker consumes all the metadata created in the previous compilation steps in order to type-check the code and find potential errors.
Emitter
The final step is reached, and the Emitter is invoked. Its objective is “simple”: emit JavaScript code out of the AST.
What keyof
and Lookup Types are in Typescript?
In JavaScript it is fairly common to have APIs that expect property names as parameters, but so far it hasn’t been possible to express the type relationships that occur in those APIs.
Enter Index Type Query or keyof; An indexed type query keyof T yields the type of permitted property names for T. A keyof T type is considered a subtype of string.
interface Person {
name: string;
age: number;
location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person }; // string
The dual of this is indexed access types, also called lookup types. Syntactically, they look exactly like an element access, but are written as types:
type P1 = Person["name"]; // string type P2 = Person["name" | "age"]; // string | number type P3 = string["charAt"]; // (pos: number) => string type P4 = string[]["push"]; // (...items: string[]) => number type P5 = string[][0]; // string
You can use this pattern with other parts of the type system to get type-safe lookups.
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key]; // Inferred type is T[K]
}
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
obj[key] = value;
}
let x = { foo: 10, bar: "hello!" };
let foo = getProperty(x, "foo"); // number
let bar = getProperty(x, "bar"); // string
let oops = getProperty(x, "wargarbl"); // Error! "wargarbl" is not "foo" | "bar"
setProperty(x, "foo", "string"); // Error!, string expected number
What is Mapped Types?
One common task is to take an existing type and make each of its properties entirely optional. Let’s say we have a Person:
interface Person {
name: string;
age: number;
location: string;
}
A partial version of it would be:
interface PartialPerson {
name?: string;
age?: number;
location?: string;
}
With Mapped types, PartialPerson can be written as a generalized transformation on the type Person as:
type Partial<T> = {
[P in keyof T]?: T[P];
};
type PartialPerson = Partial<Person>;
Mapped types are produced by taking a union of literal types, and computing a set of properties for a new object type.
What Conditional Types are in Typescript?
Conditional types help describe the relation between the types of inputs and outputs.
interface Animal {
live(): void;
}
interface Dog extends Animal {
woof(): void;
}
type Example1 = Dog extends Animal ? number : string;
type Example1 = number
type Example2 = RegExp extends Animal ? number : string;
type Example2 = string
Conditional types take a form that looks a little like conditional expressions (condition ? trueExpression : falseExpression) in JavaScript:
SomeType extends OtherType ? TrueType : FalseType;
When the type on the left of the extends is assignable to the one on the right, then you’ll get the type in the first branch (the “true” branch); otherwise you’ll get the type in the latter branch (the “false” branch).
Explain advanced set up process and tsconfig’s options.
-
Using Project References for Multi-Project Builds
For large-scale applications or monorepos, you can break your codebase into smaller, interdependent projects. TypeScript’s project references feature makes this possible.
Example: Setting Up Project References
- Create separate tsconfig.json files for each project or module.
- In the “parent” configuration file, reference other projects.
-
Configuring Aliases with paths
While path mapping is a basic feature, you can leverage it for more advanced use cases, such as supporting multiple environments or conditional module resolution. -
Fine-Tuning Build Outputs
You can customize how and where TypeScript generates outputs using options likedeclarationMapandrootDirs. -
Custom Module Resolution
TypeScript allows you to define how modules are resolved usingmoduleResolution. Usenodefor Node.js-style resolution or classic for legacy module resolution. -
Controlling Emit Behavior
Sometimes, you may want to compile TypeScript files without generating JavaScript outputs. This is useful for tasks like type-checking only. -
Improving Performance for Large Projects
For large codebases, performance optimizations can save significant time. -
TypeScript with ESLint and tsconfig.json
To ensureESLintcorrectly interprets your TypeScript configuration, referencetsconfig.jsonin your ESLint settings. -
Using Compiler Hooks
If you need to run custom scripts during compilation, TypeScript supportshooksthrough plugins. Add a custom plugin in yourtsconfig.json.
What is namespace in Typescript?
In TypeScript, namespaces are used to organize code into logical containers, similar to modules in other programming languages. They serve as a way to group related classes, interfaces, functions, and variables under a common namespace, ensuring that identifiers do not clash with those in other parts of the codebase.
namespace Geometry {
export interface Shape {
calculateArea(): number;
}
export class Circle implements Shape {
radius: number;
constructor(radius: number) {
this.radius = radius;
}
calculateArea(): number {
return Math.PI * this.radius ** 2;
}
}
export class Rectangle implements Shape {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
calculateArea(): number {
return this.width * this.height;
}
}
}
// Usage
const circle = new Geometry.Circle(5);
console.log(circle.calculateArea()); // Output: 78.54
Best Practices for Using Namespaces
-
Encapsulation
Encapsulation refers to the bundling of related variables and functions into a single unit, typically a class or a namespace, and restricting access to certain parts of the code. TypeScript namespaces can encapsulate related functionality, preventing them from polluting the global scope and avoiding naming collisions. -
Modularity
Modularity involves breaking down a complex system into smaller, manageable modules that can be developed, tested, and maintained independently. TypeScript namespaces facilitate code organization and modularization by allowing developers to group related functionality into separate namespaces based on functionality or domain. -
Avoid Excessive Nesting
While namespaces offer a hierarchical structure, excessive nesting can lead to code complexity and reduced readability. It’s essential to keep namespaces shallow and avoid nesting them too deeply to maintain code clarity.
Advanced Techniques
-
Namespace Merging
TypeScript allows you to merge multiple namespace declarations with the same name, enabling incremental declaration of components across files. -
Ambients and Declaration Merging
You can use ambient namespaces to declare types for existing JavaScript libraries or APIs and merge them with your own declarations.
Use Case
-
Organizing Utility Functions
Namespaces are particularly useful for organizing utility functions or helper classes that serve a specific purpose. By encapsulating related functionality within a namespace, you can maintain a clean and structured codebase. -
Organizing Modules in a Web Application
By using namespaces to organize modules within a larger application, developers can achieve better code organization, improve code maintainability, and enhance collaboration among team members working on different parts of the application.
Explain import and export modules using ES6 syntax in Typescript.
Understanding the ES Module Syntax in TypeScript
ES Modules (ECMAScript Modules) are the standardized module system in JavaScript. They provide a structured way to organize code using import and export keywords. TypeScript builds on this system, allowing developers to define and manage modules with strong typing.
-
Named Exports: In ES modules, you can export individual elements (such as functions, variables, or classes) from a module using named exports.
export const add = (a: number, b: number): number => a + b;
You can then import these functions in other modules:
import { add, subtract } from './math';
-
Default Exports: You can also export a single element from a module as the default export. This is useful when you want to export one main object or function per module.
const logMessage = (message: string) => {
console.log(message);
};
export default logMessage;
Importing default exports does not require curly branches.
import logMessage from './logger';
-
Re-Exports: TypeScript supports re-exporting items from other modules, allowing you to consolidate multiple exports into a single entry point.
// math.ts export const add = (a: number, b: number): number => a + b; export const subtract = (a: number, b: number): number => a - b; // index.ts export * from './math';
Now, you can import everything from index.ts rather than directly from math.ts:
// app.ts
import { add, subtract } from './index';
console.log(add(1, 2)); // 3
Best Practices for Using ES Modules in TypeScript
-
Use Consistent Module Structure: Having a consistent module structure is essential for maintaining large projects. The general guideline is to use named exports for small utilities or multiple related items, and default exports for a module’s primary export.
Named exports: If a module exports several related items, use named exports.
Default exports: If a module is focused on a single object, class, or function, use a default export.
-
Prefer Named Imports Over Default Imports: Whenever possible, use named imports rather than default imports. This approach helps maintain better readability, allows for more precise imports, and enables tree-shaking (removing unused code during bundling).
Good Example:
import { formatDate, parseJson } from './utilities';
This gives you the advantage of only importing what you need, without importing the entire module.
Bad Example (Avoid):
import * as Utilities from './utilities';
-
Renaming Named Imports with as: Theaskeyword allows you to rename imported entities to avoid naming conflicts or improve clarity in your code.
import { calculateSum as sum, calculateDifference as difference } from './utilities';
This renaming is particularly helpful when the original name is too verbose or clashes with another imported entity.
-
Renaming Default Imports with as: You can also rename a default import using theaskeyword.
import logMessage as log from './logger';
-
Leverage TypeScript’s Path Mapping with tsconfig.json: As projects grow, file paths can become long and difficult to manage. TypeScript allows you to configure custom path mappings in thetsconfig.jsonfile to make imports cleaner.
"paths": {
"@models/*": ["models/*"],
"@utils/*": ["utils/*"]
}
Now, instead of using relative paths:
import { MyClass } from '../../../models/MyClass'
You can now use a more concise import:
import { MyClass } from '@models/MyClass';
-
Don’t Mix require with import Syntax: TypeScript supports both import and require statements, but it’s best practice to avoid mixing the two. Stick with import statements for consistency and to fully embrace the ES module system. Using require is more common in older CommonJS modules. -
Use export type for Type-Only Exports: TypeScript introduces a helpful feature for type-only imports and exports. If you’re exporting a type or interface, use the export type syntax. This helps TypeScript distinguish between type exports and actual value exports, which is particularly useful when using TypeScript’s declaration merging features.
// types.ts
export type User = {
id: string;
name: string;
};
export interface IUser {
id: string;
name: string;
};
export const createUserName = () => "John Doe";
What is Call Signatures in Typescript?
In JavaScript, functions can have properties in addition to being callable. However, the function type expression syntax doesn’t allow for declaring properties. If we want to describe something callable with properties, we can write a call signature in an object type:
(parameter: type): type
type DescribableFunction = {
description: string;
(someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
console.log(fn.description + " returned " + fn(6));
}
function myFunc(someArg: number) {
return someArg > 3;
}
myFunc.description = "default description";
doSomething(myFunc);
Note that the syntax is slightly different compared to a function type expression - use : between the parameter list and the return type rather than =>.
What is Construct Signatures in Typescript?
JavaScript functions can also be invoked with the new operator. TypeScript refers to these as constructors because they usually create a new object. You can write a construct signature by adding the new keyword in front of a call signature:
new (parameter: type): type
type SomeConstructor = {
new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
return new ctor("hello");
}
You can also use them for passing classes around as parameters or return values.
