CodeBlanks Logo Icon CodeBlanks
Login Register

Interface vs type alias

Learn the difference between Interface and type alias.

Interface vs type alias

Both interface and type can define object shapes. interface is specifically for objects and can be extended. type is more general; it can also define unions and primitives.

// interface
interface Kisi { ad: string; yas: number; }
// type alias
type Nokta = { x: number; y: number };

Both can be used for simple object shapes.

When to use interface and type?

interface is preferred for object shapes that may be extended. type is used for union types, intersection types, or primitive aliases. Both work for object shapes.

// interface can be extended
interface Hayvan { ad: string }
interface Kedi extends Hayvan { miyav: string }

Choose interface or type based on the need.

Practice Interface and type alias together

Define an interface named Kisi with properties ad: string and yas: number. Define a type alias named Nokta ({ x: number; y: number }). Declare a variable named kisi of type Kisi with value { ad: "Veli", yas: 30 }. Print the value of kisi.ad with console.log.

Starter code

index.ts
// Kisi adında bir interface tanımla (ad: string, yas: number)
// Nokta adında bir type alias tanımla (x: number, y: number)
// kisi değişkenini Kisi türünde tanımla, değer: { ad: "Veli", yas: 30 }
// kisi.ad değerini yazdır

Sample solution

index.ts
interface Kisi {
    ad: string;
    yas: number;
}
type Nokta = { x: number; y: number };
let kisi: Kisi = { ad: "Veli", yas: 30 };
console.log(kisi.ad);

Expected output

Veli

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which is specifically designed for object shapes?

  • type
  • const
  • interface Correct answer
  • let

Explanation: The <code>interface</code> keyword is specifically designed for defining object shapes; <code>type</code> is more general and can also define union types.

2 Add the correct keyword

Question 
____ Kisi { ad: string; yas: number; }
Answer 
interface Kisi { ad: string; yas: number; }

Explanation: The <code>interface</code> keyword defines an object shape with curly braces; <code>type</code> requires an equals sign, <code>class</code> is a different concept, and <code>object</code> is invalid in this syntax.

3 Interface vs type concepts

Term Meaning
interface X { ... } Specific for object shapes
type X = { ... } General type definition
type X = string | number Union type (type only)
interface vs type Interface is specific to objects

All lessons in Beginner

1 TypeScript intro and setup

  1. What is TypeScript?
  2. Why TypeScript?
  3. tsc compiler
  4. tsconfig basics
  5. Summary - TypeScript basics

2 Primitive types

  1. string type
  2. number type
  3. boolean type
  4. let and const
  5. Summary - Primitive types

3 Arrays

  1. Array type
  2. Array methods
  3. readonly arrays
  4. Multidimensional arrays
  5. Summary - Arrays

4 Tuples

  1. What is a tuple?
  2. Tuple usage
  3. readonly tuple
  4. Summary - Tuple

5 Enums

  1. Numeric enum
  2. String enum
  3. const enum
  4. Enum members
  5. Summary - Enum

6 any, unknown, never

  1. any type
  2. unknown type
  3. never type
  4. void type
  5. Summary - Special types

7 Type annotation

  1. Variable annotation
  2. Parameter annotation
  3. Return type annotation
  4. Summary - Type annotation

8 Type inference

  1. Basic inference
  2. Inference with const
  3. Best common type
  4. Summary - Type inference

9 Objects

  1. Object type
  2. Optional properties
  3. Readonly properties
  4. Summary - Objects

10 Functions

  1. Function declaration
  2. Optional and default params
  3. Rest params
  4. Function overloads
  5. Summary - Functions

11 Arrow functions

  1. Arrow syntax
  2. this with arrow
  3. Arrow type
  4. Summary - Arrow functions

12 Interfaces

  1. What is an interface?
  2. Property types
  3. Interface vs type alias
  4. Summary - Interfaces

13 Type alias

  1. What is a type alias?
  2. Composition with alias
  3. Alias vs interface
  4. Summary - Type alias

14 Union and intersection

  1. Union types
  2. Intersection types
  3. Literal types
  4. Summary - Union & intersection

15 null and undefined

  1. null vs undefined
  2. Optional chaining
  3. Nullish coalescing
  4. Summary - null & undefined

16 Strict mode

  1. strict: true
  2. strictNullChecks
  3. strictFunctionTypes
  4. Summary - Strict mode

17 Project: Shopping cart

  1. Cart design
  2. Add product
  3. Total calculation
  4. Apply discount
  5. Integration

18 Project: Todo CLI

  1. Task model
  2. Add and list
  3. Completion
  4. Filtering
  5. Integration

19 Project: Library

  1. Book model
  2. Add and search
  3. Borrow
  4. Return
  5. Integration

20 Beginner final

  1. Challenge 1: Types
  2. Challenge 2: Functions
  3. Challenge 3: Unions
  4. Challenge 4: Mini app