📕
SEIRFX
  • Introduction
  • About These Notes
  • Schedule
  • Unit 2
    • Node
      • Internet Fundamentals
      • Full-Stack Fundamentals
      • Intro to Node
      • Node Modules
      • Node Packages
    • Express
      • Intro to Express
      • Routes
      • Routes Lab
      • Views
      • Templates
      • Layouts & Controllers
    • CRUD & REST
      • GET & POST
      • GET & POST Lab
      • PUT & DELETE
    • API Calls in Express
      • Axios
      • Request (no longer maintained)
    • Sequelize
      • Terminology
      • Setup
      • Using Models
      • Seeding Data
      • Validations and Migrations
      • Resources
      • 1:M Relationships
      • N:M Relationships
    • Express Authentication
      • Research Components
      • Code Components
      • Auth in Theory
        • Sessions
        • Passwords
        • Middleware
        • Hooks
      • Auth in Practice
        • Create the User
        • User Signup
        • Sessions
        • User Login
        • Authorization and Flash messages
  • Development Workflow
    • Command Line
      • The Terminal
      • Filesystem Navigation
      • File Manipulation
      • Additional Topics
    • Intro to Git
      • Version Control
      • Local Git
      • Remote Git
      • Git Recipes
    • Group Collaboration
      • Git Workflows
      • Project Roles and Tools
    • VS Code Tips & Tricks
  • HTML/CSS
    • HTML
    • CSS Selectors
    • CSS Box Model and Positioning
      • Box Model
      • Display and Positioning
      • Flexbox
      • Grid
      • Flexbox & Grid Games
      • Floats and Clears
      • Additional Topics
    • Advanced CSS
      • Responsive Design
      • Pseudo-Classes/Elements
      • Vendor Prefixes
      • Custom Properties
      • Additional Topics
    • Bootstrap
    • CSS Frameworks
    • Accessibility
  • JavaScript
    • Primitives
    • Arrays
    • Objects
      • Objects Lesson
      • Objects quick guide
      • Object-ception
    • Control Flow
      • Boolean Expressions
      • Conditionals
      • Loops
      • Promises
    • Functions
      • Scope
      • Callbacks
      • Higher Order Functions
      • Callbacks Review Lab
      • Timing Functions
      • Iterators
      • Combining Data Types
      • Combining Data Types Lab
    • Javascript in the browser
      • DOM and Events
      • DOM Manipulation
      • DOM Review
      • DOM Review Lab
      • HP DOM Lab
      • Programmatic DOM Manipulation
      • Grids & Pyramids
      • DOM & Data
      • DOM Events
      • Color Palette Picker
      • Sketchpad
    • HTML5 Canvas
    • How To Reduce Redundancy
    • OOP
      • Westworld Lab
      • OOP Factories
      • OOP Inheritance
      • OOP Inheritance Lab
      • Tomagotchi Lab
      • OOP Space Battle
      • OOP Snowman
      • (2019) JavaScript OOP
      • (2016) OOP with Classes
      • (1995) OOP with Prototypes
      • Constructors
      • Prototypes
    • Intro to TDD
    • Scoping
    • Inheritance
      • Prototypal Inheritance
      • Call, Apply, and other Functions
      • ES6 Inheritance
      • Resources
    • Custom Node Modules
    • Additional Topics
      • AJAX, Fetch, and Async/Await
      • AJAX w/JSON and Localstorage
        • AJAX w/JSON
        • Local Storage
      • Async module
      • Data Scraping
  • jQuery
    • Intro
      • DOM Manipulation
      • Reddit Practice
      • Styling
      • Events
    • Plugins
    • AJAX
  • APIs
    • Fetch
    • AJAX w/jQuery
    • AJAX w/Fetch
  • Databases
    • Intro to SQL
    • Advanced SQL
    • MongoDB
      • Intro to NoSQL
      • CRUD in MongoDB
      • Data Modeling
      • Intermediate Mongo
  • Left over Node/Express
    • Testing with Mocha and Chai
    • Mongoose
      • Mongoose Associations
    • JSON Web Tokens
      • Codealong
    • Additional Topics
      • oAuth
      • Geocoding with Mapbox
      • Geocoding and Google Maps
      • Cloudinary
      • Websockets with Socket.io
      • SASS
  • Ruby
    • Intro to Ruby
    • Ruby Exercises
    • Ruby Classes
    • Ruby Testing with Rspec
    • Ruby Inheritance
    • Ruby Data Scraping
  • Ruby on Rails
    • Intro to Rails
    • APIs with Rails
    • Asset Pipeline
    • Rails Auth and 1-M
      • Auth Components
    • Rails N:M
    • ActiveRecord Polymorphism
    • Additional Topics
      • oAuth
      • SASS
      • Rails Mailers
      • Cloudinary
      • Jekyll
  • React (Updated 2019)
    • ES6+/ESNext
      • Const and Let
      • Arrow Functions
      • Object Literals and String Interpolation
      • ES6 Recap
      • ES6 Activity
    • Intro to React
      • Create React App
      • Components and JSX
      • Virtual DOM
      • Props
      • Dino Blog Activity
      • Nested Components
      • Lab: LotR
    • React State
      • Code-Along: Edit Dino Blog
      • Lab: Simple Calc
      • Lifting State
    • React Router
      • Browser History/SPAs
      • React Router (lesson and full codealong)
      • Router Lab
    • Fetch and APIs
      • APIs with Fetch and Axios
      • Fetch the Weather
    • React Hooks
    • React LifeCycle
      • Lab: Component LifeCycle
    • React Deployment
    • Additional Topics
      • React Frameworks
        • Material UI Theming
      • Typescript
        • More Types and Syntax
        • Tsconfig and Declaration Files
        • Generics with Linked List
      • Redux
      • TypeScript
      • Context API
      • React Native
  • Meteor
  • Deployment and Config
    • Installfest
      • Mac OSX
      • Linux
      • Git Configuration
      • Sublime Packages
    • Deploy - Github Pages
    • Deploy - Node/Sequelize
    • Deploy - Node/MongoDB
    • Deploy React
    • Deploy - Rails
      • Foreman (Environment Variables)
    • Deploy - AWS Elastic Beanstalk
    • Deploy - S3 Static Sites
    • Deploy - Django
    • Deploy - Flask
  • Data Structures and Algorithms
    • Recursion
    • Problem Solving - Array Flatten
    • Binary Search
    • Algorithm Complexity
    • Stacks and Queues
    • Bracket Matching
    • Ruby Linked Lists
      • Sample Code
      • Beginner Exercises
      • Advanced Exercises
    • JS Linked Lists
      • Sample Code
      • Beginner Exercises
      • Beginner Solutions
    • Hash Tables
    • Intro to Sorting
    • Insertion Sort
    • Bucket Sort
    • Bubble Sort
    • Merge Sort
    • Quick Sort
    • Heap Sort
    • Sorting Wrapup
    • Hashmaps
    • Trees and Other Topics
  • Python
    • Python Installation
    • Intro to Python
    • Python Lists
    • Python Loops
    • Python Dictionaries
    • Python Sets and Tuples
    • Python Cheatsheet
    • Python Functions
    • Python Classes
    • Python Class Inheritance
    • Intro to Flask
    • Intro to SQLAlchemy
      • Flask and SQLAlchemy
    • Using PyMongo
    • Intro to Django
    • CatCollector CodeAlong
      • URLs, Views, Templates
      • Models, Migrations
      • Model Form CRUD
      • One-to-Many Relations
      • Many-to-Many Relations
      • Django Auth
    • Django Cheatsheet
    • Django Auth
    • Django Polls App Tutorial
    • Django School Tool Tutorial
    • Django 1:M Relationships
    • Custom Admin Views
    • Data Structures and Algorithms
      • Recursion
      • Binary Search
      • Stacks and Queues
      • Linked Lists
      • Binary Trees
      • Bubble Sort
      • TensorFlow & Neural Networks
    • Adjacent Topics
      • Raspberry Pi
      • Scripting
  • Assorted Topics
    • History of Computer Science
    • Regular Expressions
    • Being Successful in SEI
    • Internet Fundamentals
      • Internet Lab
    • Adjacent Workflow
      • UX/UI
      • Wireframing Exercise: Build an Idea
      • Agile
    • Post SEI
      • Learning Resources
      • Deliverables -> Portfolio
      • FAQ
  • Projects
    • Project 1
    • Project 2
    • Project 3
      • Project 3 Pitch Guidelines
    • Project 4
    • Past Projects
      • Project 1
      • Project 2
      • Project 3
      • Project 4
      • Portfolios
    • Post Project 2
    • MEAN Hackathon
      • Part 1: APIs
      • Part 2: Angular
    • Portfolio
  • Web Development Trends
  • Resources
    • APIs and Data
    • Tech Websites
    • PostgreSQL Cheat Sheet
    • Sequelize Cheat Sheet
    • Database Administration
  • Archived Section
    • (Archived) ReactJS
      • Intro to React
        • Todo List Codealong
        • Additional Topics
      • Deploy React
      • React with Gulp and Browserify
        • Setting up Gulp
        • Additional Gulp Tasks
      • React Router
        • OMDB Router
        • OMDB Search
        • Additional Resources
      • React Animations
        • CSS Animations
    • AngularJS
      • Intro to AngularJS
        • Components and SPA
        • Create an Angular App
      • Angular Directives and Filters
      • Angular Animation
      • Angular Bootstrap Directives
        • Bootstrap Modals
      • Angular $http
      • Angular Services
        • Service Recipes
        • ngResource
        • Star Wars Codealong
      • Angular Routing
      • Angular + Express
      • Angular Authentication
        • Additional Topics
      • Angular Components
      • Angular Custom Filters
      • Angular Custom Directives
Powered by GitBook
On this page
  • Unions
  • Interfaces
  • Tuples
  • Enum
  • Generics<T>
  • Intersection Types

Was this helpful?

  1. React (Updated 2019)
  2. Additional Topics
  3. Typescript

More Types and Syntax

Unions

We can enforce types of multiple values with a type declaration on a union

type Color = 'Green' | 'Red' | 'Blue'

let colorChoice: Color = 'Green' 
colorChoice: Color = 'Purple' // Throws an error

let colorOrNum: Color | number = 10 // OK!

Interfaces

What if we would like to enforce typings on the shape of an object?

Enter the interface!

Typescript offers us the ability to do this with interfaces:

interface DogObject {
    name: string;
    age: number;
    isGood: boolean;
    wagsTail?: boolean; // the '?' means that wagsTail is optional
}

function isGoodDog(dog: DogObject): boolean {
    let {name, age, isGood} = dog; // Object destructuring is neat!
    let message = `${name} is ${age} and is very good!${dog.wagsTail ? ' wag, wag, wag' : ''}`
    if (!isGood) {
        console.log('How dare you! All dogs are good dogs!!')
        dog.isGood = true
    }
    console.log(message)
    return true
}

let oneGoodBoy: DogObject = {
    name: 'Harley Muffinhead',
    age: 7,
    isGood: true,
    wagsTail: true 
}

let barnCat: object = {
    name: 'Scar Tatteredear',
    age: Infinity,
    clawedKiller: true,
    isGood: false
}

isGoodDog(oneGoodBoy) 
// Works!
isGoodDog(barnCat) 
// Error, barnCat is not 'DogObject' type. Argument of type 'object' is not assignable 
// to parameter of type 'DogObject'. Type '{}' is missing the following properties 
// from type 'DogObject':name, age, isGood

// If we removed the Explicit type from barnCat, isGoodDog(barnCat) would work 
// because barnCat has all the necessary values of the DogObject type

Tuples

Tuple types allow you to express an array where the type of a fixed number of elements is known, but need not be the same.

let myStringNumTuple: [string, number] = ["Hello", 42];
myStringNumTuple = [42, "Hello"] // ☠️ will throw an error at compile time

When accessing an element with a known index, the correct type is retrieved:

console.log(myStringNumTuple[0].substr(1)); // OK
console.log(myStringNumTuple[1].substr(1)); // Error, 'number' does not have 'substr'

When accessing an element outside the set of known indices, an error will be thrown:

myStringNumTuple[3] = "world"; 
// error, Type '"world"' is not assignable to type 'undefined'

So can I tack more onto a tuple and just assign it a new type?

myStringNumTuple[3] = string; 
// TWO errors!
// Tuple type '[string, number]' of length '2' has no element at index '3'
// 'string' only refers to a type, but is being used as a value here

Tuples can be as long as you want; think of them like interfaces without the name. Think back to our DogObject example, you could create a tuple with those constraints, but instead of accessing those values via their keys, they're accessed by their index.

let tupleDog: [string, number, boolean, boolean]

Enum

According to the TypeScript docs, Enums allow us to 'give friendly names to a set of numeric values'.

enum Color {Green, Red, Blue}
let colorChoice: Color = Color.Green
let colorString: string = Color[0]

While this does enforce a Color Type that only has the values "Green", "Red", "Blue"... this little bit of TS compiles to this mess of JavaScript:

var Color;
(function (Color) {
    Color[Color["Green"] = 0] = "Green";
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

var colorChoice = Color.Green; // evaluates to 0
var colorString = Color[0] // evaluates to "Green"

Typescript can now support Enums with strings, so you could assign certain values to certain strings

enum Color {
    Red = ff0000,
    Green = 00ff00,
    Blue = 0000ff
}

The tl;dr for most devs is that Enums can be iterated over, can be used as bit flags, and have some specific use cases, but you will mostly be using Union types.

Generics<T>

What should we do if we want to enforce typings further down the scope of our function or class but don't want to explicity declare a type?

Well, TS humbly offers up the Generic type.

We can use variables between angle brackets in our type declarations to enforce consistent use of a type! Classically, you will see <T> used to represent Type however, you can name them anything you want as long as they are not reserved words or types. We can even use multiple generics in the same construct by separating them with commas: Construct<T, U, ThirdType>.

Check out this example of a simple Queue:

class Queue<T> {
    constructor(data: T[]){
        this.data = []
    }

    enqueue(payload: T): void {
        this.data.push(payload)
    }

    dequeue(): T {
        return this.data.unshift()
    }

}

We can also use complex datatypes:

type BadMessage = 'Warning' | 'Error'
type GoodMessage = 'All is Well' | 'There is a fresh pot of coffee in the kitchen' 

function shout<T>(arg: T): string {

    return arg.toString().toUpperCase()
}

console.log(shout<BadMessage>('Warning'));
console.log(shout<BadMessage>('All is Well')); // Argument of type '"All is Well"' is not assignable to parameter of type 'BadMessage'.
console.log(shout<GoodMessage>('There is a fresh pot of coffee in the kitchen'));

Intersection Types

Sometimes, when one type isn't enough, you want to merge your types. Let's say you have three types: Bear, Man, and Pig

interface Bear {
    claws: number
}

interface Man {
    firstName: string
}

interface Pig {
    hog: boolean
}

When you create a new variable, you can assign one, two, or even three of these types! When you do that, your new variable will be able to have claws, firstName, and hog as values. You can also create a custom class if you're going to use your intersected type again

// Define a new type comprised of other types!
type ManBearPig = Man & Bear & Pig

// We must declare initial values
let greatCryptid: ManBearPig = {
  firstname: 'Sassy',
  claws: 5,
  hog: true
}

// We can reassign the values as needed
greatCryptid.firstname = 'Grogg'
greatCryptid.claws = 7
greatCryptid.hog = false

Prepare yourself... we are about to put it to work!

PreviousTypescriptNextTsconfig and Declaration Files

Last updated 4 years ago

Was this helpful?

WTF

If you want to know a bit more about this bizarre type and it's usage, check out and .

this medium article
this stack-overflow question