jrwebdev

// Angular 1
const module = angular.module('myModule', []);
module.service('UserService', ['$http', function ($http) {
  
  this.getUsers = () => {
    return $http.get('http://api.mywebsite.com/users')
                .then(res => res.data)
                .catch(res => new Error(res.data.error));
  }

jrwebdev

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  template: `
    <div 
      ng-if="$ctrl.isShown" 
      ng-click="$ctrl.onClick($event)" 
      ng-class="{blue: $ctrl.isBlue}">

        Hello World!

jrwebdev

import * as React from 'react';

interface HelloProps {
  style?: React.CSSProperties;
  name: string;
}

const Hello = ({ style, name }: HelloProps) => (
  <div style={style}>Hello, {name}!</div>
);

jrwebdev

import * as React from 'react';

interface WithBlueBackgroundProps {
  style?: React.CSSProperties;
}

const withBlueBackground = <P extends WithBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<P> {

jrwebdev

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import withBlueBackground from './withBlueBackground';
import Hello from './Hello';

const BlueHello = withBlueBackground(Hello);
ReactDOM.render(
  <BlueHello name="Bob" style={{ fontWeight: 'bold' }} />,
  document.getElementById('app')

jrwebdev

import * as React from 'react';

type ColorShade = 'light' | 'dark';

export interface InjectedBlueBackgroundProps {
  style?: React.CSSProperties;
}

interface WithBlueBackgroundProps {
  shade?: ColorShade;

jrwebdev

import * as React from 'react';

type ColorShade = 'light' | 'dark';

export interface InjectedBlueBackgroundProps {
  backgroundColor: string;
}

interface WithBlueBackgroundProps {
  shade?: ColorShade;

jrwebdev

import * as React from 'react';

import withBlueBackground, { InjectedBlueBackgroundProps } from './withBlueBackgroud';

interface HelloProps {
  style?: React.CSSProperties;
  name: string;
}

const Hello = ({ style, name }: HelloProps & InjectedBlueBackgroundProps) => (

jrwebdev

type Diff<T extends string, U extends string> = ({ [P in T]: P } &
  { [P in U]: never } & { [x: string]: never })[T];
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;

const withBlueBackground = <P extends InjectedBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<
    Omit<P, keyof InjectedBlueBackgroundProps> & WithBlueBackgroundProps
  > {

jrwebdev

import { Subtract } from 'utility-types';

const withBlueBackground = <P extends InjectedBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<
    Subtract<P, InjectedBlueBackgroundProps> & WithBlueBackgroundProps
  > {
    render() {
      const { shade, ...props } = this.props;