April 2021 course update: Added an entire section that shows how to build a React application with TypeScript 4. Also added a new Advanced Techniques section
April 2021 course update: Added an entire section that shows how to build a React application with TypeScript 4. Also added a new Advanced Techniques section
Do you want to build Angular, React JS, or Vue JS web and mobile applications? If that's your goal it's vital that you learn the TypeScript programming language, and that's exactly what we're going to walk through in this course. My name is Jordan Hudgens, and I'll be your instructor for the course. In addition to being the lead instructor for devCamp I've also been building web applications for over a decade for organizations such as Eventbrite and Quip.
After you have completed this course you'll be ready to start learning how to work with the React, Vue and Angular application frameworks. Angular 2 was rebuilt from the ground up in order to take advantage of modern development practices, and the framework creators actually built the new version completely in the TypeScript programming language. This is the reason why TypeScript is so important to learn for aspiring Angular developers.
In this course we're going to start with the basics and I'm going to show you how fun it is to build TypeScript programs. After you're familiar with the syntax, we're going to move onto more advanced TypeScript development techniques, such as: working with closures, object oriented programming, real time asynchronous development, and decorators.
My focus for this course isn't to teach you how to build TypeScript console applications. Instead, my goal is to teach you the skills you will need in order to build real world Angular 2 applications. And actually, this course includes the exact material we teach at our devCamp coding bootcamps prior to students going through our immersive Angular 2 course.
There are no technical pre-requisites to this course. The ideal student is an individual who wants to learn how to build Angular 2 applications. I will show you how to install and run TypeScript programs on both a Mac and a PC. And you can use either operating system to follow along with the course material.
Each lesson of the course is paired with the source code that I used in the lecture so you can check your work.
Please feel free to review the course curriculum and I look forward to going through the material with you on your development journey.
This guide provides an overview of the TypeScript programming language along with listing some of the key benefits associated with TypeScript.
This guide walks through how to install the Homebrew package manager if you plan on building TypeScript applications on the Mac operating system.
This lesson gives a step by step walk through for installing Node.js and NPM on a Mac.
This guide walks through how to install the TypeScript programming language on a Mac computer by leveraging NPM.
In this lesson we'll learn how to install the TypeScript plugin for the Sublime Text editor to provide helpful tools for building TypeScript programs.
This guide walks through the full set of steps for installing Node.js and NPM on a PC running the Windows 10 operating system.
This guide explains how you can use NPM in order to install TypeScript onto a PC running Windows 10.
This tutorial walks through how to configure your system to run TypeScript programs, including how to run programs entirely inside the Visual Studio Code text editor.
In this guide we'll walk through how to build a Hello World application in TypeScript on a Mac, including how to integrate a tsconfig file for running TypeScript code.
This guide walks through how to use variables in TypeScript, specifically we examine how to work with the: var, let, and const variable types and how they each have a specific role in development.
This guide examines how to work with string interpolation using back ticks in TypeScript.
In this guide we will walk through the key types that are used in TypeScript programs.
This guide walks through how to create a type alias in a TypeScript program.
In this guide you'll learn how to implement Union Types in TypeScript, which allow for variables and aliases to have multiple data types assigned to them.
In this course update video, I show how I utilize union types in a React JS eCommerce application. We'll walk through how union types allow the application to guide development.
This guide examines how to use arithmetic operators in the TypeScript programming language.
In this guide we'll walk through how to use conditionals in the TypeScript programming language.
This guide examines the full list of TypeScript conditional operators that allow for managing data flow in programs.
In this guide you'll learn how to use compound conditionals in TypeScript programs, including how to work with the: and, or and not programming mechanisms.
This guide explains how to work with loops in TypeScript, including: while loops, for in, and for of.
This guide provides an introduction to functions and specifically the syntax for how to create functions in the TypeScript programming language.
This guide analyzes how to work with function arguments in a TypeScript program. This includes a walk through of: optional, default, and rest arguments.
Learn how to work with arrow functions in the TypeScript programming language.
This guide explains the key differences between TypeScript function declarations vs function expressions.
This TypeScript tutorial walks through the concept and syntax for immediately invoked functions.
This guide explains how immediately invoked functions in TypeScript can work with arguments, along with a deeper dive into how to structure these types of functions.
This guide examines how to work with TypeScript closures, including three examples of how closures work, specifically discussing the idea of variable scope.
This guide walks through how to create and instantiate a class in TypeScript, including how to work with the constructor function.
In this guide you'll learn how to implement object oriented inheritance in TypeScript programs, including the proper syntax along with a practical example.
This guide walks through how to use objects in the TypScript programming language, including the syntax for creating a new object and how to call the object's values.
In this guide you will learn how to work with interfaces in the TypeScript programming language.
This guide examines how to create functions that follow an interface's set of rules.
In this guide we're going to examine how to implement interfaces in classes, including two processes that allow for class implementation.
In this guide you'll learn how to work with namespaces in the TypeScript programming language.
No matter your background, the concept of asynchronous behavior in applications can be a challenging topic. Seasoned programmers and new coding students alike can be intimidated by what it takes to work with asynchronous programs. In this guide I will walk through a dead simple explanation of asynchronous development. And by the end of the material hopefully the concept will be easier to understand.
Let's start off with a definition of what asynchronous development means.
If you Google asynchronous development you'll get a long list of convoluted explanations. So I'm going to give you the easiest definition I can think of:
Asynchronous development allows for you to run multiple processes at the same time.
That's pretty straightforward, right?
Essentially what takes place in a program that leverages asynchronous behavior is that they have code components that can run in the background.
Let's examine a practical example of asynchronous behavior in a real world program. Imagine that you have a web app that does not utilize asynchronous processes. Now imagine that you need to render a page with a large database query. When a user accesses the page the header will load and then the screen will freeze while the database query is running. Once the query is complete the program will show the results and then it will render the other page components, such as the footer, sidebar, etc.
In an asynchronous application, if you have a large database query the entire page will load and the results from the database query won't hold up the rest of the page from loading. From that point, the query data will show up whenever the database query has completed.
Implementing this type of functionality is typically accomplished through runtimes such as Node.js. Node is the traditional tool of choice because it utilizes what's called non blocking IO (where IO stands for input/output). And thankfully the term non blocking is pretty self descriptive. From a programming point of view it means that a process in one function doesn't have to block the processes in other functions.
And that is a dead simple explanation of asynchronous development along with a practical example of how it works in a real world scenario.
This guide walks through the issues with 'this' in TypeScript, along with examining how we can leverage arrow functions to fix scoping problems.
This guide walks through how to work with higher order functions and callbacks in TypeScript to build asynchronous applications.
This guide walks through how to configure your system to work with TypeScript promises. Specifically we update the compiler options in the tsconfig file to work with the ES6 runtime.
This guides examines how to work with Promises in TypeScript, including: what promises are, how to create a promise, and how to work with promises.
In this guide you'll learn how to work with TypeScript decorators with a basic code example that examines the core functionality.
This guide explains how to work with class decorators in TypeScript, including how to add custom behavior to classes.
In this guide you'll learn how to work with method decorators in the TypeScript programming language, including how you can customize function behavior by adding new behavior.
This guide reviews an Angular 2 code file and examines how the Component decorator is utilized in Angular 2 development.
This TypeScript programming tutorial goes into detail on how optional chaining can be utilized to streamline conditionals in an application. Practical ways that optional chaining can be used:
Ensuring that data render attempts are only attempted after an application receives data from an API
Allows for cleaner, more maintainable code since the conditionals can be built directly into the program instead of having to build 'guard' based conditionals.
Preventing errors from occurring when a server sends unexpected data
In this tutorial, you'll learn how to build a function that capitalizes every word in a sentence using JavaScript / TypeScript. We break the problem down into two functions:
A function to capitalize a single word
A function that splits a sentence up into separate elements, capitalizes each word and then returns the formatted string
Configuring a React application that utilizes TypeScript can be challenging if you have never done it before. For that reason, I built out a node module that you can use that will generate a fully functional React application that already has TypeScript integrated. Some of the key features of the module are:
Automatically configured to run TypeScript 4+ code
Example React components that utilize hooks
Webpack setup for development and production environments
Loader integration for TypeScript, React, assets and Scss compilation
Pre-configured to allow for deploying to React applications to Heroku
This guide walks through how to build React components that utilize TypeScript interfaces. This illustrates the power of using TypeScript with tools such as React since they can help guide the development process and document the rules that the application should follow.
This deep dive guide walks through a comparison between the map function compared with other types of loops. You will also learn how to add dynamic behavior into the iteration process. This will allow you to render a list of data on the screen using tools such as React.
This React tutorial explains how to iterate over an array and render each item on the screen. It teaches:
How to render an array of items with React
The importance of the key prop and React's performance based diffing engine
How to define a set of types and interfaces with TypeScript to describe the rules that the application needs to follow
How to implement inline styles with React
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.