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 notifications@github.com:

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 notifications@github.com:

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