Start learning free

LESSON 5 OF 348 · WELCOME TO TYPESCRIPT

Syntax Errors in TypeScript: Missing Quotes and Parentheses

Lesson Read the full explanation

TL ; DR:

  • Syntax errors are mistakes in the use of the TypeScript language, analogous to spelling or grammar mistakes in a language like English. For example:


  • Omitting quotes when working with strings:

    console.log("Welcome!);

  • Omitting parantheses when using the console.log function:

    console.log("Let's code!";

  • When TypeScript encounters a syntax error, it immediately stops executing your code and throws a SyntaxError 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

    Syntax Errors in TypeScript, explained

    What a syntax error is

    A syntax error is a mistake in the way a program is written, like a spelling or grammar mistake in English. The sentence "Would you some tea?" is missing a verb, and a reader notices at once. The compiler is just as strict. If the code breaks the rules of the language, it can't work out what you meant, and it refuses to build the program.

    TypeScript code is checked by the compiler, tsc, which reports problems as errors with a code that starts with TS, a position, and a short message. For ordinary type errors the compiler still writes the JavaScript file. A syntax error is different in practice: the compiler guesses what you meant and writes JavaScript anyway, but that JavaScript may not be valid. With an unterminated string, Node refuses to run the file and throws SyntaxError: Invalid or unexpected token. With a missing closing parenthesis, the compiler's guess can happen to run, so a program with the error may still print something. Either way, the reported error is the thing to fix.

    Typical syntax errors

    A missing closing quote

    Every string needs a quote at both ends, of the same kind:

    console.log("Welcome!);

    The string never ends, so the compiler reports:

    error TS1002: Unterminated string literal.

    Mixing the kinds has the same effect. In let greeting = 'Hey there!"; the string opens with a single quote, so the double quote doesn't close it.

    A missing parenthesis

    A call needs its opening and closing parentheses:

    console.log("Let's code!";

    error TS1005: ')' expected.

    If the opening one is missing instead, as in console.log"My name is Andy");, the compiler reports ';' expected. The message names the first place where the code stopped making sense, which is not always where the mistake is. If the line shown looks fine, check the line above it.

    A related error: names that don't exist

    Another common mistake is a misspelled name. This is not a syntax error, because the code is written correctly, but the name means nothing:

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

    error TS2552: Cannot find name 'consle'. Did you mean 'console'?

    The same happens with a variable. After let animal = "parrot";, the call console.log(aniimal) reports that it cannot find the name aniimal. TypeScript catches this while compiling. In plain JavaScript, the same mistake only shows up when the line runs, as a ReferenceError.

    How to read an error message

    1. Find the position. The message includes a line and a column, written like (1,21). Start at that line.
    2. Read the message. ')' expected means a closing parenthesis is missing. Unterminated string literal means a quote is missing.
    3. Look at the line before it. An unclosed bracket or quote can make the error appear later than the real mistake.
    4. Fix one error and compile again. One mistake can cause several messages, and fixing the first often clears the others.

    For example, the two broken lines in the exercise produce three messages together: a missing ) on line 1, an unterminated string on line 2, and a second missing ) reported at the start of line 3, because the call on line 2 never closes either.

    The exercise

    The starter code has two lines that should print Hello! and I love coding!, but each has a small syntax error:

    console.log("Hello!";
console.log("I love coding!);

    Steps to fix it:

    1. On line 1 the string is closed, but the call is missing its closing parenthesis. Add ) before the semicolon.
    2. On line 2 the string is missing its closing double quote. Add " after the exclamation mark.
    3. Line 2 then also needs its closing parenthesis and semicolon, so it ends with ");.

    The corrected program compiles without errors and prints the two messages, one per line. The lesson's tests check the output, so keep the text exactly as given.

    Key takeaways

    • A syntax error means the code breaks the language's rules, so the compiler reports it and its output may not be valid.
    • Every opening quote and parenthesis needs a matching closing one.
    • The reported position is where the compiler got lost, so check the line above as well.
    • A misspelled name is reported as Cannot find name, reported by the compiler.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free