- Published on
Functions in TypeScript
- Authors
- Name
- 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 beundefined
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 sstring
orundefined
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:
createGreeting()
’s return statement is followed by a string variable, socreateGreeting()
is inferred to return string.createGreeting('Aisle Nevertell')
therefore must result in a value of type string.myGreeting
is initialized tocreateGreeting('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
*/