In TypeScript, we can add type annotations to function parameters with the same syntax as variable declarations - a colon : next to the name of the parameter. The type annotations ensure that the parameters are of correct type:
function occupation(title: string) {\n console.log(`I am a ${title}`)\n}\n\noccupation(10)\n// Argument of type 'number' is not assignable to parameter of type 'string'.By placing : string after the title parameter, we are declaring that title is of type string. Any invocation of occupation() should pass a value of type string as the first argument, or else an error will be thrown.
Parameters that we don’t provide type annotations are assumed to be of type any - the same way variables are.
function personDetail(name: string, age) {\n console.log(`My name is ${name} & I am ${age} years old.`)\n}\n\npersonDetail("Josh", "twenty")\n// no error\n\npersonDetail("Chris", 26)\n// no errorWe can indicate that a parameter is optional by adding a ? after its name. This tells TypeScript that the parameter is allowed to be undefined and doesn’t always have to be provided.
function greeting(name? : string) {\nconsole.log(`Hello ${name || “stranger”}`);\n}\n\ngreeting();\n// Hello strangerWe can also make a parameter optional by assigning it a default value. With default parameters, TypeScript will infer the variable type to be the same as the default value’s type.
\nfunction greet(name = "Anonymous") {\nconsole.log(`Hello ${name}`)\n};\n\ngreet();\nHello AnonymousThe function greet() can receive a string or undefined as its name parameter. If any other type is provided, TypeScript will consider that as a type error.
TypeScript can also infer the types of values returned by functions. It does this by looking at the types of the values after a function’s return statements.
function welcome(name: string) {\n return `Namaste, ${name}!`\n}\n\nwelcome("George")Here’s how TypeScript can infer the value returned by the welcome() function to be of type string:
Let’s see how this can help us fix bugs:
\nfunction inchToCms(inch: number) {\n return `${inch * 2.54} cms`\n}\n\nconst result: number = inchToCms(3)\n// Type 'string' is not assignable to type 'number'.Here, TypeScript was able to infer that result was being assigned a value of type string, despite it being declared as a variable of type number. This correctly results in an error being surfaced.
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 greeting(name?: string): string {\n if (name) {\n return `Hello, ${name}!`\n }\n\n return undefined\n //Typescript Error: Type 'undefined' is not assignable to type 'string'.\n}We can also explicitly state return types for arrow functions. We’ll see the same kinds of error messages for both function types.
\nconst arrowGreeting = (name?: string): string => {\n if (name) {\n return `Hello, ${name}!`\n }\n\n return undefined\n // Typescript Error: Type 'undefined' is not assignable to type 'string'.\n}Sometimes, functions don’t return anything. We might write a function just to log the value of something in the console. In such scenarios, we must treat the return type as void.
\nA proper type annotation for a function that doesn’t return anything would look like this:
\nfunction tripled(number = 10): void {\n console.log(`${number} * 3`)\n}\n\ntripled()TypeScript recognizes JavaScript comment syntax:
\n// This is a single line comment.\n\n/*\nThis is a\nmultiline\ncomment\n*/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 (*).
\n/**\n* This is a documentation comment\n*/Documentation comments are especially useful for documenting functions. We place a function’s documentation comment in the code directly above the function declaration. We can use special tags within the comment to highlight certain aspects of the function. We can use @param to describe each of the function’s parameters, and we can use @returns to describe what the function returns:
/**\n * Returns the sum of two numbers.\n *\n * @param num1 - The first input number\n * @param num2 - The second input number\n * @returns The sum of `num1` and `num2`\n *\n */\n function sum(num1: number, num2: number): number {\n return num1 + num2;\n }\n}Many text editors will helpfully display documentation comments, for example, when hovering over a function name.
\n","frontmatter":{"title":"Learn TypeScript - Functions","date":"2021-06-21"}}},"pageContext":{"slug":"/learn-typescript-functions/","prev":{"fields":{"slug":"/how-to-style-links-in-css/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/create-a-light-and-dark-mode-toggle-in-react-using-gsap/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}