The `as` operator was introduced to TypeScript 1.6 to replace casts in `.tsx` files, e.g.:

    (event.target as HTMLInputElement).value

The TypeScript wiki explains the 1.6 changes:
[it makes the new `as` operator the default way to cast (removing any ambiguity between JSX expressions and the TypeScript prefix cast operator)](https://github.com/Microsoft/TypeScript/wiki/What&#39;s-new-in-TypeScript#new-tsx-file-extension-and-as-operator)

If the **&quot;Error running app: Instant Run requires &#39;Tools | Android | Enable ADB integration&#39; to be enabled.&quot;** issue occurs while using the latest Gradle Plugin &amp; Latest Android SDK. You can use the below solution as mentioned in the screenshot



[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/61aeW.png


In your gradle file just enable 3 options as per the diagram (default always all options will be enabled). 

This solution weirdly worked for me.
I don&#39;t know it is studio issue or something else with Gradle plugin. But Some one have better solution or exact solution please share across.

Error running app: Instant Run requires &#39;Tools | Android | Enable ADB integration&#39; to be enabled.

I&#39;ve installed react-native-cli globally:    
```
npm install -g react-native-cli
```

Then run:       
```
react-native init AwesomeProject
cd AwesomeProject
``` 

I got the following structure:    
```
-- AwesomeProject   
---- node_modules      
------ react-native    
```  

When I run *react-native run-android* I get an error:    
**Command `run-android` unrecognized. Did you mean to run this inside a react-native project?**

When I run react-native start I get the same.

`react-native -v`     
prints:  
**react-native-cli: 0.2.0   
react-native: n/a - not inside a React Native project directory**

What I&#39;m doing wrong?

react-native run-android is unrecognized

When casting in a `.tsx` file, the compiler assumes it to be JSX, e.g.:

    (&lt;HtmlInputElement&gt; event.target).value

gives an error

&gt; JSX element type &#39;HtmlInputElement&#39; is not a constructor function for JSX elements

How do you cast TypeScript in a `.tsx` file?

How to use a TypeScript cast with JSX/TSX

When casting in a <code>.tsx</code> file, the compiler assumes it to be JSX, e.g.:
<pre><code class="hljs language-csharp">(&#x3C;HtmlInputElement> event.target).value
</code></pre>
gives an error
> JSX element type 'HtmlInputElement' is not a constructor function for JSX elements
How do you cast TypeScript in a <code>.tsx</code> file?

    export class Thread {
      id: string;
      lastMessage: Message;
      name: string;
      avatarSrc: string;
    
      constructor(id?: string,
                  name?: string,
                  avatarSrc?: string) {
        this.id = id || uuid();
        this.name = name;
        this.avatarSrc = avatarSrc;
      }
    }

In `id?` what&#39;s the `?` for?

What is the question mark for in a Typescript parameter name

It&#39;s possible to send data from the parent to a child through @Input, or to call a method on the parent from the child with @Output, but I&#39;d like to do exactly the other way around, which is calling a method on the child from the parent. Basically something like that:

&lt;!-- language: typescript --&gt;

    @Component({
      selector: &#39;parent&#39;,
      directives: [Child],
      template: `
    &lt;child
      [fn]=&quot;parentFn&quot;
    &gt;&lt;/child&gt;
    `
    })
    class Parent {
      constructor() {
        this.parentFn()
      }
      parentFn() {
        console.log(&#39;Parent triggering&#39;)
      }
    }

and the child:

&lt;!-- language: typescript --&gt;

    @Component({
      selector: &#39;child&#39;,
      template: `...`
    })
    class Child {
      @Input()
      fn() {
        console.log(&#39;triggered from the parent&#39;)
      }

      constructor() {}
    }

Background is a kind of &quot;get&quot; request, i.e. for getting an up-to-date status from the child.

Now I know I could achieve that with a service and Subject/Observable, but I was wondering whether there is not something more straightforward?

Angular 2 - How to trigger a method on a child from the parent

I recently watched a Tutorial on Angular 2 with TypeScript, but unsure when to use an Interface and when to use a Model for data structures.

Example of interface:

    export interface IProduct {
	    ProductNumber: number;
	    ProductName: string;
	    ProductDescription: string;
    }

Example of Model:

    export class Product {
	    constructor(
		    public ProductNumber: number,
		    public ProductName: string,
		    public ProductDescription: string
	    ){}
    }

I want to load a JSON data from a URL and bind to the Interface/Model. Sometime I want a single data object, other time I want to hold an array of the object.

Which one should I use and why?

When to use Interface and Model in TypeScript / Angular

I am trying to understand how to use Observables in Angular 2.  I have this service:  

    import {Injectable, EventEmitter, ViewChild} from &#39;@angular/core&#39;;
    import {Observable} from &quot;rxjs/Observable&quot;;
    import {Subject} from &quot;rxjs/Subject&quot;;
    import {BehaviorSubject} from &quot;rxjs/Rx&quot;;
    import {Availabilities} from &#39;./availabilities-interface&#39;
    
    @Injectable()
    export class AppointmentChoiceStore {
    	public _appointmentChoices: BehaviorSubject&lt;Availabilities&gt; = new BehaviorSubject&lt;Availabilities&gt;({&quot;availabilities&quot;: [&#39;&#39;], &quot;length&quot;: 0})
    
    	constructor() {}
    
    	getAppointments() {
    		return this.asObservable(this._appointmentChoices)
    	}
    	asObservable(subject: Subject&lt;any&gt;) {
    		return new Observable(fn =&gt; subject.subscribe(fn));
    	}
    }

    

This BehaviorSubject is pushed new values as so from another service:

    that._appointmentChoiceStore._appointmentChoices.next(parseObject)

I subscribe to it in the form of an observable in the component I want to display it in:  

    import {Component, OnInit, AfterViewInit} from &#39;@angular/core&#39;
    import {AppointmentChoiceStore} from &#39;../shared/appointment-choice-service&#39;
    import {Observable} from &#39;rxjs/Observable&#39;
    import {Subject} from &#39;rxjs/Subject&#39;
    import {BehaviorSubject} from &quot;rxjs/Rx&quot;;
    import {Availabilities} from &#39;../shared/availabilities-interface&#39;
    
    
    declare const moment: any
    
    @Component({
    	selector: &#39;my-appointment-choice&#39;,
    	template: require(&#39;./appointmentchoice-template.html&#39;),
    	styles: [require(&#39;./appointmentchoice-style.css&#39;)],
    	pipes: [CustomPipe]
    })
    
    export class AppointmentChoiceComponent implements OnInit, AfterViewInit {
    	private _nextFourAppointments: Observable&lt;string[]&gt;
    	
    	constructor(private _appointmentChoiceStore: AppointmentChoiceStore) {
    		this._appointmentChoiceStore.getAppointments().subscribe(function(value) {
    			this._nextFourAppointments = value
    		})
    	}
    }

   

And the attempt to display in the view as so:  

      &lt;li *ngFor=&quot;#appointment of _nextFourAppointments.availabilities | async&quot;&gt;
             &lt;div class=&quot;text-left appointment-flex&quot;&gt;{{appointment | date: &#39;EEE&#39; | uppercase}}


However, availabilities isn&#39;t yet a property of the observable object so it errors out, even though I define it in the availabilities interface as so:

    export interface Availabilities {
      &quot;availabilities&quot;: string[],
      &quot;length&quot;: number
    }

How can I display an array asynchronously from an observable object with the async pipe and *ngFor?  The error message I get is:

    browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property &#39;availabilties&#39; of undefined



Using an array from Observable Object with ngFor and Async Pipe Angular 2

Even though I&#39;ve installed &amp; referenced the Typings library &#39;react&#39; like this

` /// &lt;reference path=&quot;../../../typings/browser.d.ts&quot; /&gt; `

I&#39;m still getting the error below:
[![enter image description here][1]][1]

Is there another Typings library I should be installing as well?


  [1]: http://i.stack.imgur.com/Rg3xf.png

error TS2602: JSX element implicitly has type &#39;any&#39; because the global type &#39;JSX.Element&#39; does not exist

How does one pass a prop without value to a react component?

    &lt;SomeComponent disableHeight&gt; {/* here */}
        {({width}) =&gt; (
            &lt;AnotherComponent
                autoHeight {/* and here */}
                width={width}
                height={300}
                {...otherProps}
            /&gt;
        )}
    &lt;/SomeComponent&gt;

Note - there is no default prop values specified for those props.

I can&#39;t seem to find any references on that, but by observing values for those properties they get assigned to `true` by default.

How to pass props without value to component

I am trying to render boolean value inside JSX, however React is evaluating it as expression and isn&#39;t returning anything after the component is returned.

Any workaround for this?

Here is an example 


    var ipsumText = true;

    ReactDOM.render(
      &lt;div&gt;
         Boolean Value:    {ipsumText}
      &lt;/div&gt;,
      document.getElementById(&#39;impl&#39;)
    );

Just shows compiled HTML as 

    &lt;div data-reactid=&quot;.0&quot;&gt;&lt;span data-reactid=&quot;.0.0&quot;&gt;Boolean Value:    &lt;/span&gt;&lt;/div&gt;


**EDIT:** Here is the JSBin link for the example http://jsbin.com/nibihodoce/1/edit?html,js,output

**EDIT 2:** I have already explored the .toString() alternative, however since I am iterating over an array of objects and a particular field of that object can have string/integer/boolean kind of value. Applying .toString() to all of &#39;em doesn&#39;t seem optimal.

Cannot render boolean value in JSX?

I have a file test_stuff.js that I am running with `npm test`

It pretty much looks like this:


    import { assert } from &#39;assert&#39;;
    import { MyProvider } from &#39;../src/index&#39;;
    import { React } from &#39;react&#39;;

    const myProvider = (
      &lt;MyProvider&gt;
      &lt;/MyProvider&gt;
    );

    describe(&#39;Array&#39;, function() {
      describe(&#39;#indexOf()&#39;, function() {
        it(&#39;should return -1 when the value is not present&#39;, function() {
          assert.equal(-1, [1,2,3].indexOf(4));
        });
      });
    });


Unfortunately, I get the error

    /Users/me/projects/myproj/test/test_stuff.js:11
    var myProvider = _react.React.createElement(_index.MyProvider, null);
                                 ^

    TypeError: Cannot read property &#39;createElement&#39; of undefined
        at Object.&lt;anonymous&gt; (/Users/me/projects/myproj/test/test_stuff.js:7:7)

What does that mean? I am importing React from &#39;react&#39; successfully, so why would React be undefined? It is _react.React, whatever that means...

React JSX file giving error &quot;Cannot read property &#39;createElement&#39; of undefined&quot;

In ReactJS, is there a way to determine if the website is being viewed on mobile or desktop? Because, depending on which device I would like to render different things.

Thank you

ReactJS: How to determine if the application is being viewed on mobile or desktop browser

What does JSX stand for?

I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS.

Content Type	Original Author	Original Content on Stackoverflow
Question	RationalDev likes GoFundMonica	View Question on Stackoverflow
Solution 1 - Typescript	RationalDev likes GoFundMonica	View Answer on Stackoverflow

How to use a TypeScript cast with JSX/TSX

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

react-native run-android is unrecognized

Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.

Attributions