TS example: replace class extension of Query component (#2721)

* Replace class extension of Query component

Extending the Query component as a class means that the compiled code
generates and extra object. By using the raw Query component directly
with generics, we avoid this extra artifact and the code becomes more
simple

* Changelog update

Changelog.md

@@ -6,6 +6,12 @@
 
 ### Improvements
 
+- Update the typescript example app to use the raw Query component directly,
+  with generics, to avoid generating the extra object that's created (in the 
+  compiled code) when extending the Query component as a class.  <br/>
+  [@evans](https://github.com/evans) in [#2721](https://github.com/apollographql/react-apollo/pull/2721)
+
+
 ## 2.3.3
 
 ### Bug Fixes

examples/typescript/src/Character.tsx

@@ -3,8 +3,6 @@ import { GetCharacterQuery, GetCharacterQueryVariables, Episode } from './__gene
 import { GetCharacter as QUERY } from './queries';
 import { Query } from 'react-apollo';
 
-class CharacterQuery extends Query<GetCharacterQuery, GetCharacterQueryVariables> {}
-
 export interface CharacterProps {
   episode: Episode;
 }
@@ -13,7 +11,7 @@ export const Character: React.SFC<CharacterProps> = props => {
   const { episode } = props;
 
   return (
-    <CharacterQuery query={QUERY} variables={{ episode }}>
+    <Query<GetCharacterQuery, GetCharacterQueryVariables> query={QUERY} variables={{ episode }}>
       {({ loading, data, error }) => {
         if (loading) return <div>Loading</div>;
         if (error) return <h1>ERROR</h1>;
@@ -40,7 +38,7 @@ export const Character: React.SFC<CharacterProps> = props => {
           </div>
         );
       }}
-    </CharacterQuery>
+    </Query>
   );
 };