First, we install typings for jQuery with the following command on the project's root folder:

 npm install --save @types/[email protected] 

Next, open the config.json and add the following external dependency:

"jquery": "https://code.jquery.com/jquery-2.2.4.min.js" 

The hard part with jQuery is matching the jQuery version to the typings version close enough not to give you an additional headache. At the time of writing this book, you can't really use the latest 3.x versions of the typings because they are compiled with a newer version of TypeScript than what SharePoint Framework is using.

When you want to use jQuery in a TypeScript file, add the following import statement:

import * as $ from "jquery"; 

At this point, we are able to actually write jQuery statements on our web parts. The following example will first render standard HelloWorld web part contents and then, when the document is fully loaded, we use the jQuery selector to find div with a class defined in styles.helloFrameworks and replace the contents of the elements with hello world text: