Basic Primitives and Type Annotations in TypeScript

Previously in this course, we covered how to set up your TypeScript environment and configure your project via tsconfig.json. Now that your tooling is ready, it’s time to move from "JavaScript that happens to run in a .ts file" to true static typing.

In this lesson, we will focus on Type Annotation—the act of explicitly telling the compiler what kind of data a variable should hold. By mastering these basics, you shift the burden of bug-catching from your users to your editor.

The Power of Static Typing for Primitives

In standard JavaScript, a variable is just a container; you can assign a string to it one moment and a number the next. While flexible, this leads to the dreaded "undefined is not a function" errors.

Static typing allows us to define the "shape" of our data before the code even runs. A Type Annotation is the syntax we use to enforce these rules.

Annotating Strings, Numbers, and Booleans

To annotate a variable, you add a colon (:) followed by the type name immediately after the variable name.

TYPESCRIPT
// Explicit Type Annotations
let taskName: string = "Complete the documentation";
let priorityLevel: number = 1;
let isCompleted: boolean = false;

These three types—string, number, and boolean—are the foundational primitives in TypeScript.

Identifying and Fixing Type Mismatches

The primary benefit of these annotations is that the TypeScript compiler will immediately flag an error if you attempt to assign the wrong data type.

Consider this snippet:

TYPESCRIPT
let taskCount: number = 5;
taskCount = "six"; // Error: Type CE9178">'string' is not assignable to type CE9178">'number'.

When you see an error like this, your first step is to determine if the data is wrong or if the annotation is too restrictive. If you intended for taskCount to only ever be a number, you must fix the assignment. If the variable legitimately needs to hold both types, you'll eventually learn about more advanced features like Union Types, but for now, keep your annotations focused and strict.

Hands-on: Building the Task API Client

We are building a task API client throughout this course. Let’s initialize the first pieces of data for our client. Create a file named client.ts and annotate the following variables:

TYPESCRIPT
// client.ts
const apiBaseUrl: string = "https://api.tasks.example.com";
const timeoutMs: number = 5000;
const isDebugMode: boolean = true;

console.log(CE9178">`Connecting to ${apiBaseUrl} with ${timeoutMs}ms timeout.`);

Practice Exercise

1. Create a variable named taskDescription and annotate it as a string.
2. Create a variable named retryCount and annotate it as a number.
3. Try assigning a boolean value to retryCount. Observe the red squiggly line in your editor and the error message in your terminal.
4. Correct the error so the code compiles successfully.

Common Pitfalls

• Case Sensitivity: Always use lowercase for primitives (string, number, boolean). Using String or Number refers to the JavaScript wrapper objects, which is rarely what you want in your type annotations.
• Over-annotation: Don't annotate every single variable if the type is obvious. We will cover how to avoid redundant typing in the next lesson on Type Inference.
• Assuming Type Coercion: TypeScript does not perform "magic" type conversions. If a function expects a number, passing a numeric string (e.g., "5") will cause a type error. You must explicitly convert the data (e.g., Number("5")) before passing it.

FAQ

Q: Why use annotations if I can just use let? A: Annotations serve as documentation and a safety net. They prevent you from accidentally passing the wrong data into a function or object, which is crucial as your application grows.

Q: What happens if I don't use annotations? A: TypeScript uses Type Inference. If you omit the annotation, TypeScript will try to guess the type based on the initial value. We will explore this in detail next.

Q: Can I change a variable's type later? A: No. Once a variable is annotated (or inferred) as a number, it must remain a number for its entire lifecycle.

Recap

By applying Type Annotation to your variables, you transform your code into a self-documenting system. We’ve learned to use string, number, and boolean to define our data clearly. When you encounter a "Type X is not assignable to type Y" error, remember that it's the compiler working to protect you from runtime crashes.

Up next: Type Inference in Practice — where we look at how to let TypeScript do the heavy lifting for us.