Basic Typescript Syntax and Types

Welcome to the “Basic Typescript Syntax and Types” section of our course “Learn Typescript”! In this article, we will cover the fundamentals of Typescript syntax and types, including variables, functions, and basic data types. By the end of this article, you should have a good understanding of these concepts and be able to start writing simple Typescript programs.

Variables

In Typescript, you can declare variables using the “let” or “const” keywords. The “let” keyword is used to declare variables that can be reassigned later, while the “const” keyword is used to declare variables that cannot be reassigned.

For example, the following code declares two variables using the “let” keyword:

let x = 10; 
let y = 20;

You can also specify the type of a variable when declaring it by using a type annotation. For example:

let x: number = 10; 
let y: string = 'hello';

In this example, the type of “x” is “number” and the type of “y” is “string”. Typescript will check that you are assigning values of the correct type to these variables, and it will give you an error if you try to assign a value of the wrong type.

Functions

In Typescript, you can define functions using the “function” keyword followed by the function name, a list of parameters in parentheses, and a block of code in curly braces. For example:

function add(x: number, y: number): number {
  return x + y;
}

In this example, the function “add” takes two parameters of type “number” and returns a value of type “number”. You can specify the return type of a function using a type annotation after the list of parameters, as shown in the example.

You can also define functions using the “arrow function” syntax, which is a shorter and more concise way of defining functions. For example:

const add = (x: number, y: number): number => x + y;

In this example, the function “add” is defined using the arrow function syntax and has the same behavior as the previous example.

Basic Data Types

Typescript supports a variety of basic data types, including numbers, strings, booleans, and null and undefined.

Numbers: Typescript has two types for representing numbers: “number” and “bigint”. The “number” type represents a double-precision floating-point number, which is a number with a decimal point. The “bigint” type represents a large integer value. You can specify a number literal as a “number” by adding a decimal point or an exponent, or you can specify it as a “bigint” by adding the “n” suffix. For example:

let x: number = 10;
let y: bigint = 10n;

In this example, the variable “x” is of type “number” and the variable “y” is of type “bigint”.

Strings: Typescript has a single type for representing strings, called “string”. You can specify a string literal by enclosing it in single or double quotes. For example:

let x: string = 'hello';
let y: string = "world";

Booleans: Typescript has a single type for representing boolean values, called “boolean”. You can specify a boolean literal by using the “true” or “false” keywords. For example:

let x: boolean = true; 
let y: boolean = false;

Null and Undefined: Typescript has two types for representing the absence of a value: “null” and “undefined”. The “null” type represents the intentional absence of a value, while the “undefined” type represents the default value for variables that have not been assigned a value. You can specify a null or undefined literal by using the “null” or “undefined” keywords. For example:

let x: null = null; 
let y: undefined = undefined;

In this example, the variable “x” is of type “null” and the variable “y” is of type “undefined”.

Union Types

In addition to the basic data types described above, Typescript also supports union types, which allow you to specify that a variable can be of multiple types. You can specify a union type by separating the individual types with a pipe (|) symbol.

For example, the following code defines a variable “x” that can be either a “string” or a “number”:

let x: string | number;

You can then assign values of either type to the variable “x”:

x = 'hello';
x = 10;

Type Aliases

Typescript also supports type aliases, which allow you to create a new name for an existing type. You can define a type alias using the “type” keyword followed by the alias name and the existing type. For example:

type ID = string | number;

In this example, the type alias “ID” is defined as a union of “string” and “number”. You can then use the “ID” type in the same way you would use a basic data type:

let x: ID;
x = '123';
x = 456;

Type aliases can be especially useful when you need to use a complex type multiple times in your code, or when you want to give a more descriptive name to a type.

TypeScript has a number of other advanced features, including interfaces, classes, and enums, which we will cover in future sections of our course.

Conclusion

In conclusion, this article has covered the basics of Typescript syntax and types, including variables, functions, basic data types, union types, and type aliases. With this knowledge, you should now be able to start writing simple Typescript programs and using Typescript to type-check your code. In the next sections of our course, we will dive deeper into the advanced features of Typescript and explore how to use them to build larger and more complex applications.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

let x = 10;
x = 20; // valid

const y = 10;
y = 20; // invalid

let x: number = 10;
let y: string = 'hello';

function add(x: number, y: number): number {
  return x + y;
}

const add = (x: number, y: number): number => x + y;

let x: string | number;

function getResult(): string | number {
  // logic to determine the result goes here
  return 'success'; // or return 42;
}