This lesson covers TypeScript syntax, variables, and primitives through a practical example involving a developer managing ducks in an application.
In this lesson, we explore the basic TypeScript syntax essential for working on Infrastructure as Code projects. Although TypeScript provides many advanced features, mastering these fundamentals is enough to kickstart your project. In our example, we follow Elmer Code—a developer who loves ducks—as he builds an application to manage the ducks on his pond.We are using the KodeKloud Labs environment, which comes pre-configured with TypeScript, so you’re ready to start right away.Below is the initial project setup demonstrating key TypeScript constructs, including enums, union types, interfaces, and classes:
Copy
Ask AI
// Enum for Duck Typesenum DuckType { Mallard = "Mallard", Muscovy = "Muscovy", Pekin = "Pekin",}// Type for Duck Colors using a Union Typetype DuckColor = "White" | "Brown" | "Black" | "Mixed";// Interface for a Duck's propertiesinterface IDuck { name: string; // Name of the duck age: number; // Age of the duck in years type: DuckType; // Duck type, as defined by the DuckType enum color: DuckColor;// Duck color using the DuckColor union type favoriteToy?: string; // Optional property for the duck's favorite toy}// PondDuck class that implements the IDuck interfaceclass PondDuck implements IDuck { name: string; age: number; type: DuckType; color: DuckColor; favoriteToy?: string; constructor(name: string, age: number, type: DuckType, color: DuckColor, favoriteToy?: string) { this.name = name; this.age = age; this.type = type; this.color = color; this.favoriteToy = favoriteToy; }}
You have a nearly complete project at your disposal. You can choose to delete this starter code and build everything from scratch for a hands-on experience, or modify the existing code as you follow the lesson.
The first step in any new TypeScript project is to install the package dependencies. In our labs, this is achieved by running:
Copy
Ask AI
yarn install
After executing this command, you should see an output similar to the following:
Copy
Ask AI
root in ~/code via v20.17.0 on (us-east-1) took 2syarn installYarn 4.4.0r Resolution stepr @inquirer/type@npm:^1.1.1
Once the installation completes, a simple log message confirms that everything is set up correctly:
Copy
Ask AI
console.log("Let's go!");
This produces a log similar to:
Copy
Ask AI
YN00000: Post-resolution validationYN00002: typescript-fundamentals@workspace:. doesn't provide @types/node (p1f7c1), requested by ts-node.YN00086: Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.YN00006: Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
To start the development server, run:
Copy
Ask AI
yarn dev
You should see logs indicating that the application is running, and that it restarts reactively when changes are detected:
Copy
Ask AI
root in ~/code via v20.17.0 on (us-east-1) took 56s> yarn dev[INFO] 19:40:10 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.2, typescript ver. 5.5.4)Let's go![INFO] 19:40:18 Restarting: /root/code/index.ts has been modified
You will see log messages each time changes are detected, which ensures that TypeScript’s compilation is working correctly.
Elmer Code, our duck-enthusiast developer, is ready to build an app that manages his pond’s ducks—making them quack, fly, or land. The first step is to store basic information about each duck, such as its name and age. In TypeScript, you can declare variables using either the const or let keywords.
TypeScript can automatically infer the type of a variable when you assign it a value. For example:
Copy
Ask AI
let duckType: string = 'Mallard'; // Explicit typinglet duckColor = 'Black'; // TypeScript infers the type as string
Hovering over duckColor in your IDE will confirm that its type is indeed inferred as string. However, if you try to reassign it with a different type, the TypeScript compiler will trigger an error:
Copy
Ask AI
// Example resulting in a compilation error:// duckColor = 1;
Elmer Code, our passionate developer who loves ducks, takes a unique approach to building his application. His strategy involves managing ducks by storing their names, ages, types, and other essential characteristics—all implemented through practical TypeScript code examples.
Elmer’s application aims to manage his ducks efficiently by storing critical details like names, ages, and types.