Category: TypeScript

Sometimes, we want to get HTMLElement from element with TypeScript.

In this article, we’ll look at how to get HTMLElement from element with TypeScript.

How to get HTMLElement from element with TypeScript?

To get HTMLElement from element with TypeScript, we can cast elements to HTMLElement.

For instance, we write

const nodes = document.querySelectorAll<HTMLElement>("a");

to cast the items in the node list returned by querySelectorAll to HTMLElement.

We can also cast them to more specific element types with

const nodes = document.querySelectorAll<HTMLAnchorElement>("a");

to cast all the elements in the node list to the HTMLAnchorElement type.

Conclusion

To get HTMLElement from element with TypeScript, we can cast elements to HTMLElement.

Sometimes, we want to sort strings descending with TypeScript

In this article, we’ll look at how to sort strings descending with TypeScript.

How to sort strings descending with TypeScript?

To sort strings descending with TypeScript, we can compare strings with comparison operators.

For instance, we write

const sorted: string[] = values.sort((one, two) => (one > two ? -1 : 1));

to call sort with a callback to compare strings one and two.

We return -l to reverse their order if one is bigger than two.

Otherwise, we return 1 to sort them in ascending order.

one and two are both entries in values being iterated through.

Conclusion

To sort strings descending with TypeScript, we can compare strings with comparison operators.

Sometimes, we want to make web workers with TypeScript and Webpack.

In this article, we’ll look at how to make web workers with TypeScript and Webpack.

How to make web workers with TypeScript and Webpack?

To make web workers with TypeScript and Webpack, we add 'webworker' to compilerOptions.lib in tsconfig.json.

For instance, we write

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["webworker", "es5", "scripthost"]
  }
}

to add 'webworker' into compilerOptions.lib in tsconfig.json.

This will let the TypeScript compiler know that we can use web worker global variables in our project.

Conclusion

To make web workers with TypeScript and Webpack, we add 'webworker' to compilerOptions.lib in tsconfig.json.

Sometimes, we want to stub a Typescript-interface or type definition.

In this article, we’ll look at how to stub a Typescript-interface or type definition.

How to stub a Typescript-interface or type definition?

To stub a Typescript-interface or type definition, we can use the typemoq library.

For instance, we write

import * as TypeMoq from "typemoq";
//...
let mock = TypeMoq.Mock.ofType<IDependency>();

mock.setup((x) => x.b()).returns(() => "Hello World");

expect(mock.object.a()).to.eq(undefined);
expect(mock.object.b()).to.eq("Hello World");

to import TypeMoq from typemoq.

Then we use TypeMoq.Mock.ofType<IDependency> to create a mocked type from the IDependency type.

And then we can use the mock with the content in IDependency without errors.

Conclusion

To stub a Typescript-interface or type definition, we can use the typemoq library.

Sometimes, we want to fix the "A const enum member can only be accessed using a string literal." error with TypeScript.

In this article, we’ll look at how to fix the "A const enum member can only be accessed using a string literal." error with TypeScript.

How to fix the "A const enum member can only be accessed using a string literal." error with TypeScript?

To fix the "A const enum member can only be accessed using a string literal." error with TypeScript, we should remove const before the enum definition.

For instance, instead of writing

const enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3,
}

we write

enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3,
}

Conclusion

To fix the "A const enum member can only be accessed using a string literal." error with TypeScript, we should remove const before the enum definition.