As discussed in TypeScript Basics: Type System, JavaScript allows for flexibility in its domain. Just like the duality of nature, this can be both a good and bad thing. With no security to check the inputs in the front door (parameter), functions may return unwanted results.
Parameter Type Annotations
Looks like a problem. Here comes security — TypeScript. In TS, function parameters can be given types just like variables. They can be annotated to “screen” the arguments that are passed in function calls.
In the example above, the string “five” is not a number so TS will pick up and bar its function call.
Optional & Default Parameters
Sometimes in certain use cases for functions, we do not wish to give an argument but still maintain the parameter type. This can be accomplished by simply putting a “?” after parameter name and before the semicolon (:).
Running the code above produces,
When a parameter is initialized with a default argument (value), TypeScript will do its magic and assign the default value’s type to be the parameter’s type. This is just like the type inferences we saw for variables.
Running the code above produces,
However, if we input a string, then TS will throw an error.
Return Types
Outside security is not enough. There can be trouble brewing inside as well — TypeScript’s got it covered. Again, TS can infer the return type of a function by simply looking at its return statement.
In this example, the function shouldBeStr() takes in a string argument and returns a string. TS infers that it should return a string. When the variable check is assigned a different data type (e.g., boolean) and tried to set its value to the shouldbeStr(‘yes’), TS throws an error.
TypeScript also allows for explicit return types in functions, which can be specified by typing the data type after the “:” trailing the parentheses housing the parameter (red). Explicit return types can also be written using the arrow function syntax (green).
Both will throw the same errors in line 9. Notice the variable check is assigned a boolean type and is set equal to shouldBeStr(‘yes’), which was passed a string argument rather than the allowed number argument.
The void return type is used when a function does not return anything. Even though TS will not throw any error if void is not specified, it is customary to specify a return type for functions. Type any can be used in this case as well.
Function Documentation
In addition to the JavaScript syntaxes for commenting, such as “// single line” or “/* multi-line */”, TypeScript uses a third type called documentation comments “/** doc comments */”, which written directly before a function. They are primarily used to provide a brief description of what the function does, its parameters (using @param), and its return value (using @return).
/**
* DOCUMENTATION COMMENTS FOR FUNCTION NICKNAME
* Combines two strings to create a nickname
*
* @param str1 - The first input string
* @param str2 - The second input string
* @return String message with nickname
*
*/function nickName(str1: string, str2: string): string {
return `Your nickname is: ${str1 + str2}`;
}let yourNickName = nickName('Pizza', 'Lover')
console.log(yourNickName) //-> "Your nickname is: PizzaLover"
If you have done any LeetCode problems in JavaScript, you will notice these documentation comments on top of functions.
Credit & Inspiration: Codecademy’s Learn TypeScript course
