Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add TypeScript signatures #52

Open
gabrielflorit opened this issue Feb 2, 2024 · 12 comments · May be fixed by #74
Open

How to add TypeScript signatures #52

gabrielflorit opened this issue Feb 2, 2024 · 12 comments · May be fixed by #74
Labels
question Further information is requested

Comments

@gabrielflorit
Copy link

I'm having a bit of a hard time understanding how to type the signature here. E.g. what would be the TS signature for the example in the README?

<button {{on "click" (fn (set this "greeting") "Hola!")}}>
  Español
</button>
@knownasilya
Copy link

Probably something about generics, do you have an example of the type you have now? I'm assuming glint.

@knownasilya knownasilya added the question Further information is requested label Feb 5, 2024
@johanrd
Copy link
Contributor

johanrd commented Feb 5, 2024

Hi. The helper function itself is typed in main (https://github.com/adopted-ember-addons/ember-set-helper/blob/main/ember-set-helper/src/helpers/set.ts). yet the V2 version (with types) is not published to npm.

I am not fully sure how to build and publish to npm with types, so help is appreciated

@knownasilya
Copy link

So you are just waiting for the new version to be published, got it.

@gabrielflorit
Copy link
Author

Let me explain a bit. Take the Counter example. This is my attempt at converting it to TypeScript:

// app/components/counter.ts
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

interface CounterSignature {
  Args: {
    onClick: (count: number) => void; 
  }
}

export default class Counter extends Component<CounterSignature> {
  @tracked count = 0;

  @action
  updateCount() {
    this.count++;

    if (this.args.onClick) {
      this.args.onClick(this.count);
    }
  }
}

But this results in a TypeScript error here:

<!-- usage -->
// Error: Type 'string' is not assignable to type '(count: number) => void'
<Counter @onClick={{set this "currentCount"}} /> 

I'm a little at a loss as to how to proceed.

@knownasilya
Copy link

Give v3.0.0 of this addon a try

@gabrielflorit
Copy link
Author

@knownasilya I get the following error on 3.0.0:

ember-set-helper at /Users/.../node_modules/ember-set-helper is missing its addon main file

@cah-brian-gantzler
Copy link

@knownasilya I get the following error on 3.0.0:

ember-set-helper at /Users/.../node_modules/ember-set-helper is missing its addon main file

same

@johanrd
Copy link
Contributor

johanrd commented Feb 21, 2024

@gabrielflorit @cah-brian-gantzler Can you try with 3.0.1?

I now get types in glint by import set from 'ember-set-helper/helpers/set'.

(…we could perhaps consider to make it possible to also import set from 'ember-set-helper or import { set } from 'ember-set-helper?)

@cah-brian-gantzler
Copy link

Will try it. I like the import { set } version, however I would normally do import {set as setHelper} because this addon has the conflict should set from ember/object also be used. When importing this as set, the error that is generated is not immediately obvious. Just an FYI

@cah-brian-gantzler
Copy link

Working correctly now. Thanks

@MichalBryxi
Copy link

Working correctly now. Thanks

Has this been released @cah-brian-gantzler ?

When using "ember-set-helper": "^3.0.1" following code:

import { set as setHelper } from 'ember-set-helper';

...

<template>
  <Foo @onChange={{setHelper this.settings 'date'}} />
</template>

I get following error:

Error: Attempted to use a value as a helper, but it was not an object or function. Helper definitions must be objects or functions with an associated helper manager. The value was: undefined

@johanrd
Copy link
Contributor

johanrd commented Apr 23, 2024

@MichalBryxi: Currently, the import is import set from 'ember-set-helper/helpers/set', or in your case import setHelper from 'ember-set-helper/helpers/set'

@johanrd johanrd linked a pull request Apr 23, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants