TypeScript is a statically typed language, which means that variables, functions, and objects must have their types declared before they can be used. Type annotations and inference are two features that help developers write and maintain type-safe code in TypeScript.

Type Annotations
A type annotation is a way to explicitly declare the type of a variable, function parameter, or function return type. Type annotations are added using a colon followed by the type name. For example:

let age: number = 30;
function add(x: number, y: number): number {
return x + y;
}

In the above code, we have declared the age variable to be of type number and the add function to take two parameters of type number and return a value of type number.

Type annotations can be helpful in catching type errors at compile-time and making the code more self-documenting. However, they can also be verbose and repetitive, especially for complex types.

Type Inference
Type inference is a feature of TypeScript that allows the compiler to automatically determine the type of a variable based on its initialization value. For example:

let age = 30;

In this case, TypeScript infers the type of age to be number because it is initialized with a number value. Similarly, the type of a function parameter or return value can be inferred based on the context in which it is used. For example:

function add(x: number, y: number) {
return x + y;
}

Here, TypeScript infers the return type of add to be number because it returns the result of adding two numbers.

Type inference can reduce the amount of code that needs to be written, especially for simple types. However, it can also make the code less self-documenting and more prone to type errors if the inferred type is not what was intended.

Type Annotations vs Type Inference
Type annotations and inference are not mutually exclusive, and both can be used together to write type-safe code that is concise and self-documenting. For example:

let age: number = 30;
let name = "John Doe"; // Type inference

function add(x: number, y: number): number {
return x + y;
}

interface Person {
name: string;
age: number;
}

function createPerson(name: string, age: number): Person {
return { name, age }; // Shorthand object literal syntax
}

In this code, we have used type annotations for the age variable and the return type of the add function, while using type inference for the name variable, the function parameters, and the Person interface.

In summary, type annotations and inference are two features of TypeScript that help developers write and maintain type-safe code. Type annotations are explicit declarations of types, while type inference allows the compiler to automatically determine types based on context. By using both features together, developers can write code that is both concise and self-documenting.

Here’s a more detailed example of how type annotations and inference can work together in TypeScript:

Type annotations

let firstName: string = "John";
let age: number = 30;

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

interface Person {
  name: string;
  age: number;
}

function getPerson(name: string, age: number): Person {
  return { name, age };
}

Type Inference

let lastName = "Doe";
let sum = (x: number, y: number) => x + y;

let person = getPerson(firstName, age);
let greeting = greet(`${firstName} ${lastName}`);

In this example, we have used type annotations to declare the types of the firstName, age, greet, and getPerson variables and functions. We have also used an interface to define the shape of a Person object.

On the other hand, we have used type inference to let TypeScript automatically determine the types of the lastName and sum variables. We have also used type inference to determine the types of the person and greeting variables based on the context in which they are used.

Type inference can be especially useful when working with complex types, such as function signatures or object literals with nested properties. For example:

Type inference with function signatures

type MathOperation = (x: number, y: number) => number;

function calculate(op: MathOperation, x: number, y: number): number {
  return op(x, y);
}

let result = calculate((a, b) => a * b, 3, 5); // inferred as number

// Type inference with nested object literals
let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

person.address.state = "NY"; // inferred as string

In this example, we have used type inference to automatically determine the type of the op parameter in the calculate function based on the function signature of the argument passed in. We have also used type inference to determine the types of the result and person variables based on the structure of the values assigned to them.

In summary, type annotations and inference are two powerful features of TypeScript that can be used together to write type-safe and concise code. Type annotations provide explicit declarations of types, while type inference allows TypeScript to automatically determine types based on context. By using both features judiciously, developers can strike a balance between verbosity and safety in their TypeScript code.