tcomb-form-native icon indicating copy to clipboard operation
tcomb-form-native copied to clipboard

Is it possible to wrap it with simple typings for TypeScript?

Open alexicum opened this issue 8 years ago • 6 comments

Trying to use tcomb-form-native with typescript.

import * as t from 'tcomb-form-native';
let Form = t.form.Form;

Error:(3, 20) TS2656: Exported external package typings file '.../node_modules/tcomb-form-native/index.d.ts' is not a module. Please contact the package author to update the package definition.

Error:(17, 14) TS2339: Property 'form' does not exist on type 'typeof 'tcomb-form-native''.

Please suggest simple index.d.ts. Somehow wrap all in "any"? My newbie attempts didn't help:

declare module 'tcomb-form-native' {
  import * as React from 'react';

  class Form extends React.Component<any, any> {
  }

  let t: any;

  // if the module has a default export
  export default t; // where t is the actual default export


  /* Definistions from tcomb lib */

  type Predicate<T> = (x: T) => boolean;
  type TypeGuardPredicate<T> = (x: any) => x is T;

  interface Type<T> extends Function {
...
}

No success even with this article: https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components/

alexicum avatar Jun 24 '16 15:06 alexicum

Sorry, I don't have any experience with TypeScript.

alvaromb avatar Jun 27 '16 09:06 alvaromb

I did it with "any". Will put it here later.

alexicum avatar Jun 28 '16 08:06 alexicum

tcomb-form-native.d.zip

Here is tcomb-form-native.d.ts

It is just cheating TS compiler...

import TCombFormNative = TComb;

declare namespace TComb {
  import React = __React;

  export interface FormComponentClass {
    Form: React.ComponentClass<any>;
  }

  export interface tcomb {
    form: FormComponentClass;
  }
}

declare var t: TCombFormNative.tcomb;

declare module 'tcomb-form-native' {
  import TCombFormNative = TComb;
  //export = TCombFormNative;
  export = t;
}

Put it into: .\typings_local\tcomb-form-native.d.ts

then install with typings by command: typings install --save --global file:.\typings_local\tcomb-form-native.d.ts

Using it with https://auth0.com/blog/2016/06/15/adding-authentication-to-react-native-using-jwt/ https://github.com/jeffreylees/reactnative-jwts/blob/master/index.ios.js

import * as t from 'tcomb-form-native';
let Form = t.form.Form;
let Person = t.struct({
  username: t.Str,
  password: t.Str
});

render() {
    return (
...
        <View style={styles.row}>
          <Form
            ref={(form: any) => this.ctrls.form = form}
            type={Person}
            options={options}
          />
        </View>
...
}

alexicum avatar Jul 01 '16 12:07 alexicum

@alexicum I got error

Error:(18, 16) TS2665: Invalid module name in augmentation. 
Module 'tcomb-form-native' resolves to an untyped module at
'/home/user/workspace/topsecretproject/node_modules/tcomb-form-native/index.js', 
which cannot be augmented.

when I put your types file in the root of my project... I don't use typings, could you tell me how can I get advantage of your work?

gitowiec avatar Aug 11 '18 19:08 gitowiec

The typing above is incorrect and throws the augmentation error. Correct typing is here:

declare module "tcomb-form-native" {
  export = {
    enums: any,
    form: any,
    maybe: any,
    refinement: any,
    struct: any,
    Boolean: any,
    Date: any,
    Number: any,
    String: any
  };

  export interface FormRef {}
  export type FormRef = (ref: any) => any;
  export type OnFormChanged = (raw: any, path: Array<string | number>) => void;
}

akaila avatar Dec 27 '19 05:12 akaila

Can we integrate this into the library? Most people are using typescript these days and not having typings for this is a big inhibiter in usage. Thanks in advance.

akaila avatar May 20 '20 02:05 akaila