TypeScript Types for JavaScript Beginners

TypeScript is JavaScript with a system for describing values. It checks those descriptions while you develop and reports mismatches before the resulting JavaScript runs.

That last detail matters: browsers execute JavaScript, not TypeScript source. A tool removes TypeScript’s type syntax and produces JavaScript. Types improve editing and build-time checks, but they do not exist as runtime objects that validate every piece of outside data.

const lessonTitle: string = "Everyday types";

The : string part is a type annotation. It tells TypeScript that lessonTitle must hold a string.

JavaScript is still the foundation

Valid JavaScript is usually valid TypeScript. The language keeps JavaScript’s values, functions, objects, and runtime behavior, then adds a layer that can reason about how they are used.

function double(value: number) {
  return value * 2;
}

double(6); // Accepted
double("six"); // Type error before the code runs

The error does not make JavaScript’s multiplication operator safer at runtime. It tells the developer that this call contradicts the function’s declared contract.

Type annotations and inference

An annotation appears after the name being described:

let score: number = 0;
const courseName: string = "Web Foundations";
const isPublished: boolean = true;

However, TypeScript can infer, or work out, many types from their initial values:

let score = 0; // inferred as number
const courseName = "Web Foundations"; // inferred from a string value
const isPublished = true; // inferred from a boolean value

Both versions are checked. The inferred version is shorter without losing information. Add annotations where they explain an important boundary—especially function parameters, shared object shapes, and public APIs. You do not need to label every obvious local value.

Everyday primitive types

The three primitive types you will meet constantly are:

• string for text such as "Astro"
• number for ordinary numeric values such as 4 or 3.5
• boolean for true or false

Use the lowercase names. String, Number, and Boolean refer to wrapper types that are almost never what application code intends.

const technology: string = "TypeScript";
const estimatedMinutes: number = 18;
const beginnerFriendly: boolean = true;

If you later write estimatedMinutes = "soon", TypeScript reports that a string cannot be assigned to a number.

Arrays describe the type of each item

Add square brackets after a type to describe an array:

const topics: string[] = ["HTML", "CSS", "TypeScript"];
const lessonTimes: number[] = [12, 18, 15];

Array<string> is another spelling of string[]. Both are valid. The shorter form is easy to read for simple arrays.

TypeScript checks additions too:

const topics: string[] = ["HTML", "CSS"];

topics.push("JavaScript"); // Accepted
topics.push(42); // Type error

This catches a mismatch close to the line that introduced it, rather than leaving a later part of the program to discover an unexpected number.

Objects need a shape

An object type lists its properties and their types:

const lesson: {
  title: string;
  minutes: number;
  published: boolean;
} = {
  title: "TypeScript types",
  minutes: 18,
  published: true,
};

This inline shape is fine once. When several values share it, give the shape a name.

Use an interface for a reusable object shape

interface Lesson {
  title: string;
  minutes: number;
  published: boolean;
  technologies: string[];
}

const firstLesson: Lesson = {
  title: "TypeScript types",
  minutes: 18,
  published: true,
  technologies: ["JavaScript", "TypeScript"],
};

If minutes is missing or has the wrong type, the assignment gets an error. The interface documents what a complete Lesson means to this program.

A type alias is another clear option

type Difficulty = "beginner" | "intermediate" | "advanced";

type Project = {
  title: string;
  difficulty: Difficulty;
};

The Difficulty union allows only three string values. Interfaces and type aliases overlap for object shapes. For now, either can be a good choice. Use a type alias when you need unions or other non-object combinations; use an interface when you want a straightforward named object contract.

A small practical example

This function receives a typed lesson and returns a sentence:

interface Lesson {
  title: string;
  minutes: number;
  technologies: string[];
}

function createLessonSummary(lesson: Lesson): string {
  const technologyList = lesson.technologies.join(", ");
  return (
    lesson.title + " takes about " + lesson.minutes + " minutes and uses " + technologyList + "."
  );
}

const lesson: Lesson = {
  title: "TypeScript types",
  minutes: 18,
  technologies: ["JavaScript", "TypeScript"],
};

console.log(createLessonSummary(lesson));

Try changing minutes to "eighteen". The editor or type-check command should report a mismatch before you execute the generated JavaScript.

Compile-time errors are guidance

A TypeScript error means the checker found two claims that cannot both be true. Read the whole message and follow the names it mentions.

const minutes: number = "18";
// Type 'string' is not assignable to type 'number'.

Usually, the best fix is not a cast. Check whether the value should really be a number, whether outside input needs conversion, or whether your type describes the wrong model.

Common mistakes

Annotating every variable. Inference already handles obvious initialized values. Extra annotations can add noise without improving safety.

Using any to silence an error. any turns off checking for that value and lets uncertainty spread. Prefer a real type, or unknown with a deliberate check when data is genuinely uncertain.

Expecting types to change runtime output. Type annotations are removed. They guide tools and developers; they do not add visible page behavior.

Using a type assertion as proof. Writing value as Lesson tells TypeScript to trust you. It does not inspect the value at runtime.

What to learn next

Next, type function parameters and return values, then learn optional properties and unions. Keep the Everyday Types chapter nearby as a reference. After that, use the types in a small Astro component so the checker protects real content and component props.