image
How to install the TypeScript Toolset
How to install the TypeScript Toolset
Difficulty
Beginner
Duration
11m
Students
1412
Ratings
4.2/5
Description

We begin with an introduction to what Typescript is.

Learning Objectives

The objectives of this module are to provide you with and understanding of:

  • What TypeScript is
  • Know how to install the TypeScript Toolset

Intended Audience

This learning path is aimed at all who wish to learn how to use TypeScript

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. You should have a good working knowledge of Javascript. Please note: Before attending this class delegates must have a Microsoft account (signing up for one is free). 

Feedback

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think.

Transcript

Scaled application development using any form of JavaScript uses a common toolset with particular additions depending on the application being built. And a TypeScript application is no different. You'll need npm installed, meaning no JS installed to manage your dependencies, the TypeScript compiler to convert your TypeScript files to a JavaScript and some form of module bundle will also be needed. The most common module bundler is webpack. This will take all of your compiled JavaScript and create a single bundle distributable JavaScript file, and it can be set up to bundle HTML and CSS too. You can also set it up to provide a live development server to hot load as you develop. Installing TypeScript is done through npm. Using the command npm install -g for global TypeScript will install everything you need. This gives you access to the TypeScript compiler anywhere on your system. Then using the command tsc and the TypeScript file name, will make the compiler produce the equivalent JavaScript file and show you any errors it comes across. This is a quick way to get up and running. But if we start to produce modules, it suddenly becomes unwieldy and unscalable. We're going to be as lightweight as possible for the course as we are trying to focus on learning TypeScript. But we are gonna show you how to set up webpack so you can use a development server and have files hot loaded. Webpack is almost zero configuration. We just need to tell it how to find and deal with the TypeScript files. We've set up an npm project using the npm in it -y command, and we've got TypeScript in the TypeScript loader for webpack installed as development dependencies. There's also webpack webpack-cli and webpack-dev-server installed as development dependencies. Running the npm in it -y command accepts all the defaults for project and creates a package.json file. You can see the development dependencies on line 16 to 20. And we've modified the script section so it returns line seven to 10. These allows the bundler files for production, or as a development bundle, which is useful for testing. Start allows us to hot load the app in the browser using the devServer and this is useful if the TypeScript will be attached to a web application. The check TypeScript compiles all the TypeScript modules by pointing to the TypeScript compiler. To configure webpack, we've created a webpack config JavaScript file as shown now, which points to a file called index.ts in a folder called src. It looks for files with the extensions ts or js, meaning we don't need to include these in the imports if we use them. The module real section checks to see if a file extension that begins with ts has been found. And we'll apply the ts loader module to them. This is what finds bundles and compiles our TypeScript files into the main bundle. We have some control over TypeScript and we can exercise this in the ts config JSON file. In this instance, we instruct the compiler to produce es5 standard JavaScript rather than the default es3 standard. We need an src folder in our project. So this has been created. And we've put a file in there called index tx. And it's got some simple code in there. To view the file running in the browser, we need a web page. So there's an index.html tag, that has a script that attaches the main.js file. That's the file webpack will bundle for us. If we look at the script commands, we can run the build command. This will produce the production-ready version of JavaScript. It produces a folder called dist, and if we open the main.js file, you can see that it's created minimize JavaScript. If we now run the npm dev command, you can see that this bundle file is replaced with one that is not minimized. And that makes it good for testing. Running the check types command, files up the TypeScript compiler and produces the outputted JavaScript. If we use the npm run start command, this spins up the webpack-dev-server, compiles and bundles the TypeScript file to main JS, which is held dynamically on the server rather than on disk and runs it all. And if we go to the dev tools, we can see that we've logged our hello world out to the console. So that's how we set up a scalable environment. If you wanna do anything more complicated like add additional polyfills Phyllis, there are plenty start repo, pause out there on the internet and other instructions to for installing PayPal

About the Author
Students
22514
Labs
6
Courses
29
Learning Paths
16

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics