TypeScript Primitive Types

Beginner ~20 min read

TypeScript has three main primitive types that form the foundation of type-safe programming: string, number, and boolean. Unlike Java with its 8 primitive types, TypeScript keeps it simple while maintaining powerful type safety. Let's master these fundamental types!

The 3 Primitive Types

TypeScript's primitive types correspond directly to JavaScript's primitive values, but with added type safety:

Type	Description	Example Values
`string`	Text data	`"hello"`, `'world'`, `template`
`number`	All numeric values (integers and decimals)	`42`, `3.14`, `-10`, `0xFF`
`boolean`	True or false values	`true`, `false`

Key Difference from Java: TypeScript has only ONE number type for all numeric values. There's no separate int, long, float, or double - just number!

String Type

The string type represents textual data. TypeScript supports three ways to define strings:

Output

Click Run to execute your code

Template Literals (Backticks)

Template literals are the most powerful string type. They support:

String interpolation: Embed expressions with ${}
Multi-line strings: No need for escape characters
Expression evaluation: Calculate values inside strings

Output

Click Run to execute your code

Best Practice: Use template literals for string interpolation instead of concatenation. It's more readable and less error-prone!

Number Type

The number type handles all numeric values - integers, decimals, hexadecimal, binary, and octal:

// Number Type - All Numeric Values

// Integers
let age: number = 25;
let score: number = 100;

// Decimals
let price: number = 19.99;
let pi: number = 3.14159;

// Negative numbers
let temperature: number = -5;

// Different number formats
let decimal: number = 42;
let hex: number = 0x2A;        // Hexadecimal (42 in decimal)
let binary: number = 0b101010;  // Binary (42 in decimal)
let octal: number = 0o52;       // Octal (42 in decimal)

console.log("Decimal:", decimal);
console.log("Hex:", hex);
console.log("Binary:", binary);
console.log("Octal:", octal);

// All represent the same value!
console.log("All equal?", decimal === hex && hex === binary && binary === octal);

// Arithmetic operations
let sum: number = 10 + 5;
let difference: number = 10 - 5;
let product: number = 10 * 5;
let quotient: number = 10 / 5;
let remainder: number = 10 % 3;

console.log(`Sum: ${sum}, Difference: ${difference}, Product: ${product}`);
console.log(`Quotient: ${quotient}, Remainder: ${remainder}`);

Output

Click Run to execute your code

Special Number Values

TypeScript's number type includes special values:

Value	Description	Example
`Infinity`	Positive infinity	`1 / 0` → `Infinity`
`-Infinity`	Negative infinity	`-1 / 0` → `-Infinity`
`NaN`	Not a Number	`"hello" * 2` → `NaN`

Floating Point Precision: Like JavaScript, TypeScript uses IEEE 754 double-precision floating-point. This can lead to precision issues:

console.log(0.1 + 0.2); // 0.30000000000000004 (not exactly 0.3!)

For financial calculations, consider using libraries like decimal.js or big.js.

Boolean Type

The boolean type has only two values: true and false. It's essential for conditional logic:

Output

Click Run to execute your code

Truthy vs Boolean: In JavaScript/TypeScript, many values are "truthy" or "falsy" in conditions, but the boolean type only accepts literal true or false:

let isActive: boolean = true;  // ✓ Correct
let isActive: boolean = 1;     // ✗ Error: Type 'number' is not assignable to type 'boolean'

Type Annotations vs Type Inference

TypeScript can automatically infer types, but you can also explicitly annotate them:

// Type Annotations vs Type Inference

// Type Inference - TypeScript automatically determines the type
let inferredString = "Hello";     // TypeScript infers: string
let inferredNumber = 42;           // TypeScript infers: number
let inferredBoolean = true;        // TypeScript infers: boolean

console.log("Inferred types work perfectly!");

// Explicit Type Annotations - You specify the type
let annotatedString: string = "World";
let annotatedNumber: number = 100;
let annotatedBoolean: boolean = false;

console.log("Annotated types provide clarity!");

// When to use annotations: Variables without initial values
let futureValue: string;  // Must annotate - no value to infer from
futureValue = "Assigned later";

// Function parameters ALWAYS need annotations
function greet(personName: string, age: number): string {
    return `Hello, ${personName}! You are ${age} years old.`;
}

console.log(greet("Alice", 25));

// Best practice: Let TypeScript infer when obvious
let city = "New York";        // Inference is clear
let population: number;        // Annotation needed (no initial value)
population = 8000000;

Output

Click Run to execute your code

When to Use Annotations

Scenario	Recommendation
Variable initialized with a value	Let TypeScript infer (no annotation needed)
Variable declared without initialization	Use explicit annotation
Function parameters	Always use annotations
Function return types	Recommended for clarity

Type Safety in Action

TypeScript prevents common type-related errors at compile time:

Common Type Errors

// Error: Type 'number' is not assignable to type 'string'
let userName: string = 42;

// Error: Type 'string' is not assignable to type 'number'
let age: number = "25";

// Error: Type 'string' is not assignable to type 'boolean'
let isActive: boolean = "true";

// Correct usage
let userName: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

Exercise: User Profile

Task: Create a user profile with proper type annotations!

Requirements:

Create variables for: firstName, lastName, age, email, isVerified, balance
Use appropriate primitive types for each
Create a greeting message using template literals
Display all user information

Output

Click Run to execute your code

💡 Hint

Remember: names and email are strings, age and balance are numbers, and isVerified is a boolean. Use template literals to create a nice greeting!

Summary

string - Text data, supports single quotes, double quotes, and template literals
number - All numeric values (integers, decimals, hex, binary, octal)
boolean - Only true or false
Template literals (`backticks`) support string interpolation with ${}
TypeScript can infer types, but explicit annotations improve clarity
Type annotations prevent runtime errors by catching type mismatches at compile time

What's Next?

Now that you understand primitive types, let's explore more complex data structures! In the next lesson, we'll learn about Arrays & Tuples - how to store collections of values with type safety.

Previous ← First Program

Next Arrays & Tuples →

The 3 Primitive Types

String Type

Template Literals (Backticks)

Number Type

Special Number Values

Boolean Type

Type Annotations vs Type Inference

When to Use Annotations

Type Safety in Action

Common Type Errors

Exercise: User Profile

Summary

What's Next?

Enjoying these tutorials?