Welcome to our first lesson on TypeScript, a superset of JavaScript that adds static types to the language. TypeScript has garnered widespread appreciation for its ability to catch errors early through its type system and to make JavaScript development more robust and maintainable. Today, we will embark on an exciting journey into the basics of TypeScript. By the end of this lesson, you'll have a solid understanding of TypeScript syntax, how to write comments, the role of indentation, and how to use the console.log() function to display messages.

Syntax refers to the set of rules that defines the combinations of symbols that are considered to be correctly structured programs in a programming language. TypeScript builds on JavaScript's syntax, adding optional static typing. Let's start with something very simple:

TypeScript
Copy to clipboard
1console.log("Hello, and welcome to the TypeScript World!");

Here, console.log() is a method that TypeScript (and JavaScript) provides to output the provided input to the console, and "Hello, and welcome to the TypeScript World!" is a string that gets printed on the console.

Comments in code are like notes you might scribble in the margins of a book; they can explain what's happening, why a piece of code was written a certain way, or even specify tasks to be done later. TypeScript inherits its commenting syntax from JavaScript:

TypeScript
Copy to clipboard
1// This is a single-line comment in TypeScript.
2
3/*
4This is a
5multi-line comment in TypeScript.
6*/

In the given TypeScript code snippet, you see a single-line comment starting with //, and a block of lines enclosed within /* and */, forming a multi-line comment.

While TypeScript (and JavaScript) doesn't use indentation to create blocks of code (curly braces {} are used for that purpose), following a consistent indentation style makes your code cleaner and easier to read. Here's an example (focus on the indentation, the meaning of if will be covered later):

TypeScript
Copy to clipboard
1if (5 > 2) {
2    console.log("Five is indeed greater than two!");  // This line is indented
3}
4console.log("End of program");  // This line is not indented

The console.log() function in TypeScript works similarly to that in JavaScript; it is a powerful ally in displaying information on the console. It can print strings, numbers, the results of expressions, or even complex objects:

TypeScript
Copy to clipboard
1console.log("Hello, World!"); // Prints a constant string
2console.log(5); // Prints a constant number
3let x = 10;   // Defines a variable
4console.log(x); // Prints the value of a variable
5console.log(3 * 7); // Prints the result of an expression - 21
6
7// The next line prints: "TypeScript can make you 10 times more productive!"
8console.log("TypeScript can make you", x, "times more productive!"); // Combine text and a variable

The examples demonstrate how console.log() takes an argument and outputs it to the console.

Congratulations on completing your very first TypeScript lesson! You've taken your first steps into an exciting world by grasping TypeScript's unique syntax, recognizing the value of commenting for code clarity, and having explored console.log() for output in TypeScript. Coming up next, we have interactive coding exercises planned for you to apply and solidify your foundational understanding. Get ready to delve even further into the fascinating universe of TypeScript programming!