Composition vs Inheritance? You'll understand it. Build your own web framework? You'll do it. Typescript with React/Redux? It's here.
This is the best course online for mastering Typescript.
Composition vs Inheritance? You'll understand it. Build your own web framework? You'll do it. Typescript with React/Redux? It's here.
This is the best course online for mastering Typescript.
Every other course online teaches you the basic syntax and features of Typescript, but only this course will show you how to apply Typescript on real projects, instructing you how to build large, successful projects through example.
Typescript is a 'super-set' of Javascript. That means that if you already know Javascript, you are ready to take this course. Typescript adds in several important features to Javascript, including a type system. This type system is designed to help you catch errors during development, rather than when you are running your code. That means you'll be twice as productive by catching bugs earlier in development. But besides the type system, Typescript also provides several tools for structuring large codebases and writing truly reusable code.
Mastering Typescript by reading the documentation alone is challenging. Although you might know what a 'typed array' or an 'interface' is, the documentation (and other courses. ) don't show you where to use this features, or how to use them effectively. The goal of this course is to help you understand why each feature of Typescript exists, and exactly where to use them.
Top companies are hungry for Typescript developers. Some of the largest web apps today are being built with Typescript. Employers are scrambling to find engineers who are fluent with this cutting edge system. Solid knowledge of Typescript will make you far more employable, by giving you a unique skill that few other engineers possess.
Planning on building your own apps? Using Typescript will help you structure your project correctly from day one, ensuring that you won't be crushed under technical debt at some critical stage of your company. In this course, you'll learn how to write reusable code, with a tremendous emphasis on leveraging classes and interfaces to make swappable 'widgets'. You will be able to reconfigure your apps on the fly to build wildly different features with only a minimum amount of effort
Learn from someone who has worked on one of the largest Typescript projects around. On professional projects of my own, I have developed plugins for an open-source, browser-based code editor called Theia. The Theia project is absolutely gargantuan in scale, encompassing hundreds of thousands of lines of code, all written in Typescript. This project works only thanks to the power of Typescript.
But don't just take my word for it - check out the reviews for this course. You'll see that other engineers, just like yourself, have had great success and acquired a new understanding of how to build scalable web applications.
There is just too much content in this course to summarize in a few short words, but here is a partial listing of the different skills you'll master:
Understand why Composition vs Inheritance is the most mis-understood topic in the Javascript community
Master the fundamental features of Typescript by working on real world projects
We'll build a custom front-end framework from scratch that you can use in place of React or Angular on your own personal projects
Comprehend the complex interplay between classes and interfaces, and why these two pieces of Typescript enable you to build incredibly reusable code
Dive deeper into Typescript with decorators, which we'll use to build a custom integration between Typescript and Express
Structure your React and Redux applications more confidently by understanding how to couple them with Typescript
Skip the documentation for third party libraries by fluently reading type definition files
Learn just how smart Typescript is by experiencing how deeply it analyzes your code for errors
I learned Typescript years ago by hard trial-and-error. Now you can learn at 5x the speed I did. This is the course that I wish I had when I first got started with Typescript.
Dive into the essentials of TypeScript, exploring its purpose as essentially JavaScript with added type annotations to manage a type system. Understand how TypeScript helps catch errors during development, operating only at the coding stage and has no effect on runtime performance. Learn about TypeScript's development workflow, error-checking capabilities, and how its type annotations, although not present in the compiled JavaScript, facilitate error detection before execution in browsers or Node.js.
Embark on setting up a TypeScript environment by installing the TypeScript compiler and TS Node globally through npm. Also, learn how to configure Visual Studio Code for optimal TypeScript development, including adding it to the path variable, installing Prettier for consistent formatting, configuring single quotes, setting indentation preferences, and selecting the Solarized Light theme.
Learn to create a simple TypeScript application that fetches data from an API and prints it to the terminal. Explore the typical TypeScript workflow and see how it helps catch bugs during code writing by intentionally introducing errors. Understand setting up a project directory, creating a package.json, and using Axios to make network requests.
Dive into the practical aspects of TypeScript by creating the first application, which is a simple program using index.ts to fetch and console log JSON data using the Axios library. Learn how to compile TypeScript into JavaScript with the TypeScript compiler (TSC) and execute the compiled code with Node.js. Additionally, discover how TS-node can streamline this process by combining compilation and execution into one step.
Explore string templating in TypeScript to enhance readability of console output. Learn to destructure properties from an object for cleaner code and prepare for the introduction of TypeScript's features to prevent common errors, such as undefined variables in console logs, and more effectively manage data types.
Explore the power of TypeScript to catch and fix errors during development, focusing on fixing variable misnaming issues by defining object structures with interfaces. Learn to annotate response objects to validate property names and data types, observe how type assertions provide immediate editor feedback, and correct bad property references without executing code.
Explore the benefits of TypeScript by refactoring a JavaScript function into a separate helper with type annotations. Learn how adding types to function arguments can prevent and identify common errors, such as incorrect argument order, before running the code. Experience the efficiency gains by catching these issues during development, saving time and avoiding runtime surprises.
Learn the structure of this comprehensive TypeScript course, which emphasizes understanding both the language's syntax and the design patterns essential for writing reusable code. Begin with foundational lectures on TypeScript's syntax and features to grasp the basics, then progress to hands-on projects to master applying design patterns effectively.
Delve into the essentials of basic types in TypeScript, beginning with a definition and understanding the significance of types as shortcuts to refer to properties and functions of values. Explore the concept through examples, leading to a practical discussion on the usage of types to neatly summarize complex properties and methods for convenience and clarity in code.
Explore the essence of TypeScript types, including strings, numbers, booleans, and custom object types, and why they're fundamental for code error analysis and clarity. Understand the distinction between primitive and object types and how TypeScript's type system helps maintain code accuracy and aids other developers in grasping the structure of the codebase.
Dive into TypeScript fundamentals by exploring how to work with types through simple code snippets. Learn how TypeScript's type system allows developers to reference properties and functions of values, utilizing autocompletion for efficient coding and catching errors for non-existent properties or methods on data objects and instances of classes.
Understand the pervasive nature of types within TypeScript, recognizing that every value in an application has an associated type, which TypeScript leverages to ensure code quality and error checking. Embrace the fundamental concept that types are ubiquitous in TypeScript development.
Explore the concepts of type annotations and type inference in TypeScript and their application to variables, functions, and objects. Delve into how these features determine the type of values a variable will refer to, the balance between manual typing and relying on TypeScript's automatic type determination, and gain insights into practical use cases for each approach.
Dive into understanding type annotations in TypeScript by exploring code examples that highlight how to correctly use them with variables. Learn how to organize and implement type annotations for different data types, including number, string, boolean, null, and undefined, as well as instances of classes and built-in objects like the Date. Recognize the importance of type annotations in maintaining type safety and discover common error messages that arise from type mismatches.
Uncover the intricacies of complex type annotations in TypeScript, focusing on arrays, classes, and object literals. Learn how to create type annotations for arrays of strings, numbers, or Booleans. Dive into class annotations in TypeScript to differentiate between a class type and an instance. Master the syntax for annotating object literals, ensuring properties match specified types.
Explore TypeScript's syntax for type annotations with arrays, classes, object literals, and functions. Learn the intricacies of annotating a function's arguments and return type, grasping the distinction between the function's annotation and its implementation. Dissect the nuances of a function's expected arguments and the void return type, enhancing understanding of TypeScript's type system.
Explore the mechanism behind TypeScript's type inference, learning how it determines variable types without explicit annotations when declaration and initialization occur simultaneously. Understand when to utilize type inference for cleaner code and when to manually annotate types to aid TypeScript, including the handling of the `any` type to avoid potential issues.
Discover the importance of Type Annotations in TypeScript, especially when dealing with the 'any' type, which inhibits TypeScript's error-checking capabilities. Learn through an example with the `JSON.parse` function, which returns 'any' type, and understand why specifying types explicitly is essential for maintaining a robust and error-resistant codebase.
Learn how to add type annotations to objects in TypeScript for properties with known types, using a practical example of annotating the 'coordinates' object derived from `JSON.parse`. This tactic addresses the issue of the `any` type and allows for more predictable and safer code by specifying property types like numbers.
Explore manual type annotation in TypeScript when variable declaration and initialization occur on separate lines. Discover why type inference fails in this scenario and learn to add type annotations to avoid the `any` type issue, illustrated through a practical example involving a for loop and a boolean variable.
Learn the intricacies of TypeScript type annotations for variables whose types can't be inferred. Explore the use of type annotations in typescript through a practical example involving variables with multiple potential types, such as a Boolean or a number, and discover the syntax and rationale behind using pipe '|' for union types.
Delve into the use of TypeScript's type annotations specifically for functions, including how to define argument types and return types. Examine a practical example by annotating a simple 'add' function, which takes two numbers as arguments and returns their sum, to ensure TypeScript accurately understands the function's input and output.
Explore how TypeScript type annotation enhances the reliability of functions by examining an 'add' function example. Learn the importance of specifying the argument types and the expected return type to prevent errors and understand why TypeScript does not ensure the logic within the function is correct. Gain insight into the distinction between mandatory annotations for arguments and optional, yet recommended, annotations for return types.
Explore alternative syntax for annotating TypeScript functions, focusing on functions declared with the 'function' keyword. Learn how to type arguments and return values for both named and anonymous functions assigned to variables, emphasizing consistent annotation practices for various function declarations.
Explore the usage of 'void' and 'never' return types in TypeScript functions. Delve into how 'void' indicates a function doesn't return a value, allowing for more accurate typing and error prevention. Learn the nuances of the 'never' type in functions that don't complete execution, providing clarity on functions designed to throw errors without returning.
Explore the finer nuances of using functions in TypeScript, such as object destructuring within function arguments complemented with type annotations. Learn how to extract properties directly in the parameters for cleaner code, emphasizing the separation of the destructuring syntax from the TypeScript type annotations for clarity and precision.
Explore advanced TypeScript concepts with objects, including object destructuring, nested objects, and method annotations. Discover how to annotate object structures and methods, use ES2015 syntax for defining object properties, and handle the intricacies of destructuring with type annotations for accurate type inference and code clarity.
Understand how TypeScript enhances JavaScript arrays by enforcing type consistency. Explore the use of type annotations and type inference for arrays, learn to initialize arrays with specific types, and delve into creating two-dimensional arrays. Examples include string arrays and arrays of objects, highlighting the necessity and methodology of using types in TypeScript for better coding practices.
Explore the intricacies of working with arrays in TypeScript, highlighting advantages such as automatic type inference when extracting values, which aids in maintaining type safety. Delve into how TypeScript prevents adding incompatible values into typed arrays, ensuring homogeneity, and discover how built-in functions like map, forEach, and reduce are enhanced with TypeScript's autocomplete features for more robust and error-free code.
Learn how to create typed arrays in TypeScript that can hold multiple data types, using the union type with the pipe operator to define an array capable of storing both Date objects and string literals. Gain insights into how specific type annotations can override type inference, ensuring arrays don't default to the 'any' type.
Unveil the nuances between using arrays and tuples in TypeScript to represent collections of records with similar types. Delve into the subtle differences that distinguish tuples from arrays, enabling a more precise representation of data structures.
Explore the concept and usage of tuples in TypeScript, learning how they differ from arrays by representing multiple properties of a single record through a fixed order of elements. Delve into practical examples demonstrating how tuples handle mixed data types to structure data more expressively than plain arrays.
Explore how to create and use tuples in TypeScript for type-safe data structures with consistent element ordering. Learn to transform arrays into tuples with type annotations and discover the power of type aliases for reusing tuple structures, exemplified through creating a drink tuple that represents specific properties of beverages.
Explore the nuances of using tuples in TypeScript, particularly for representing structured data like CSV files. Delve into the comparison between tuples and objects for data representation, emphasizing how key-value pairs in objects offer clearer semantics over tuple's ordered values, even though tuples are a prominent feature in TypeScript's official documentation.
Explore the fundamental concepts of interfaces in TypeScript to enable strong code reuse and robust application design. Delve into the definition and purpose of interfaces, which are used to create custom types that detail the properties and types an object must adhere to, setting the stage for powerful class-interface interplay.
Learn to define objects and functions with type annotations in TypeScript by creating an object representing a car and a function that operates on it. Understand the necessity of avoiding 'any' types and the benefits of using TypeScript type annotations for object properties, which serve as a precursor to the introduction of interfaces to streamline type management.
Explore the power of creating interfaces in TypeScript to prevent duplicate code. Learn to define a new type with the `interface` keyword, specify properties and types an object must have to conform, and streamline type annotations. Discover how TypeScript checks compliance with the interface, providing instant feedback on property names and types.
Explore the flexible syntax of TypeScript interfaces by learning how to define properties with complex types, such as Date objects, and how to require that an object implement a function, using the example of adding a `summary` method that returns a string to the `Vehicle` interface.
Explore advanced interface syntax in TypeScript by refactoring the 'print vehicle' function. Learn how to simplify interfaces based on actual usage requirements and witness a shift towards more abstract definitions, leading to renaming interfaces and functions for better code semantics and to reflect their broadened applicability beyond specific object types.
Explore the power of interfaces in TypeScript by creating reusable functions that work with various object types. This lesson demonstrates defining a reportable interface to describe different objects, such as a vehicle or a drink, with a common `summary` property. Learn how this approach promotes writing generic, versatile code that enhances reusability throughout applications.
Explore the use of interfaces in TypeScript as gatekeepers for function arguments to promote code reuse. This approach is highlighted through diagrams explaining how only the objects implementing a specified interface can be passed to certain functions, establishing a pattern of interface-oriented design that will be recurrent throughout the course.
Explore the fundamental concept of classes in TypeScript, understanding them as blueprints for creating objects with fields and methods. Learn how to define and instantiate classes, and how methods like drive and honk can be implemented and invoked on class instances. Delve into the syntax and use-cases of classes to prepare for the development of applications.
Delve into the inheritance system within TypeScript by exploring how to create subclass structures, like making a `Car` class that extends a `Vehicle` class. Learn how inherited methods can be overridden to provide different behavior in the subclass while maintaining the functionality of the parent or superclass.
Explore the distinction between ES2015 and TypeScript classes by diving into modifiers, vital keywords for controlling access to methods and properties. Discover how 'public', 'private', and 'protected' modifiers shape method accessibility within the same class, child classes, or anywhere in TypeScript code, with practical examples to solidify the concept.
Explore the management of data within TypeScript classes, including the declaration of properties with type annotations and their initialization. Learn how to use constructor functions for setting instance variable values and examine the efficiency of using access modifiers like `public` to streamline this process. Delve into how fields can also be marked as `private` or `protected` to control access within and outside the class hierarchy.
Explore the nuances of inheritance in TypeScript by examining how classes like 'Car' extend a 'Vehicle' base class. Learn to manage required constructor arguments, utilize the 'super' keyword for parent class constructors, and balance inherited fields with new properties without duplicating existing class features. This sets the foundation for class-based logic in TypeScript applications.
Explore the vital role of classes in TypeScript and their close relationship with interfaces. Understand how classes serve as a foundational tool for structuring TypeScript applications, each residing in separate files that communicate through interfaces. Upcoming sections will delve into practical applications, emphasizing class utilization and code reuse facilitated by interfaces.
Transitioning from TypeScript fundamentals to practical application, the focus shifts to building a web application that utilizes classes and interfaces for code reuse. Learn to leverage TypeScript features through the development of an application that generates and displays users and companies with locations on a Google map. Get started with Parcel Bundler to easily run TypeScript in the browser.
Explore the setup phase for a new TypeScript project using Parcel bundler: create an `index.html` file linking to an `index.ts` script, add a basic HTML structure, and initialize a source directory. Learn how Parcel compiles TypeScript into JavaScript and updates the browser script tag, all while setting up a local server to view the application.
Explore the foundational project structure for a TypeScript application by breaking down the code into single-class files. Learn about creating a cohesive and modular application with separate classes for user, company, and map, each in their own TypeScript files, and understand the convention of naming these files with capital letters to indicate class exports.
Explore the enhancement of the 'User' class by adding 'name' and 'location' properties, setting the foundation for attribute randomization. Delve into utilizing the 'Faker' library to generate dummy data, installing and importing it via NPM, while addressing TypeScript declaration file nuances.
Explore how to resolve TypeScript warnings when integrating JavaScript libraries lacking type declarations by installing type definition files. Understand the necessity of these files for TypeScript to perform type checking. The video explains the process of installing a type definition file from DefinitelyTyped, using the example of @types/faker for the Faker library.
Explore the use of type definition files in TypeScript to aid in understanding library interfaces, with a practical walkthrough of generating types for the Faker library. Learn how to navigate and interpret the file's contents, and how these definitions provide crucial documentation for utilizing library functions correctly, such as Faker's address module for latitude and longitude. Address common pitfalls in TypeScript, such as type mismatches and the proper initialization of class properties with types and values.
Delve into the essentials of using classes in TypeScript by learning how to export and import classes and variables across different files. Discover the distinctions between named exports with curly braces and default exports, their syntax, and best practices for maintaining clarity in code, such as avoiding default exports to minimize confusion.
Learn to define and initialize a 'company' class in TypeScript, using Faker to populate properties such as 'companyName', 'catchPhrase', and a 'location' object with 'latitude' and 'longitude'. This setup allows for the incorporation of company details, which can later be represented on a map. Explore how class properties are initialized and the distinction between declaring a property and assigning it a value.
Dive into adding Google Maps support to a TypeScript application. Learn how to set up a new Google Developer project, enable the Google Maps API, and securely integrate an API key. Discover the necessary steps to include the Google Maps SDK via script tags, a foundational setup for incorporating map functionality into web applications.
Learn how to resolve TypeScript's inability to recognize global variables by installing type definition files, like @types/Google Maps, for third-party JavaScript libraries. This will aid TypeScript in acknowledging the presence of the global 'Google' variable, permitting error-free usage of Google Maps in a TypeScript project.
Explore the utilization of TypeScript type definition files for understanding and interacting with the Google Maps library. Learn how to create map instances with TypeScript, including referencing HTML elements, and discover how to inspect properties like zoom and center within the Maps object to customize the map's display via the MapOptions interface.
Understand the importance of encapsulating functionality to enhance application robustness in TypeScript. Examine the structure of the index.ts file, discussing how to limit the surface area of classes like Company and User, and the proposal to create a CustomMap class to manage Google Maps integration and prevent misuse of its methods by other engineers.
Explore encapsulation in TypeScript by creating a 'CustomMap' class designed to isolate and control access to a Google Maps instance. Learn to limit the exposure of the Google Maps API, by implementing private class properties, and ensure a cleaner, simpler API surface for other engineers working with the codebase. Additionally, refactor 'CustomMap' to accept dynamic element IDs for map rendering, enhancing reusability.
Explore the initial steps towards enhancing a custom map class in TypeScript, focusing on not-so-ideal code practices for adding user and company markers. Learn how to annotate types and utilize classes both as types and values. Gain insights into the dual nature of TypeScript classes and prepare to refactor the code using interfaces to ensure a more maintainable approach.
Explore the process of enhancing the custom map class in TypeScript by adding an ad company marker method. Overcoming code duplication in methods for user and company markers is tackled by examining the potential utilization of interfaces to accept arguments with latitude and longitude, leading to more condensed and efficient code structure.
Consolidate functionality by refactoring the 'add user marker' and 'add company marker' methods into a single method in TypeScript, utilizing an or operator to handle both user and company instances. Delve into the implications of TypeScript's object property restrictions due to the or operator usage, leading to a realization of the current approach's limited scalability and tight coupling issues.
Explore a robust solution to the dependency management problem in TypeScript by implementing interfaces to decouple CustomMap from dependencies like User or Company. Learn how to create a Mappable interface with location properties to ensure any class can be added to CustomMap if it conforms to this interface, enhancing modularity and maintainability of the codebase.
Explore TypeScript's powerful type checking with a focus on the 'mappable' interface and its role in the custom map class, which now operates independently of specific types like user or company. Learn how TypeScript performs implicit checks to ensure objects conform to an interface without explicit type declarations, paving the way for reusable and maintainable code.
Discover how to enhance interactive features in a TypeScript-based application using Google Maps. Learn to implement an info window that displays upon clicking a marker, revealing relevant data associated with it. Explore creating and customizing info windows with content, and understand the use of type definition files for configuring options.
Enhance interactive Google Maps in a TypeScript project by assigning info window content to markers based on whether a user or a company is passed to the `addMarker` function. Learn to update the `Mappable` interface to require a `markerContent` method, ensuring both User and Company classes implement it to return HTML strings for display.
Explore advanced interface implementation in TypeScript by adding new properties and observing the resultant error messages to grasp TypeScript's error detection capabilities. Learn to improve error localization by exporting interfaces and using the `implements` keyword, enabling direct dependencies and clearer intentions, which guides developers to the true source of errors for prompt resolution.
Explore the significance of using private modifiers to limit API surface area in TypeScript, ensuring engineers only access and modify what's permitted. Learn about creating scalable code by applying interfaces to define dependencies, allowing classes to interact predictably without direct coupling. Grasp the pattern of declaring interfaces atop TypeScript files to guide interactions between classes for code reusability and low coupling, a pivotal practice that's reiterated throughout the course. Additionally, discover how optionally implementing interfaces can aid TypeScript in error identification and code clarity.
Dive into advanced TypeScript concepts by starting a new project that involves sorting various data structures, like arrays, strings, and linked lists, from smallest to largest elements. Explore how to create a versatile sorting algorithm using interfaces and classes that can apply effectively across different data types. Learn to implement and maximize code reuse for efficient algorithm design.
Dive into project setup tailored for Node.js instead of using Parcel and a web browser. Learn how to directly work with the TypeScript compiler, including creating and modifying a `tsconfig.json` to manage source (`src`) and build output (`build`) directories. Discover the efficiency of using the TypeScript compiler watch mode (`TSC -w`) to automatically recompile code during development.
Gain insights into creating an automated build and execution workflow in TypeScript with Node.js. Learn to utilize npm tools like nodemon and concurrently to streamline the process, allowing for immediate reflections of changes in the codebase. Discover how to configure package.json scripts to compile and execute TypeScript files efficiently.
Explore the basics of the bubble sort algorithm, a simple yet illustrative sorting method perfect for understanding code reusability. Learn how bubble sort employs a nested loop mechanism to organize data within an array through systematic comparisons and swaps, ensuring the largest elements gravitate to the end of the array with each iteration.
Explore the basics of bubble sort by developing a TypeScript class named `Sorter` designed to sort an array of numbers. Learn how to construct the Sorter class, define a constructor to initialize its collection property, and add a sort method with a void return type to organize the data. The focus is on setting up the foundational structure for sorting numerical arrays before extending to more complex data types.
Dive into the practical application of creating a bubble sort algorithm in TypeScript, focusing on the concept of class-based sorting. Learn about the benefits of destructuring and the TypeScript syntax for guaranteed type safety. Additionally, develop an understanding of nested loop construction and element swapping logic for effective sorting.
Explore how to adapt a sorting algorithm in TypeScript to handle not just arrays of numbers but also strings and potentially linked lists. Examine the immutability of strings in JavaScript and the limitations it imposes, highlighting specific areas like swapping logic and character comparison that require rethinking to accommodate different data structures.
Explore a common problem when designing a sorting algorithm that needs to work with arrays of numbers and strings in TypeScript. Learn about the complexities of addressing mutability in strings and dive into type annotations using the union operator. Delve into how TypeScript restricts property access and the implications for index assignment in the context of union types.
Explore the use of TypeScript's type guards to solve issues with union types when working with arrays, strings, and more complex data structures. Uncover how to implement conditional checks to clarify the types within a union and restore access to the full range of properties of each specific type, bypassing the limitation of only accessing common properties.
Delve into the limitations of using union types and type guards in TypeScript for sorting collections, by examining the inherent drawbacks of this approach. Learn why adding new collections to the sorter leads to inefficient code, emphasizing the need for refactoring towards a more scalable sorting solution. Explore how to address these challenges with better coding practices in the upcoming content.
Learn to refactor TypeScript code by extracting comparison and swapping logic into a helper function and a separate class. The video showcases the creation of a 'numbers collection' class to handle operations specific to arrays of numbers, setting the stage for introducing interfaces to develop a reusable sorter algorithm.
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.