Is there a way to make Typescript accept dot notation?

Question

Is there a way to make Typescript accept dot notation?

Is there a way to suppress the compile time error in Typescript when using dot notation to access a property that the compiler doesn't know about? Even though using bracket notation works, dot notation would be much more readable in my specific case.

In this scenario, I have added a custom matcher called 'toLookLike' to Jasmine using Angular. When using brackets notation, everything functions as expected:

expect(something)['toLookLike'](otherthing);

However, if I try to use dot notation for readability purposes like so:

expect(something).toLookLike(otherthing);

The issue arises because the matcher is added at runtime and not known by the compiler, resulting in a compile error.

How can I inform Typescript that dot notation is permissible in this particular instance? Whether it needs to be done once or on every line of method usage, any solution or workaround is welcome. Unfortunately, I do not have the authority to update the jasmine Matcher object definition to include 'toLookLike'.

I understand the concerns regarding allowing general dot notation for undefined properties but am willing to take the risk in this isolated case. I don't require an explanation on why dot notation is normally restricted. Additionally, I have already reviewed and comprehended this related question.

angular typescript jasmine

Answer 1

Answer №1

If you want to enhance the typings of a typed library at runtime, you should explore the concept of declaration merging. This allows you to extend existing typings with your own additions.

Assuming that Jasmine is imported globally or declared ambiently (such as when running

npm install --save-dev @types/jasmine

), you can try the following approach:

declare global {
  namespace jasmine {
    interface Matchers<T> {
      // Assuming Expected<T> is the type of the parameter
      toLookLike(expected: Expected<T>): boolean;
    }
  }
}

This enables you to utilize toLookLike() during design time. Just ensure you add the necessary code at runtime as well, as failing to do so may lead to errors during execution.

expect(something).toLookLike(otherthing); // Now it works fine

I hope this information proves useful. Best of luck!

Answer 2

If you want to enhance the typings of a typed library at runtime, you should explore the concept of declaration merging. This allows you to extend existing typings with your own additions.

Assuming that Jasmine is imported globally or declared ambiently (such as when running

npm install --save-dev @types/jasmine

), you can try the following approach:

declare global {
  namespace jasmine {
    interface Matchers<T> {
      // Assuming Expected<T> is the type of the parameter
      toLookLike(expected: Expected<T>): boolean;
    }
  }
}

This enables you to utilize toLookLike() during design time. Just ensure you add the necessary code at runtime as well, as failing to do so may lead to errors during execution.

expect(something).toLookLike(otherthing); // Now it works fine

I hope this information proves useful. Best of luck!

Answer 3

Answer №2

It appears that you are utilizing the jasmine library, however, this method can easily be adapted to other libraries as well. Crafting your own typings is a viable solution. While the previous response may suffice, it doesn't significantly enhance readability. Another approach could be:

Create a custom typing file named looklike.matcher.d.ts

declare module jasmine {
   interface Matchers {
      toLookLike(expected: any): boolean;
   } 
}

Include this typings reference in your code. Simply insert the following at the top of your file
```
/// <reference path="./looklike.matcher.d.ts"/> 
```

You can then use it in your tests

expect(something).toLookLike(otherthing);

Answer 4

It appears that you are utilizing the jasmine library, however, this method can easily be adapted to other libraries as well. Crafting your own typings is a viable solution. While the previous response may suffice, it doesn't significantly enhance readability. Another approach could be:

Create a custom typing file named looklike.matcher.d.ts

declare module jasmine {
   interface Matchers {
      toLookLike(expected: any): boolean;
   } 
}

Include this typings reference in your code. Simply insert the following at the top of your file
```
/// <reference path="./looklike.matcher.d.ts"/> 
```

You can then use it in your tests

expect(something).toLookLike(otherthing);

Answer 5

Answer №3

One way to achieve this is by using a type cast:

(ensure(something) as whatever).toAppearSimilar(otherthing);

Answer 6

One way to achieve this is by using a type cast:

(ensure(something) as whatever).toAppearSimilar(otherthing);

Is there a way to make Typescript accept dot notation?

Answer №1

Answer №2

Answer №3

Similar questions

How to implement separate environment.ts files for different languages in Angular 12? For example, environment.en.ts and environment.de.ts files

A guide to positioning the content of an Angular tag within a span element

The border of the Material UI Toggle Button is not appearing

Issues arising while fetching data with Angular httpClient

Updating Angular 9 values using a fixed object

Typescript encountering issues with addEventListener

The HTTP request is failing to transmit cookies

What is the definition of a non-arrow React functional component in TypeScript?

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

Ways to merge two distinct arrays [Angular and Typescript]

Link a YAML file with interfaces in JavaScript

Displaying FontIcon in a NativeScript alert box

Testing AngularJS controllers that implement moment.js functionality

Defining a JSON file interface in Angular to populate a dropdown box with dependencies

Using Typescript for Asynchronous Https Requests

The error message "Cannot bind to 'ngForOf' because it is not recognized as a valid property of the element."

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

Encountered error message: "Cannot assign argument of type '() => () => boolean' to parameter of type 'EffectCallback'"

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

Encountering a problem when attempting to start a new project using Ionic3