We may earn an affiliate commission when you visit our partners.
Course image
Jordan Hudgens

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

Read more

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.

Enroll now

What's inside

Learning objectives

  • Be ready to move onto building angular, react and vue applications.
  • Code with the typescript programming language.
  • Work with typescript classes and object oriented programming concepts.

Syllabus

This section explains what TypeScript is, the benefits to using TypeScript, along with how to install it and get it running on your system.

This guide provides an overview of the TypeScript programming language along with listing some of the key benefits associated with TypeScript.

Read more

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.

This section walks through the basic syntax and structure for working with the TypeScript programming language.

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 section contains guides that walk through how to work with closures in the TypScript 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.

After completing this section you will be able to understand how TypeScript works with object oriented programming, including the topics of: classes, interfaces, and working with 'this'.

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.

This section of the course works through the concept of asynchronous development, including walking through: an overview of asynchronous programming, callbacks, promises, and best practices.

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.

Explanation of Asynchronous Development

Let's start off with a definition of what asynchronous development means.

What Does Asynchronous Mean?

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.

Asynchronous Programs in the Real World

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.

Non Blocking Code

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.

Summary

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.

This section will explain how to work with TypeScript decorators, focusing on how to layer custom functionality on top of classes and functions.

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.

In this section, you'll learn advanced TypeScript programming techniques that can be implemented in production applications and enable additional scalability and maintainability.

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

In this section you'll learn how to build out a full React application using TypeScript

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

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Ideal for those seeking to learn Angular, React JS, or Vue JS frameworks, this course delves into the indispensable TypeScript programming language
Jordan Hudgens, the course instructor, possesses over a decade of experience in web application development for reputable organizations like Eventbrite and Quip, enhancing the course's credibility
Specifically designed to prepare students for Angular 2 application development, this course aligns with the framework's modern development practices
Covers fundamental TypeScript syntax and structure, as well as advanced techniques like working with closures, object-oriented programming, asynchronous development, and decorators
While not intended to teach TypeScript console application development, it focuses on practical skills for building real-world Angular 2 applications
Utilizes the same material taught in devCamp coding bootcamps before students progress to the immersive Angular 2 course, indicating its alignment with industry standards

Save this course

Save Introduction to TypeScript Development to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Introduction to TypeScript Development with these activities:
Review JavaScript Fundamentals
Strengthen your understanding of JavaScript, which is essential for TypeScript.
Browse courses on JavaScript
Show steps
  • Review JavaScript syntax, including variables, data types, and control flow.
  • Practice writing simple JavaScript programs to reinforce your understanding.
  • Complete online quizzes or exercises to test your knowledge.
Organize Course Materials
Maintain a well-structured repository of course materials for easy reference.
Show steps
  • Create a system for organizing course materials, such as folders or digital notebooks.
  • Categorize and label materials based on topic or relevance.
  • Periodically review and update your materials to ensure they remain current and organized.
Watch TypeScript Video Tutorials
Enhance your understanding of TypeScript by following expert-led tutorials.
Browse courses on TypeScript
Show steps
  • Identify reputable online platforms that offer TypeScript video tutorials.
  • Select tutorials that cover topics relevant to the course.
  • Watch the videos, taking notes and pausing to practice concepts.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Read and Review 'Effective TypeScript'
Review key TypeScript concepts and best practices to strengthen foundational knowledge.
Show steps
  • Read through the book's chapters, focusing on understanding the core concepts of TypeScript.
  • Take notes and highlight important passages for future reference.
  • Attempt the practice exercises at the end of each chapter to test your comprehension.
Participate in TypeScript Study Groups
Engage with peers to discuss TypeScript concepts and share knowledge.
Browse courses on TypeScript
Show steps
  • Connect with fellow TypeScript learners through online forums or social media groups.
  • Join or initiate study groups to discuss specific topics or work on projects together.
  • Participate actively in discussions, asking questions, sharing insights, and providing support.
Complete TypeScript Coding Challenges
Reinforce your understanding of TypeScript syntax and concepts through hands-on practice.
Browse courses on TypeScript
Show steps
  • Find online platforms or resources that provide TypeScript coding challenges.
  • Select challenges that align with the topics covered in the course.
  • Attempt to solve the challenges independently, referring to course materials as needed.
  • Review your solutions and identify areas for improvement.
Build a TypeScript Project
Apply your TypeScript skills by creating a practical project.
Browse courses on TypeScript
Show steps
  • Identify a project idea that aligns with your interests and course learnings.
  • Plan the project's structure, including the components and features you want to implement.
  • Develop the project using TypeScript, following best practices and design principles.
  • Test and debug the project to ensure its functionality.
  • Document your project and share it with others for feedback.
Participate in TypeScript Hackathons
Challenge yourself and showcase your TypeScript skills in competitive environments.
Browse courses on TypeScript
Show steps
  • Identify TypeScript hackathons or programming competitions that align with your interests.
  • Form a team or work independently to develop innovative TypeScript solutions.
  • Present your project to judges or submit it for evaluation.

Career center

Learners who complete Introduction to TypeScript Development will develop knowledge and skills that may be useful to these careers:
Software Engineer
In the role of a Software Engineer, you would be responsible for designing, developing, testing and maintaining software applications. This course will help you to develop the skills needed to be successful in this role, including proficiency in TypeScript, object-oriented programming, and asynchronous development. You will also learn how to use TypeScript to build real-world applications, such as React, Vue, and Angular applications.
Web Developer
As a Web Developer, your job would be to design, develop, and maintain websites. This course will teach you the skills you need to be successful in this role, including proficiency in TypeScript, HTML, CSS, and JavaScript. You will also learn how to use TypeScript to build responsive, interactive websites.
Mobile Developer
In the role of a Mobile Developer, you would be creating and maintaining mobile applications for iOS and Android devices. This course will teach you the skills you need to be successful in this role, including proficiency in TypeScript, React Native, and Android development. You will also learn how to use TypeScript to build native mobile applications that are both performant and user-friendly.
Full-Stack Developer
As a Full-Stack Developer, you would be responsible for designing, developing, and maintaining both the front-end and back-end of web applications. This course will teach you the skills you need to be successful in this role, including proficiency in TypeScript, JavaScript, Node.js, and SQL. You will also learn how to use TypeScript to build full-stack applications that are both scalable and reliable.
Project Manager
As a Project Manager, you would be responsible for planning, executing, and closing projects. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, project management, and stakeholder management. You will also learn how to use TypeScript to build tools that can help you manage projects more effectively.
Business Analyst
In the role of a Business Analyst, you would be responsible for analyzing business processes and identifying opportunities for improvement. This course will help you to develop the skills needed to be successful in this role, including proficiency in TypeScript, business analysis, and project management. You will also learn how to use TypeScript to build tools that can help businesses improve their operations.
Product Manager
In the role of a Product Manager, you would be responsible for defining, building, and launching products. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, product management, and marketing. You will also learn how to use TypeScript to build products that meet the needs of users.
Data Scientist
In the role of a Data Scientist, you would be using data to solve business problems. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, data analysis, and machine learning. You will also learn how to use TypeScript to build data science applications that can help businesses make better decisions.
UI Designer
In the role of a UI Designer, you would be responsible for designing the user interface of websites and applications. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, UI design, and graphic design. You will also learn how to use TypeScript to build prototypes and mockups that can help you to create better user interfaces.
DevOps Engineer
As a DevOps Engineer, your job would be to bridge the gap between development and operations. This course will help you to develop the skills needed to be successful in this role, including proficiency in TypeScript, DevOps, and continuous integration. You will also learn how to use TypeScript to build tools that can help you to automate the build, test, and deployment process.
Technical Writer
As a Technical Writer, you would be responsible for creating documentation for software and other technical products. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, technical writing, and communication. You will also learn how to use TypeScript to build documentation that is clear and easy to understand.
UX Designer
As a UX Designer, you would be responsible for designing the user experience of websites and applications. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, UX design, and user research. You will also learn how to use TypeScript to build prototypes and mockups that can help you to create better user experiences.
Software Tester
In the role of a Software Tester, you would be responsible for testing software to ensure that it meets the requirements of the users. This course will help you to develop the skills you need to be successful in this role, including proficiency in TypeScript, software testing, and quality assurance. You will also learn how to use TypeScript to build test cases and automate the testing process.
Data Engineer
As a Data Engineer, you would be responsible for designing, building, and maintaining data pipelines. This course will help you to develop the skills needed to be successful in this role, including proficiency in TypeScript, data engineering, and big data. You will also learn how to use TypeScript to build data pipelines that can help your organization to extract value from their data.
Security Engineer
In the role of a Security Engineer, you would be responsible for protecting an organization's computer systems and networks. This course will help you to develop the skills needed to be successful in this role, including proficiency in TypeScript, security, and risk management. You will also learn how to use TypeScript to build security tools that can help you to protect your organization's data.

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Introduction to TypeScript Development.
A comprehensive reference and guide to TypeScript, covering the language's syntax, features, and best practices. is valuable for experienced developers who want to deepen their understanding of TypeScript and its intricacies.
Good introduction to TypeScript for beginners. It covers the basics of the language, including data types, variables, operators, control flow, and functions. It also includes a section on object-oriented programming in TypeScript.
Provides 50 specific tips on how to improve your TypeScript code. It covers topics such as type checking, error handling, refactoring, and performance optimization.
After becoming familiar with the basics of TypeScript you may want to explore more advanced topics such as performance tuning, refactoring, and designing scalable applications.
Is more advanced and it can help strengthen your knowledge of building TypeScript applications. It is written by an experienced software architect and developer.
Hands-on guide to TypeScript. It includes exercises and examples that will help you learn the language quickly and easily.
Serves as a beginner-friendly introduction to TypeScript, covering the basics of the language and its key features. is suitable for those new to TypeScript who want to get started quickly.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Introduction to TypeScript Development.
DOM Manipulation with TypeScript
Most relevant
Code School: Accelerating Through Angular
Most relevant
Building React Apps with TypeScript
Most relevant
Typescript: The Complete Developer's Guide
Most relevant
Angular automation with Protractor + Typescript + Cucumber
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Understanding TypeScript
Most relevant
Web Components & Stencil.js - Build Custom HTML Elements
Most relevant
Libraries and Frameworks for Frontend Development
Most relevant
Our mission

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.

Affiliate disclosure

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.

© 2016 - 2024 OpenCourser