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.
What is the difference between the “let” and “const” keywords in Typescript?
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:
let x = 10;
x = 20; // valid
const y = 10;
y = 20; // invalid
In this example, the variable “x” is declared using the “let” keyword and can be reassigned, while the variable “y” is declared using the “const” keyword and cannot be reassigned.
How do you specify the type of a variable in Typescript?
To specify the type of a variable in Typescript, you can use a type annotation after the variable name. 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.
How do you define a function in Typescript?
To define a function in Typescript, you can use 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;
What are the basic data types in Typescript?
The basic data types in Typescript are: “number”, “string”, “boolean”, “null”, and “undefined”.
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.
The “string” type represents a sequence of characters. You can specify a string literal by enclosing it in single or double quotes.
The “boolean” type represents a boolean value, which can be either “true” or “false”.
The “null” type represents the intentional absence of a value.
The “undefined” type represents the default value for variables that have not been assigned a value.
What are union types in Typescript?
Union types in Typescript 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:
let x: string | number;
In this example, the variable “x” is defined as a union of “string” and “number”, which means it can be assigned values of either type.
You can use union types to allow for more flexibility in your code, or to represent values that can take on multiple different types. For example, a function that returns a string or a number might be defined as follows:
function getResult(): string | number {
// logic to determine the result goes here
return 'success'; // or return 42;
}
In this example, the function “getResult” is defined as returning either a “string” or a “number”, depending on the result of the logic inside the function.