Consider adding a TypeScript definitions file

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.

@MurhafSousli

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

Thank you

@MurhafSousli

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!

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

@MurhafSousli

@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.

@MurhafSousli

@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.

@kadamwhite

@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.

I am about to use in angular 2 app ..

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

@malfborger

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

I am using:
https://github.com/shprink/wp-api-angular

@klihelp

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

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

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 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,
  };
}

@kadamwhite

@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.

add manually generated types WP-API#149

@MurhafSousli

@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"
    ],
  }
}

@Shelob9

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

@kadamwhite

@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 :)

@kadamwhite

Notes on my conversation with @kadamwhite at WordCamp US.

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

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.
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.
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.

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!

@johnbillion

@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.

Great!

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

Navigation Menu

Repository navigation

Consider adding a TypeScript definitions file #149

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Consider adding a TypeScript definitions file #149

Description

Activity

kadamwhite commented on Feb 24, 2016

MurhafSousli commented on Feb 24, 2016

kadamwhite commented on Mar 14, 2016

MurhafSousli commented on Mar 14, 2016

kadamwhite commented on Jun 4, 2016

kadamwhite commented on Jul 4, 2016

MurhafSousli commented on Jul 5, 2016

klihelp commented on Jan 5, 2017

malfborger commented on Feb 7, 2017

MurhafSousli commented on Feb 7, 2017

klihelp commented on Feb 7, 2017

malfborger commented on Feb 15, 2017

klihelp commented on Feb 17, 2017

unrevised6419 commented on Jan 24, 2019

Shelob9 commented on Oct 30, 2019

Shelob9 commented on Oct 30, 2019

unrevised6419 commented on Oct 30, 2019

unrevised6419 commented on Oct 30, 2019

Shelob9 commented on Oct 30, 2019

Shelob9 commented on Nov 6, 2019

johnbillion commented on May 17, 2020

Shelob9 commented on May 17, 2020

johnbillion commented on May 17, 2020

thefrosty commented on Jun 16, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions