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
  • BOOLEANS
  • STRINGS
  • NUMBERS
  • ARRAYS
  • TUPLES
  • ENUMS
  • ANY
  • VOID
  • NEVER
  • FUNCTION TYPES
  • TYPE INFERENCE
  • NEXT SECTION
  1. Part 1: TypeScript Overview

1.1: Types

TypeScript, just like JavaScript, accepts different units of data. Things like strings, numbers, booleans...stuff you're all used to by now. The difference now is we need to be explicit in what unit of data is going into the variable.

Setting the type is a snap in TypeScript. Just place the type after a : and you're good to go! Let's take a look at the different types.

BOOLEANS

At this point, we know that booleans are simple true/false statements:

let danzigRules: boolean = true;

STRINGS

TypeScript uses single or double quotes for string data, just like in JavaScript:

let bestMusician: string = 'Danzig';
let favoriteColor: string = "Grey";

Template strings may also be used in Typescript:

let name: string = `Cybernetic Ghost of Christmas Past from the Future`;
let greeting: string = `Hello, I am the ${name}.`

NUMBERS

Numbers in TypeScript are floating value points, which are numbers with fractional parts (for example, 3.65). TypeScript also accepts hexadecimal, binary, and octal literals:

let integer: number = 38;
let decimal: number = 45.67;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

ARRAYS

Array types can be written in two different ways:

let bestRolePlayingGames: string[] = ['PathFinder', 'StarFinder', 'Orpheus'];

or as an generic array type:

let tmnt: Array<string> = ['Leonardo', 'Donetello', 'Raphael', 'Michelangelo'];

TUPLES

These are arrays with with mixed types and a limited number of items. Tuples have to be a string and a number:

let nena: [number, string] = [99, 'Red Luftballons'];

Please note, order is important! So if you indicate numbers are first in the array, then they HAVE to be first or you will get an error.

ENUMS

Enums are a TypeScript feature that makes numbers more expressive. By default, enums start at number 0:

enum Color {
    Black,
    Grey = 200, 
    Pink
}
// Black equals 0, Grey equals 200, and Pink equals 201.  If you want Pink to equal 2,
// then you would need to manually set it.

ANY

Occasionally, we may not know what type of variables when we are creating our applications. We can use any to allow for any type of data to get set in the variable.

let item: any = 'Bag of Holding';
item = 4;
//if item wasn't set to any, then setting item to a number would have
//thrown an error

VOID

Void could almost be considered the opposite of any. We see void used as the return type of functions that do not return a value:

function lastCaress(): void {
    console.log('I got something to say!');
}

Declaring void on a variable is not the most useful practice, because we can only assign undefined or null to them. In fact, undefined and null are there own types:

let u: undefined = undefined;
let n: null = null;

NEVER

Never represents a value that will never occurs. We usually see never with functions that have an unreachable end point:

function error(): never {
    throw new Error('Just what do you think you\'re doing Dave?');
}

FUNCTION TYPES

Types can be added to the arguments as well as the return type of the function:

function subtract(number1: number, number2: number): number {
    return number1 - number2;
}

We can use arrow functions as well:

let newSubtract = (number1, number2) => number;
newSubtract = subtract;
console.log(newSubtract(6, 3));

TYPE INFERENCE

TypeScript can use type inference to provide information on the type when there is no explicit annotation. For example:

let marathonMan = 'Chris';

TypeScript now assumes that the variable marathonMan is of the type string. If we tried to set it to anything else, we would get an error. This works, but since we are writting in TypeScript for Anuglar, let's get in the habit of being explicit with our types.

adapted from TypeScript Documentation and Understanding TypeScript by Maximilian Schwarzmüller

NEXT SECTION

PreviousPart 1: TypeScript OverviewNext1.2: Classes

Last updated 7 years ago

1.2: Classes