Global augmentation in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a new property greet to the global Window interface.

Typescript

declare global {
  interface Window {
    greet: () => string;
  }
}

window.[1] = () => "Hello!";

Drag options to blanks, or click blank then click option'

Ahello

Bgreet

CsayHello

Dwelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than declared in the interface.

Forgetting to assign the function to the window object.

We add the greet property to the Window interface, so we must assign the function to window.greet.

2fill in blank

medium

Complete the code to add a new method double to the global Array interface that returns an array with all numbers doubled.

Typescript

declare global {
  interface Array<T> {
    double(): number[];
  }
}

Array.prototype.[1] = function() {
  return this.map(x => x * 2);
};

Drag options to blanks, or click blank then click option'

Adouble

Brepeat

CtimesTwo

Dmultiply

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different method name than declared.

Not adding the method to Array.prototype.

The method name must match the one declared in the global interface, which is double.

3fill in blank

hard

Fix the error in the global augmentation by completing the code to add a new property version of type string to the global Navigator interface.

Typescript

declare global {
  interface Navigator {
    [1]: string;
  }
}

console.log(navigator.version);

Drag options to blanks, or click blank then click option'

AnavVersion

Bver

CversionNumber

Dversion

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than accessed.

Misspelling the property name.

The property name must be version to match the usage navigator.version.

4fill in blank

hard

Fill both blanks to add a new method toTitleCase to the global String interface that capitalizes the first letter of each word.

Typescript

declare global {
  interface String {
    [1](): string;
  }
}

String.prototype.[2] = function() {
  return this.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
};

Drag options to blanks, or click blank then click option'

AtoTitleCase

BcapitalizeWords

CtitleCase

DtoUpperWords

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in interface and prototype.

Misspelling the method name.

The method name must be toTitleCase both in the interface and on the prototype.

5fill in blank

hard

Fill all three blanks to add a global augmentation for Document interface with a method getElementByDataId that returns an element by its data-id attribute.

Typescript

declare global {
  interface Document {
    [1](id: string): HTMLElement | null;
  }
}

Document.prototype.[2] = function(id: string) {
  return this.querySelector('[[3]="' + id + '"]');
};

Drag options to blanks, or click blank then click option'

AgetElementByDataId

Bdata-id

CgetDataElement

DdataId

Attempts:

3 left

💡 Hint

Common Mistakes

Using different method names in interface and prototype.

Incorrect attribute name in selector.

The method name is getElementByDataId in interface and prototype. The attribute selector uses data-id.