Mixins use problem with React

[xmehaut]

Hello,

I'm trying to use mixins with React. The compiler tells me that I try to reefined as property some features which are functions... Here is the code :

    import * as React from "react"
import * as ReactDom from "react"
import {ClassGenerator} from "../mixins/classgenerator"
import {applyMixins} from "../mixins/mixins"



export  class Component<C,S> extends React.Component<C,S> implements ClassGenerator  {
    constructor(props) {
        super(props); 
    }

    //mixins generic
    setState : (any) =>any  //PB
    forceUpdate : ()=>void      //PB
    render : () =>any              //PB
    props : any
    state:any
    context:any
    refs:  any
    key: any

    //mixin classgenerator
    getClassName : (string, any) => string 
}

with classGenerator

interface Props extends React.Props<ClassGenerator>{
     className: string;
}

export class ClassGenerator extends React.Component<Props, {}>{

    getClassName(defaultClassName, addClassName) : string {
        let classResult = defaultClassName;

        if (typeof this.props.className !== 'undefined') { 
            classResult += ' ' + this.props.className;
        }

        if (typeof addClassName !== 'undefined') {
            if (typeof addClassName === 'object') {
                classResult += ' ' + classNames(addClassName);
            } else {
                classResult += ' ' + addClassName;
            }
        }

        return classResult;
    }
};

any clue?

[xmehaut]

(...)
I succeded in implementing the behavior I wanted as follows, but it is not very convenient :-(

import * as React from "react"
import * as ReactDom from "react"
import {applyMixins} from "../mixins/mixins"
import {classNames} from 'classnames';

export interface ClassGeneratorProps {
     className: string;
}

export abstract class ClassGenerator<P>{
    abstract properties() : ClassGeneratorProps&P;

    getClassName(defaultClassName, addClassName) : string {
        let classResult = defaultClassName;

        if (typeof this.properties().className !== 'undefined') { 
            classResult += ' ' + this.properties().className;
        }

        if (typeof addClassName !== 'undefined') {
            if (typeof addClassName === 'object') {
                classResult += ' ' + classNames(addClassName);
            } else {
                classResult += ' ' + addClassName;
            }
        }

        return classResult;
    }
};

export interface Props<C> extends React.Props<C> {
}


export  class Component<P,S>  extends React.Component<P,S>   implements ClassGenerator<P> {

    getProperties() : ClassGeneratorProps&P{
        return this.props as ClassGeneratorProps&P;
    }

    //mixin classgenerator 
    properties : () => any
    getClassName : (string, any) => string 
}

applyMixins(Component, [ClassGenerator])

interface TotoInt extends Props<Toto> {}

class Toto extends Component<TotoInt&ClassGeneratorProps,{}> {

}

[RyanCavanaugh]

Looks like you found a good workaround. Tracking the root cause here with #6154

[xmehaut]

Thanks , nevertheless, when i try to use a component which is defined by
this method, the compiler indicates thats the Props must be an Object
type... even if it compiles a working code...

regards

2015-12-18 18:15 GMT+01:00 Ryan Cavanaugh [email protected]:

Looks like you found a good workaround. Tracking the root cause here with
#6154 #6154

—
Reply to this email directly or view it on GitHub
#6147 (comment)
.

[RyanCavanaugh]

Are you using TypeScript from the nightly build (npm install typescript@next) ? The issue should be fixed there

[xmehaut]

not yet, because I use an IDE which is not yet updated for this purpose
(but palantir will do it normally soon)... It will be valuable, beacuse I
need literal strings too :) (I would like also to use the ability to
compile javascript too, but I don't see how to use the allowJS feature)

regards

2015-12-18 18:43 GMT+01:00 Ryan Cavanaugh [email protected]:

Are you using TypeScript from the nightly build (npm install
typescript@next) ? The issue should be fixed there

—
Reply to this email directly or view it on GitHub
#6147 (comment)
.