☕️ 5 min read

Functions in TypeScript

avatar
Milad E. Fahmy
@miladezzat12

Functions

Parameter Type Annotations

In TypeScript, function parameters may be given type annotations with the same syntax as variable declarations name: string

function greet(name: string) {
  console.log(`Hello, ${name}`)
}

greet('Milad') // Prints: Hello, Milad

greet(12345) // Error: argument '12345' is not assignable to parameter of type 'string'

by placing :string after name parameter, we're declaring that name is of type string.

Optional Parameters-

TypeScript normally gives an error if we don't provide a value for all arguments in a function.

function greet(name: string){
  console.log(`Hello, ${name || 'Anonymous'}`);
}

greet('Milad); // Prints: Hello, Milad
greet(); // Prints: TypeScript Error: Expected 1 arguments, but got 0.

for making a parameter is opional we add ? after parameter, this tells TypeScript that the parameter is allowed to be undefined and doesn't always have to be provided.

function greet(name?: string) {
  console.log(`Hello, ${name || 'Anonymous'}!`)
}
greet() // Prints: Hello, Ananymous!

Default Parameters

if a parameter is assigned a default value, TypeScript will infer the variable type to be the same as the default value's type.

function greet(name = 'Anonymous') {
  console.log(`Hello, ${name}`)
}

note: greet() function can recieve s string or undefined

Inferring Return Types

TypeScript can also infer the types of values returned by functions.

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

const myGreeting = createGreeting('Aisle Nevertell')

Here’s how TypeScript can infer myGreeting above to be of type string:

  1. createGreeting()’s return statement is followed by a string variable, so createGreeting() is inferred to return string.
  2. createGreeting('Aisle Nevertell') therefore must result in a value of type string.
  3. myGreeting is initialized to createGreeting('Aisle Nevertell'), which is a value with the type string.

Explicit Return Types

If we’d like to be explicit about what type a function returns, we can add an explicit type annotation after its closing parenthesis. Here, we use the same syntax as other type annotations, a colon followed by the type. TypeScript will produce an error for any return statement in that function that doesn’t return the right type of value.

function createGreeting(name?: string): string {
  if (name) {
    return `Hello, ${name}!`
  }

  return undefined
  //Typescript Error: Type 'undefined' is not assignable to type 'string'.
}

Void Return Type

It is often preferred to use type annotations for functions, even when those functions don't return anything

// without any annotation return type
function lgGreeting(name: string) {
  console.log(`Hello, ${name}!`)
}
// with void annotation type
function logGreeting(name: string): void {
  console.log(`Hello, ${name}!`)
}

Documenting Functions

TypeScript recognize JavaScript comment syntax:

// This is a single line comment

/*
This is a 
multiline
comment
*/

But it’s common in TypeScript to see a third comment style: documentation comments. A documentation comment is denoted with the first line /*_ and a final line _/. It’s common for each line within the comment to start with an asterisk (*):

/**
 * This is a documentation comment
 */