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

Consider adding a TypeScript definitions file #149

Closed
MurhafSousli opened this issue Feb 22, 2016 · 24 comments · May be fixed by #447
Closed

Consider adding a TypeScript definitions file #149

MurhafSousli opened this issue Feb 22, 2016 · 24 comments · May be fixed by #447

Comments

@MurhafSousli
Copy link

I'm using https://github.com/mgechev/angular2-seed for my angular2 app and I want to include wordpress-rest-api in a component file (typescript) but it's not working.

import * as WP from 'wordpress-rest-api/wp'; gave the error can't find module

I also tried require( 'wordpress-rest-api/wp' ) gave the error Unhandled rejection Error: Error on fetch for node.extend.js

export class AppCmp {
  constructor(){
    var WP = require( 'wordpress-rest-api/wp' );
    var wp = new WP({ endpoint: 'http://localhost/murhaf/wp-json' });

    wp.posts().then(function(data){
        console.log(data);
      }).catch(function( err ) {
        console.log(err);
    });
}

Thanks.

@kadamwhite
Copy link
Collaborator

@MurhafSousli I am not very familiar with TypeScript but I'll test this out and see if I can figure what's up

@MurhafSousli
Copy link
Author

Thank you

@kadamwhite
Copy link
Collaborator

I'm not sure what's up with this, @MurhafSousli -- could you put together a gist demonstrating the environment in which this issue occurs? Thanks!

@MurhafSousli
Copy link
Author

Well in order to use any external library in a typescript application, we need a typescript definition file for the library

file.ts <=> file.js + file.d.ts

@kadamwhite
Copy link
Collaborator

kadamwhite commented Jun 4, 2016

@MurhafSousli TypeScript support is not a current roadmap priority vs missing features, but if you're able to put together a definition file I'd be happy to merge it in as a PR. I'm re-naming this issue to track potentially adding a typescript file later on.

@kadamwhite kadamwhite changed the title can't include the client Consider adding a TypeScript definitions file Jun 4, 2016
@kadamwhite
Copy link
Collaborator

kadamwhite commented Jul 4, 2016

@MurhafSousli One wrinkle in providing a typescript file is that the functions available to the API client now depend on the discovery or bootstrapping process; given the customizability of a WordPress install it is actually not possible for us to authoritatively specify all available methods up-front, since a site might not even provide .posts(), e.g. I am not confidant about how to proceed with a TypeScript definition file in this case, and due to the lack of response I am going to close this^; but if you are able to provide a PR defining a .d.ts file I would be happy to merge it. Thank you for your interest!

^ I recognize the irony of closing something after a month when it took me months to respond initially; so please feel free to re-open if you wish to discuss further.

@MurhafSousli
Copy link
Author

@kadamwhite Hi, I'm sorry I didn't respond I just read it now, I don't really know how to make definition file for a javascript library, so I had write my own service file in typescript.

@klihelp
Copy link

klihelp commented Jan 5, 2017

I am about to use in angular 2 app ..

@malfborger
Copy link

Have anyone found a workaround to be able to use this lib in their typescript project?

@MurhafSousli
Copy link
Author

MurhafSousli commented Feb 7, 2017

@malfborger If you are working in angular project, try this https://github.com/MurhafSousli/ngx-wordpress

@klihelp
Copy link

klihelp commented Feb 7, 2017

@malfborger
Copy link

thx guys @klihelp @MurhafSousli ! But no way to use this repo?

@klihelp
Copy link

klihelp commented Feb 17, 2017

I may use this as well. For start, just require the file, as example:
How to use Bootstrap 4 and Sass (and jQuery)

@iamandrewluca
Copy link

These can be used to put a base for all types, then extend and maintain the types.
https://github.com/Microsoft/dts-gen
https://github.com/DefinitelyTyped/DefinitelyTyped/

⇒  dts-gen -m wpapi -d wpapi     
⇒  ls types/wpapi 
index.d.ts  tsconfig.json  tslint.json  wpapi-tests.ts

@Shelob9
Copy link

Shelob9 commented Oct 30, 2019

I ran into this error:

Could not find a declaration file for module 'wpapi'. 'C:/Users/jpoll/josh-dev/use-wordpres/node_modules/wpapi/wpapi.js' implicitly has an 'any' type.
      Try `npm install @types/wpapi` if it exists or add a new declaration (.d.ts) file containing `declare module 'wpapi';`

I got this far into a useWordPress hook when I ran into this:

import WPAPI from 'wpapi';
import { useRef } from 'react';
export default function useWordPres(endpoint: string) {
  let wp = useRef(new WPAPI({ endpoint }));

  return {
    wp: wp.current,
  };
}

@Shelob9
Copy link

Shelob9 commented Oct 30, 2019

@kadamwhite I'm going to start a PR based on what @iamandrewluca suggested as I think I have it right locally. Can you reopen this issue please? Would be cool to work on typescript support at WCUS contributor day if you're able to.

@iamandrewluca
Copy link

iamandrewluca commented Oct 30, 2019

@MurhafSousli A solution for packages that does not have definitions is.
Create a definition file for example ./src/my-definitions.d.ts
With content

declare module 'wpapi'

Add this file to tsconfig.json

{
  "compilerOptions": {
    "types": [
      "./src/my-definitions.d.ts"
    ],
  }
}

@iamandrewluca
Copy link

iamandrewluca commented Oct 30, 2019

@Shelob9 i'm in, ping me if have any questions.

@Shelob9
Copy link

Shelob9 commented Oct 30, 2019

@iamandrewluca Awesome. I opened #447 for this. I'd be happy to work on typescript for this, but I'm not hyper educated on this, just getting into typescript recently, so if you can help get #447 done, that would be HUGE help.

Didn't get a chance to finish this conversation with @kadamwhite I saw him last time. I'm getting ahead of bugging him about Typescript support during WordCamp US :)

@Shelob9
Copy link

Shelob9 commented Nov 6, 2019

Notes on my conversation with @kadamwhite at WordCamp US.

We talked about three general solutions to address lack of typescript support:

  1. Add a types file. PR Add generated types declaration for minimal typescript support #447 will impiment this. This aproach allows for easy typescript compatibility, but does not provide full typescript support. Also, it doesn't involve any refactoring.
  2. Add interfaces for the main contructor functions -- WPAPI, transports, etc. -- and types describing the objects for their options. This would require updating build process to compile typescript to JavaScript. Some, but not all files would need to change there extension from js to ts.
  3. Option 2 + creating types for endpoint responses. This probably requires a full rewrite, and would be fairly complex as each endpoint on every site dynamically defines its schema.

We agreed that option one makes sense, and maybe option 2 is woth exploring in the future. @kadamwhite does not see option 3 as inline with the goals of this project. I think he's right. But I do think @wordpress/types -- a package that described a WordPress post, user, comment, etc -- as returned by the WordPress REST API or WPGraphWL would be good project, just not here.

@johnbillion
Copy link

I recently created a package that provides TypeScript definitions for the JSON representation of WordPress core PHP objects (WP_Error, WP_Post, and WP_User for now): https://github.com/johnbillion/wp-types . I'd like to extend this to include the same for core objects in REST API responses, so if anyone's interested in getting involved I'd appreciate it!

@Shelob9
Copy link

Shelob9 commented May 17, 2020

@johnbillion I have most of the default route response objects described as Typescript interfaces in a side project. I can extract them into a PR to your package tomorrow if you want.

@johnbillion
Copy link

Great!

@thefrosty
Copy link

These can be used to put a base for all types, then extend and maintain the types.
https://github.com/Microsoft/dts-gen
https://github.com/DefinitelyTyped/DefinitelyTyped/

⇒  dts-gen -m wpapi -d wpapi     
⇒  ls types/wpapi 
index.d.ts  tsconfig.json  tslint.json  wpapi-tests.ts

I came across this: https://www.npmjs.com/package/@types/wpapi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants