TypeScript Basic Syntax Tutorial

What is Syntax

Syntax is the way we write code. It defines a set of rules for developers, and every programming language defines its own syntax.

Compiler Commands

In the previous lesson we learned how to compile a single script by using the CLI.

We aren’t limited to compiling scripts one by one. The TypeScript compiler provides us with the following options.

Compiler Flags

Compiler flags are keywords that we add to our compile command to change the behaviour of the compiler when it compiles our code.

The following table lists some common flags for the TSC compiler.

For a full list, please see the official TypeScript documentation on compiler flags .

Comments

Comments allow us to document our code and enhance its readability. Comments ignored by the compiler, which means the compiler won’t try to execute any text or code written inside a comment.

In most cases, we shouldn’t need comments, our code should be written cleanly and clearly enough so that it’s obvious as to what the code does. That said, there are many situations where we should make use of comments.

• When learning programming, or a new language, it’s helpful to comment our understanding of the code.
• When working on large projects as part of a group, we should provide comments so that other developers immediately understand what’s going on.
• When using external libraries it may be useful to include short comments so it’s not neccesary to visit the library’s documentation that often.
• When we’re working with complex code, it may not be immediatly clear what the code is supposed to do. Commenting would make it easier if we need to come back to the code at a later time.
• When we’re debugging/testing. We may want to temporarily remove pieces of code from execution by commenting them out.

TypeScript supports both block comments and C++ style single line comments.

Block comments consist of an open tag and a close tag.

/*
    Anything between the open and
    close tags is a comment even
    if they span multiple lines
*/

C++ style line comments are prefixed with two slashes and is only used on a single line.

 // This is a single line comment

Most programmers prefer to use single line comments, even if they write multiple lines.

// Maybe it's because it's simply
// faster, but most devs like to
// use line comments instead of
// comment blocks

Identifiers (names)

An identifier is the name we use to identify things like variables, functions etc. There are a few rules and conventions when it comes to naming our identifiers, let’s go through some of them now.

1. A name cannot start with a numerical value, but may contain a number inside of it.

// Not allowed
21_Jump_Street

// Allowed
mambo_number_5

2. A name may start with uppercase or lowercase alphabetical letters (A - Z or a - z), underscores ( _ ), and the dollar symbol ( $ ).

// Allowed
Name
name
_name

3. A name may not contain special characters such as @, % etc.

// Not allowed
^_^
usern@ame
#lostsock#thestruggleisreal

4. Most names are case sensitive, which means that a name with lowercase letters is not the same as a name with uppercase letters.

// Not the same
learning
LearNing
LEARNING

5. A name should not contain a TypeScript/Javascript specific keyword. Keywords are words that are reserved for special uses.

if
enum
namespace

The convention in TypeScript is to use PascalCase or camelCase to name identifiers.

When using pascal case, the first letter of a word is uppercase. If the name has multiple words, each new word is directly connected to the previous word but the first letter is also uppercase.

// Pascal case
Name
FirstName

Typically, classes and enums use pascal case.

When using camel case, the first word of a name is lowercase. If a name has multiple words, each new word is directly connected to the previous word but the first letter is uppercase.

// Camel case
name
firstName

note Typically, namespaces, functions, function parameters, methods and fields use camel case.

Constants are usually written in only uppercase and words are separated with underscores.

// Constants
FIRST_NAME

Keywords

Keywords are reserved words that have a special meaning to TypeScript.

Reserved Words:

Strict Mode Reserved Words:

Contextual Keywords:

Scope

TypeScript uses open and close curly braces to define local scope. Everything inside the curly braces is of that scope.

function logger() {

  var msg1 = "Hello"
  let msg2 = "World"
}

In the example above, the variables msg1 and msg2 is between the logger() function’s curly braces.

The variable is in the function’s local scope, it belongs to the logger() function and cannot be used outside of the curly braces.

Brace Convention

In TypeScript we’re allowed to place our open curly braces on the same line as the header, or on its own line.

// TypeScript/Javascript Convention
function logger() {

  var msg1 = "Hello"
  let msg2 = "World"
}

// C++ style convention
function logger()
{
  var msg1 = "Hello"
  let msg2 = "World"
}

The convention in TypeScript is the same as in Javascript, to place the opening curly brace on the same line as the header.

Summary: Points to remember

• Syntax is the way we write code.
• We can use different commands for different compilations/transpilations.
• We can add flags to our commands to change the compiler behaviour.
• Comments allow us to document our code and are ignored.
• Identifiers are the names we give things.
• Keywords are reserved words that have a special meaning.
• Curly braces are typically written on the same line as the header.