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

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

What is the best way to search for an Enum based on its value?

Navigating in Angular before receiving a response from HTTP request

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Exploring ViewChild Usage in Angular 8's Inheritance

ControlValueAccessor failing to populate with data from external service

Dramatist - shutting down an angular pop-up dialog

Leveraging angular-cli to compile a library that can be easily integrated into multiple projects

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

The IDBCursor type does not have a property named 'value'

The function signature '() => Element' is incompatible with the type 'string'

Unrestricted Angular Audio Playback without CORS Restrictions

Utilizing ngx-bootstrap Modal for Data Transfer to Component

Encountering a Spring Boot 404 error when deploying static content as a jar file

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

What steps can I take to ensure that a function is only executed after at least two Observables have returned data?

The program experienced an issue with TypeError: Attempting to access properties of an undefined variable ('_id')

What are the steps to implement SignalR Stream in an ASP.NET Core Angular application?

Can @Input() be declared as private or readonly without any issues?

The issue persists in VSCode where the closing brackets are not being automatically added despite