Start learning free

LESSON 30 OF 348 · FUNCTIONS I

Defining a Function in TypeScript: Fixing the Buggy Code

Practice Read the full explanation

Inside the code editor we've tried just to define a function (without calling the function) that would print the message Hey, Andy! whenever called.

It seems like we made some mistakes because when we run our code we get a SyntaxError.


Assignment:

Your task is to fix our function definition such that no errors will be produced.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · FUNCTIONS I

    Buggy Code Defining A Function in TypeScript, explained

    What the code is supposed to do

    The goal is to define a function named sayMyName that prints Hey, Andy! whenever it is called. The task asks only for the definition. Nothing calls the function, so a correct answer prints nothing when it runs.

    The code you start with looks almost right:

    function sayMyName(): void
    console.log("Hey, Andy!");
    

    Your job is to find out what is wrong with it and fix the definition.

    What goes wrong

    A person reading these two lines assumes that the second line belongs to the first. The compiler doesn't make that assumption. It reads function sayMyName(): void as a function header and expects a body in curly braces to follow. It finds a separate statement instead.

    This produces two problems:

    1. The function has no body. The header is complete, but nothing is attached to it. TypeScript reports error TS2391, Function implementation is missing or not immediately following the declaration.
    2. The print line is outside the function. The console.log call is an ordinary top-level statement. It does not belong to sayMyName, so it runs immediately, once, when the program starts, instead of waiting for a call. The compiler reports the error but still produces JavaScript, and running that JavaScript prints Hey, Andy! straight away. The compiled output contains no sayMyName function at all, so a call to it would fail with ReferenceError: sayMyName is not defined.

    Why the braces matter

    A function declaration has these parts:

    • the function keyword;
    • the name, here sayMyName;
    • parentheses for the parameters, empty here;
    • an optional return type after a colon, here : void, meaning that the function returns nothing;
    • the body, the statements to run, wrapped in { and }.

    The braces are the only thing that tells TypeScript where the body starts and ends. Line breaks and indentation don't count. If you indented the console.log line under the header but added no braces, the code would look right to a reader and still fail the same way.

    Fixing it step by step

    1. Keep the header. It already has the exact name the task asks for and the void annotation.
    2. Open the body by adding { at the end of the header line.
    3. Move the statement inside. The console.log line goes between the braces, indented by four spaces so readers can see it belongs to the function.
    4. Close the body with } on its own line.
    5. Don't add a call. The task says to define the function, not to run it.

    The fixed code in TypeScript

    function sayMyName(): void {
        console.log("Hey, Andy!");
    }
    

    Some details about these three lines:

    • void is optional. Because the function returns nothing, TypeScript infers void on its own. The annotation documents the intent, and the compiler checks that the function doesn't return a value.
    • The annotation disappears at run time. The compiled JavaScript is just function sayMyName() { ... }.
    • The exact text matters. The comma, the space and the exclamation mark in "Hey, Andy!" are all part of the output.

    Defining is not running

    Once the definition is correct, nothing has been printed yet. The body runs only when a call writes the name followed by parentheses:

    function sayMyName(): void {
        console.log("Hey, Andy!");
    }
    
    sayMyName(); // Hey, Andy!
    sayMyName(); // Hey, Andy! (each call runs the body again)
    

    This example is only for seeing the function work. For this lesson, submit the definition alone.

    Common mistakes

    • Indenting instead of adding braces. The code looks fine but still has a header without a body.
    • Forgetting the closing brace. The compiler reaches the end of the file while still inside the body.
    • Empty braces. function sayMyName(): void {} followed by the console.log line gives the function an empty body and leaves the print outside it, so the original problem remains.
    • Changing the name. Names are case-sensitive, so saymyname and SayMyName are different functions from the sayMyName the task asks for.
    • Adding a call. Calling the function prints the message, which the task didn't ask for.

    Checking your fix

    Make the change in the editor above and run it. A correct fix produces no compiler errors and prints nothing, because the function is defined but never called.

    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free