JS-401-Angular
  • Introduction
  • Part 1: TypeScript Overview
    • 1.1: Types
    • 1.2: Classes
    • 1.3: Interfaces
  • Part 2: Angular Architecture
    • 2.1: MVC
    • 2.2: Modules
    • 2.3: Components
  • Part 3: Lifecycle Hooks
    • 3.1: Overview
  • Part 4: Data Binding
    • 3.1: String Interpolation
    • 3.2: Property Binding
    • 3.3: Event Binding
    • 3.4: Two-Way Data Binding
  • Part 4: Directives
    • 4.1: ngIf and ngFor
    • 4.2: Attribute Directives
    • 4.3: Structural Directives
  • Part 5: Pipes
    • 5.1: Overview
  • Part 6: Observables and RxJS
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Part 7: Dependency Injection and Services
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Eleven Fifty Style Guide
Powered by GitBook
On this page
  1. Part 1: TypeScript Overview

1.3: Interfaces

Interfaces let us create a contract that other classes/objects must use. Huh...contracts? Look at it this way. If you are hired to do contract work for an employer, a contract will be created that lays out the work that must be completed in order for you to get paid. So, failure to meet the contract's goals means no money coming your way.

This is the same for TypeScript. Making an interface is explicitly stating what a class/object must have in order to be considered valid. Let's take a closer look:

interface Player {
    name: string;
    alias?: string;
    age: number;
}

let player:Player;

player = { name: 'Raistlin', wizardOrder: 'Wizard of the Black Robes'}
//this does not satisfy the contract

player = { name: 'Raistlin', age: 21}
//satisfies the contract

You probably noticed the question mark after alias. This indicates an optional property. It does not need to be used.

The advantage to using interfaces is that it allows you to code with intent. This means you have a clear vision on what your code should do, making the planning your app a much easier process. You are not having to play catch-up with the language you are using, you set the plan in motion prior to creation. This also makes it easier for other coders later to hop on the code and know how to work with the classes/objects.

adapted from TypeScript Documentation

NEXT SECTION

Previous1.2: ClassesNextPart 2: Angular Architecture

Last updated 7 years ago

2.1: MVC