w3docs logo
Anmelden

Understanding TypeScript

Don't limit the usage of TypeScript to Angular! Learn the basics, its features, workflows and how to use it!

Start
  1. Courses
  3. Understanding TypeScript

Most People know TypeScript from Angular 2+. It's the language you have to use there, right?

It's more than that!

Learn what TypeScript is, why it really is a powerful addition to JavaScript, what its features are and how to use it! And whilst doing so, also understand what you're actually doing in your Angular 2+ code.

This course takes you from the very basics and its most important feature (types!) to the point where you're able to use TypeScript in any of your projects. ReactJS projects included!

As TypeScript is developed by Microsoft and strongly advertised used by Angular 2+ (Google), it's here to stay.

Gain an edge today and be amongst the first to really understand TypeScript!

A Journey into the future

As TypeScript code can be compiled to ES5, you'll be amazed by the many next-gen features you can start using today. Be it ES6 Features like destructuring or arrow functions, decorators, generics and interfaces or modules - TypeScript has them all!

In this course, we'll not stop after the basics. You will learn about more advanced features and also how to set up workflows with TypeScript. This includes a TypeScript-only workflow as well as a Webpack workflow.

You'll also learn that you're not limited to Angular 2+ or plain JavaScript/ TypeScript projects. A complete module covers how to use TypeScript with ReactJS to benefit from its features, there, too.

Practice what you learn!

Watching videos is a great way to learn. And to a lot of students, it's the best way. If you also want to practice the things you learn, this course offers you exercises (and solutions) in many of the course modules.

What you get!

I'm not a fan of these courses which teach you the basics and then leave you alone. In this course you'll get insights into:

  • Types and how to use them
  • How the TypeScript compiler works
  • ES6 features in TypeScript
  • Classes in TypeScript
  • Namespaces and modules
  • Interfaces
  • Generics
  • Decorators
  • How to integrate third-party JavaScript libraries into your TypeScript project
  • How to set up a TypeScript project with webpack
  • Or how to set up a plain-TypeScript workflow
  • How to use TypeScript together with ReactJS
  • How to use TypeScript together with Node/ Express
  • Real projects and use-cases!

Section: Getting Started

1. Welcome to the Course! (1:55)
2. What Is TypeScript & Why Should You Use It? (4:33)
3. Join our Online Learning Community (1:00)
4. Installing & Using TypeScript (13:22)
5. TypeScript Advantages - Overview (3:05)
6. Course Outline (4:17)
7. Setting Up A Code Editor / IDE (3:06)
8. The Course Project Setup (7:20)

Section: TypeScript Basics & Basic Types

9. Module Introduction (0:26)
10. Using Types (10:20)
11. TypeScript Types vs JavaScript Types (4:53)
12. Working with Numbers, Strings & Booleans (5:43)
13. Type Assignment & Type Inference (5:38)
14. Quiz: Understanding Types (1:00)
15. Object Types (7:32)
16. Arrays Types (5:29)
17. Working with Tuples (6:19)
18. Working with Enums (7:05)
19. The "any" Type (2:04)
20. Union Types (6:30)
21. Literal Types (7:54)
22. Type Aliases / Custom Types (2:59)
23. Quiz: Core Types & Concepts (1:00)
24. Function Return Types & "void" (7:25)
25. Functions as Types (5:34)
26. Function Types & Callbacks (4:23)
27. Quiz: Functions & Types (1:00)
28. The "unknown" Type (3:43)
29. The "never" Type (4:10)
30. Wrap Up (1:51)
31. Useful Resources & Links (1:00)

Section: The TypeScript Compiler (and its Configuration)

32. Module Introduction (0:46)
33. Using "Watch Mode" (2:05)
34. Compiling the Entire Project / Multiple Files (3:46)
35. Including & Excluding Files (6:13)
36. Setting a Compilation Target (4:04)
37. Understanding TypeScript Core Libs (5:31)
38. More Configuration & Compilation Options (1:41)
39. Working with Source Maps (1:59)
40. rootDir and outDir (5:31)
41. Stop Emitting Files on Compilation Errors (2:51)
42. Strict Compilation (11:04)
43. Code Quality Options (4:22)
44. Debugging with Visual Studio Code (4:20)
45. Wrap Up (1:08)
46. Useful Resources & Links (1:00)

Section: Next-generation JavaScript & TypeScript

47. Module Introduction (2:21)
48. "let" and "const" (6:33)
49. Arrow Functions (4:50)
50. Default Function Parameters (2:09)
51. The Spread Operator (...) (4:32)
52. Rest Parameters (5:04)
53. Array & Object Destructuring (5:17)
54. How Code Gets Compiled & Wrap Up (1:37)
55. Useful Resources & Links (1:00)

Section: Classes & Interfaces

56. Module Introduction (0:54)
57. What are Classes? (4:48)
58. Creating a First Class (5:52)
59. Compiling to JavaScript (3:02)
60. Constructor Functions & The "this" Keyword (7:35)
61. "private" and "public" Access Modifiers (5:52)
62. Shorthand Initialization (2:57)
63. "readonly" Properties (2:45)
64. Quiz: Class Basics (1:00)
65. Inheritance (8:07)
66. Overriding Properties & The "protected" Modifier (2:43)
67. Getters & Setters (6:42)
68. Static Methods & Properties (5:08)
69. Abstract Classes (5:25)
70. Singletons & Private Constructors (5:07)
71. Classes - A Summary (1:43)
72. Quiz: Classes (1:00)
73. A First Interface (4:26)
74. Using Interfaces with Classes (6:10)
75. Why Interfaces? (1:34)
76. Readonly Interface Properties (1:35)
77. Extending Interfaces (2:34)
78. Interfaces as Function Types (2:41)
79. Optional Parameters & Properties (4:11)
80. Compiling Interfaces to JavaScript (1:58)
81. Quiz: Interfaces (1:00)
82. Wrap Up (1:54)
83. Useful Resources & Links (1:00)

Section: Advanced Types

84. Module Introduction (0:58)
85. Intersection Types (4:58)
86. More on Type Guards (10:34)
87. Discriminated Unions (6:11)
88. Type Casting (7:45)
89. Index Properties (6:35)
90. Function Overloads (6:18)
91. Optional Chaining (4:21)
92. Nullish Coalescing (2:44)
93. Quiz: Advanced Types (1:00)
94. Wrap Up (1:20)
95. Useful Resources & Links (1:00)

Section: Generics

96. Module Introduction (1:04)
97. Built-in Generics & What are Generics? (8:44)
98. Creating a Generic Function (8:33)
99. Working with Constraints (3:39)
100. Another Generic Function (5:35)
101. The "keyof" Constraint (3:06)
102. Generic Classes (8:54)
103. A First Summary (1:22)
104. Generic Utility Types (7:19)
105. Generic Types vs Union Types (3:41)
106. Quiz: Generics (1:00)
107. Useful Resources & Links (1:00)

Section: Decorators

108. Module Introduction (1:34)
109. A First Class Decorator (5:21)
110. Working with Decorator Factories (2:02)
111. Building More Useful Decorators (5:59)
112. Adding Multiple Decorators (2:52)
113. Diving into Property Decorators (5:00)
114. Accessor & Parameter Decorators (5:36)
115. When Do Decorators Execute? (3:11)
116. Returning (and changing) a Class in a Class Decorator (8:37)
117. Other Decorator Return Types (3:44)
118. Example: Creating an "Autobind" Decorator (9:04)
119. Validation with Decorators - First Steps (7:28)
120. Validation with Decorators - Finished (12:14)
121. Wrap Up (3:21)
122. Fixing a Bug (1:00)
123. Useful Resources & Links (1:00)

Section: Practice Time! Let's build a Drag & Drop Project

124. Module Introduction (0:54)
125. Getting Started (5:20)
126. DOM Element Selection & OOP Rendering (11:43)
127. Interacting with DOM Elements (8:03)
128. Creating & Using an "Autobind" Decorator (4:44)
129. Fetching User Input (9:14)
130. Creating a Re-Usable Validation Functionality (14:10)
131. Rendering Project Lists (11:18)
132. Managing Application State with Singletons (15:32)
133. More Classes & Custom Types (7:11)
134. Filtering Projects with Enums (5:59)
135. Adding Inheritance & Generics (18:40)
136. Rendering Project Items with a Class (11:58)
137. Using a Getter (3:33)
138. Utilizing Interfaces to Implement Drag & Drop (10:24)
139. Drag Events & Reflecting the Current State in the UI (5:58)
140. Adding a Droppable Area (8:08)
141. Finishing Drag & Drop (6:44)
142. Wrap Up (1:22)
143. Useful Resources & Links (1:00)

Section: Modules & Namespaces

144. Module Introduction (1:11)
145. Writing Module Code - Your Options (3:50)
146. Working with Namespaces (10:50)
147. Organizing Files & Folders (8:41)
148. A Problem with Namespace Imports (2:52)
149. Using ES Modules (12:20)
150. Understanding various Import & Export Syntaxes (4:57)
151. How Does Code In Modules Execute? (1:43)
152. Wrap Up (3:14)
153. Useful Resources & Links (1:00)

Section: Using Webpack with TypeScript

154. Module Introduction (1:01)
155. What is Webpack & Why do we need it? (5:32)
156. Installing Webpack & Important Dependencies (3:55)
157. Adding Entry & Output Configuration (5:57)
158. Adding TypeScript Support with the ts-loader Package (7:00)
159. Finishing the Setup & Adding webpack-dev-server (3:33)
160. Adding a Production Workflow (4:04)
161. Wrap Up (1:40)
162. Useful Resources & Links (1:00)

Section: 3rd Party Libraries & TypeScript

163. Module Introduction (1:18)
164. Using JavaScript (!) Libraries with TypeScript (9:01)
165. Using "declare" as a "Last Resort" (2:25)
166. No Types Needed: class-transformer (8:28)
167. TypeScript-embracing: class-validator (6:16)
168. Wrap Up (1:57)
169. Useful Resources & Links (1:00)

Section: Time to Practice! Let's build a "Select & Share a Place" App (incl. Google Maps)

170. Module Introduction (0:30)
171. Project Setup (3:56)
172. Getting User Input (2:41)
173. Setting Up a Google API Key (2:48)
174. Using Axios to Fetch Coordinates for an Entered Address (10:14)
175. Rendering a Map with Google Maps (incl. Types!) (6:35)
176. Useful Resources & Links (1:00)

Section: React.js & TypeScript

177. Module Introduction (1:04)
178. Setting Up a React + TypeScript Project (5:21)
179. How Do React + TypeScript Work Together? (3:46)
180. Working with Props and Types for Props (6:58)
181. Getting User Input with "refs" (7:03)
182. Cross-Component Communication (3:58)
183. Working with State & Types (4:28)
184. Managing State Better (1:33)
185. More Props & State Work (4:09)
186. Adding Styling (1:01)
187. Types for other React Features (e.g. Redux or Routing) (4:00)
188. Wrap Up (1:34)
189. Useful Resources & Links (1:00)

Section: Node.js + Express & TypeScript

190. Module Introduction (1:23)
191. Executing TypeScript Code with Node.js (3:33)
192. Setting up a Project (4:06)
193. Finished Setup & Working with Types (in Node + Express Apps) (5:17)
194. Adding Middleware & Types (5:45)
195. Working with Controllers & Parsing Request Bodies (9:53)
196. More CRUD Operations (10:20)
197. Wrap Up (2:11)
198. Useful Resources & Links (1:00)

Section: Course Roundup

199. Roundup & Next Steps (3:04)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.