Start learning free

LESSON 6 OF 348 · WELCOME TO TYPESCRIPT

Name Errors in TypeScript: Cannot find name and ReferenceError

Lesson Read the full explanation

TL ; DR:

  • A NameError occurs when TypeScript sees a word it does not recognize. Some examples:

  • Misspelling a function name:

    console.lg("Heyooo!"); // NameError: name 'console.lg' is not defined

  • Misspelling a variable name:

    let animal = "parrot";
console.log(anmal); // NameError: name 'anmal' is not defined

  • When TypeScript encounters a name error, it immediately stops executing your code and throws a NameError instead.



Full lesson:

Humans are prone to making mistakes. Humans are also typically in charge of creating computer programs. To compensate, programming languages attempt to understand and explain mistakes made in their programs.

Here are two common errors that we encounter while writing TypeScript code:


The SyntaxError:

Syntax errors are mistakes in the use of the TypeScript language, and are analogous to spelling or grammar mistakes in a language like English. For example, the sentence "Would you some tea?" does not make sense – it is missing a verb.

SyntaxError means there is something wrong with the way your program is written. Some examples:

1. Misuse of commas when declaring a string:

let greeting = 'Hey there!";

When we run this code we'll get a SyntaxError: Invalid or unexpected token.

2. Leaving out a parantheses:

console.log"My name is Andy");

When we run this code we'll get a SyntaxError: Unexpected string.

The ReferenceError:

A ReferenceError occurs when the TypeScript interpreter sees a word it does not recognize. Some examples:

1. Misspelling a class / function name:

consle.log("My name is Andy");

When we run this code we'll get a ReferenceError: consle is not defined.

2. Using a non-existent variable / Misspelling a variable's name:

let animal = "parrot";
console.log(aniimal);

When we run this code we'll get a ReferenceError: aniimal is not defined.

Assignment
Follow the Coding Tutorial and let's practice with errors!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · WELCOME TO TYPESCRIPT

    Name Errors in TypeScript, explained

    What a name error is

    Every variable, function and object in your program has a name, and TypeScript looks each name up when it reads your code. If it meets a name that was never declared, it has nothing to connect it to. That is a name error. The usual causes are small: a typo, the wrong capital letter, or a variable used before anyone created it.

    TypeScript has no error called NameError. A name error shows up in two places, depending on when it is caught:

    • At compile time, the compiler (tsc) reports a message such as error TS2552: Cannot find name 'consle'. Did you mean 'console'?
    • While the program runs, the JavaScript that tsc produced throws a ReferenceError, for example ReferenceError: whether is not defined.

    Both messages name the word that could not be found. That word is the first thing to look at.

    Misspelled variables

    Take a variable and a typo in its name:

    let weather: string = "sunny";
console.log(whether);

    The compiler reports Cannot find name 'whether'. Did you mean 'weather'? The suggestion is worth reading: when a similar name exists, TypeScript points straight at it. Names are case sensitive, so Weather is just as unknown as whether.

    Misspelled functions and objects

    The same thing happens when the misspelled name is the object that owns a function:

    consle.log("Welcome!");

    Here consle does not exist, so the compiler says Cannot find name 'consle'. Did you mean 'console'?

    Notice what is different when only the method name is wrong, as in console.lg("Hi"). The object console exists, so there is no name error. The compiler reports a different problem: Property 'lg' does not exist on type 'Console'. Misspelling the part after the dot is a property error, and it is a close cousin of a name error. The fix is the same: compare the spelling with the real name.

    What happens at run time

    TypeScript's compiler reports its errors and, with default settings, still writes the JavaScript file. If you run that file anyway, the program stops at the failing line. Lines before it have already run:

    console.log("first");
console.log(whether);
console.log("never printed");

    The output of the compiled program is first, followed by ReferenceError: whether is not defined. The third line never runs, because an uncaught error ends the program.

    Name errors compared with syntax errors

    A syntax error is a different problem: the code is not valid TypeScript at all, like a sentence with a missing word. Both of these are syntax errors:

    let greeting = 'Hey there!";
console.log"My name is Andy");

    The first has a string opened with a single quote and closed with a double quote. The compiler reports Unterminated string literal. The second has a missing parenthesis and reports ';' expected. With a syntax error, TypeScript cannot even work out the structure of your code. With a name error, the structure is fine, and only one word fails to match anything.

    The lesson's exercise

    The starter code has two lines with unknown names, and the program has to print Welcome! and then sunny:

    consle.log("Welcome!"); // this line produces an error

let weather: string = "sunny";
console.log(whether); // this line produces an error
    1. Read the first error. It points at line 1 and names consle. The built-in object is console, so fix the spelling there.
    2. Read the second error. It points at line 4 and names whether. Line 3 declared weather, so line 4 must use exactly that spelling.
    3. Leave the declaration alone. The variable is correct. The two uses were wrong.

    The fixed program looks like this, and it prints both lines:

    console.log("Welcome!"); // this line produces an error

let weather: string = "sunny";
console.log(weather); // this line produces an error

    The comments are left over from the starter code and no longer describe the lines. They do nothing, so you can delete them.

    A checklist when you see "Cannot find name"

    • Compare the reported name letter by letter with the declaration. Look for swapped letters, a missing letter and capital letters.
    • Check that the variable is declared before the line that uses it, and in a place where that line can see it.
    • If the compiler offers "Did you mean", try the suggestion first.
    • Fix the first error in the list before the others. One typo can cause several messages.

    Key takeaways

    • A name error means TypeScript met a name it does not know.
    • The compiler reports it as Cannot find name at compile time, and the compiled JavaScript throws a ReferenceError when it runs.
    • Names are case sensitive, so weather and Weather are different names.
    • A syntax error means the code is not valid TypeScript. A name error means valid code uses an unknown word.
    • The error message names the culprit. Read it first.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free