Basic syntax and types

TypeScript is a statically-typed superset of JavaScript that adds features like strong typing and class-based object-oriented programming to the language. In this tutorial, we’ll cover the basic syntax and types in TypeScript, including variables, functions, classes, interfaces, and more.

Variables

Variables in TypeScript are declared using the let or const keyword, just like in JavaScript. TypeScript also supports type annotations, which allow you to specify the type of a variable using a colon (:) followed by the type..

let myNumber: number = 42;
const myString: string = "Hello, world!";

In this example, we’ve declared a number variable myNumber with a value of 42, and a string constant myString with a value of "Hello, world!".

Functions

Functions in TypeScript can also include type annotations for parameters and return values.

function add(a: number, b: number): number {
  return a + b;
}

In this example, we’ve defined a function add that takes two parameters of type number and returns their sum.

Classes and Interfaces

TypeScript adds support for class-based object-oriented programming, including inheritance and interfaces.

interface Shape {
  getArea(): number;
}

class Circle implements Shape {
  constructor(private radius: number) {}

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.getArea());

In this example, we’ve defined an interface Shape that requires implementing classes to have a getArea method. We’ve then defined a Circle class that implements the Shape interface and calculates the area of a circle. Finally, we’ve created an instance of the Circle class and logged its area to the console.

Other Types

TypeScript has many built-in data types, including:

• number: A numeric data type that includes integers and floating-point numbers.
• string: A string of characters, like “Hello, world!”.
• boolean: A true or false value.
• array: An ordered list of values, like [1, 2, 3].
• tuple: A fixed-length array with a specified data type for each element.
• enum: A set of named values.
• any: A data type that can represent any value.
• void: A data type that represents the absence of a value.
• null and undefined: Data types that represent null and undefined values.

Here’s an example of using some of these data types in TypeScript:

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["Alice", 25];
enum Color { Red, Green, Blue };
let color: Color = Color.Red;
let unknown: any = "some value";
function doSomething(): void {
  // do something here
}
let noValue: null = null;
let undefinedValue: undefined = undefined;

type Point = [number, number];

enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue",
}

function doSomething(value: any): void {
  console.log(value);
}

function throwError(): never {
  throw new Error("Something went wrong!");
}

Conclusion

TypeScript’s syntax and types provide many benefits for web development projects, including improved reliability and maintainability. By understanding the basics of TypeScript’s variables, functions, and data types, you can start taking advantage of the language’s features in your own projects.