SPFxHelloWebPartWithDI.ts

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { IGreetingsService, GreetingsServiceKey } from '../../../services/GreetingsService';
import { inject } from '../../../di/DependenciesManager';

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  // We declare a field that will be injected with the GreetingsService registered instance
  @inject(GreetingsServiceKey) private greetingsService: IGreetingsService;

	public render(): React.ReactElement<IHelloWorldProps> {
		let hello = this.greetingsService.sayHello('Yannick');
		
		return (
			<div className={styles.helloWorld}>
				<div className={styles.container}>
					<div className={styles.row}>
						<div className={styles.column}>
							<span className={styles.title}>Welcome to Dependency Injection!</span>
							<p>{this.props.description}</p>
							<p className={styles.subTitle}>
								Result from service: {hello}.
							</p>
						</div>
					</div>
				</div>
			</div>
		);
  }
}