20+ Typescript Resources for Web Developers in 2021

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Today, you can't do anything in JavaScript without bumping into a CLI. 

Want to install a library? `yarn` add it. 
Want a React app? `create-react-app`. 
Want to format your JavaScript? `prettier --write`. 
Want your types checked? `tsc`. 
Bundling? Pick from `webpack`, `rollup`, or `parcel`. 
Deploying? `now` or `netlify deploy`. 

CLI's are everywhere, and even if you don't write them, sooner or later you'll have to debug them.

This workshop serves as a comprehensive survey of the state of the art of CLI tooling for everyone looking to make an impact in open source, across their company, and even in their own productivity.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-custom-cli-tooling-with-oclif-typescript-notes).

Build Custom Command Line Interface (CLI) Tooling with oclif and TypeScript

This course explores some of the new advanced TypeScript features, using practical examples you might encounter in your projects.


We’ll start off by demonstrating two new features that improve readability (numeric separators) and tighten type strictness in classes (strict property initialization). We’ll then improve type guards with a practical Redux-inspired example, followed by a lesson about writing more readable mapped type modifiers. We’ll use a summary on types vs. interfaces to transition to self-referencing types examples (and how to build custom type safe iterators around them). We’ll then cover a few ways to use the new conditional types, including building a recursive generic type that transforms any other type you pass into it, regardless of how deep it is, and makes it read-only — great for your immutable states! 


Finally, we’ll end with a lesson on building and chaining decorators to initialize and augment properties in classes.

Practical Advanced TypeScript

The first question you ask after installing TypeScript is "What do I do now?" In this course you'll learn about using the TypeScript compiler, configuring your project, definition files, and all the ins-and-outs of understanding how to use TypeScript in your project.

Up and Running with TypeScript


This course explores the capabilities of TypeScript’s type system and shows how to use advanced static types in practice. For example, you’ll learn how to write safer code by using non-nullable types and being explicit about `null` and `undefined` in the type system. 

You’ll also see how the compiler analyzes control flow to determine the most specific type for a variable at any given location.

In addition to that, you’ll learn about the `readonly` modifier and the special `object` and `never` types. This course also inspects string enums, literal types, discriminated unions, and static types for the rest and spread operators. 

Finally, you’ll see how to type dynamic property access using the `keyof` operator and how to create new types by applying transformation functions to existing ones.

Advanced Static Types in TypeScript

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Developing logic-rich applications is a key skill to have.

The TypeScript–React combination helps you unlock that skill, and it’s a great developer experience in terms of writing understandable and refactorable HTML. But the default state management for React has a long way to go to feel simple and maintainable — and that’s where MobX makes your life so much easier. MobX keeps things simple without using complicated setups like `provider` and `connect` that provide way too little value for all the mental overhead. 

In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications. You’ll learn:

- that you don't need advanced annotations and TypeScript features to use MobX
- how to easily refactor code through TypeScript
- how to use TypeScript to track the flow of state as properties change

Develop React Applications with Mobx and TypeScript

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In [Use TypeScript to Develop Vue.js Web Applications](https://egghead.io/courses/use-typescript-to-develop-vue-js-web-applications) we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

Vue.js State Management with Vuex and TypeScript

Algorithms are the basic construction of the computer programs that you are writing every day. They take language syntax and the machine uses that information to carry out our commands. While "everything is an algorithm!" is basically a true statement, we also have quite a bit of thought and effort put into defining formal algorithms. Understanding these formal algorithms helps you as a developer so that you won't need to re-invent the wheel every time you sit down to solve a problem.

They also come up quite a bit as "whiteboard problems" in programming job interviews, so understanding algorithms is a big win for you as a coder.

You will review many common algorithms using [TypeScript](/q/typescript) as the language. Even if you don't prefer TypeScript, they will easily translate into [JavaScript](/q/javascript) or practically any other language

Build Algorithms using Typescript

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

Use TypeScript to Develop Vue.js Web Applications

Mastering asynchronous code execution is fundamental to becoming a great TypeScript developer. You will learn how [TypeScript](/q/typescript) enables you to write asynchronous code with complete type safety and great runtime support thanks to TypeScript’s understanding of the async / await pattern.

You will learn concepts like Promises, generators and how they enable the runtime environment to allow authoring asynchronous code just as beautifully as synchronous code.

Async/Await using TypeScript

Cascading Style Sheets bring order and beauty to our applications.

Having your CSS co-located with your UI code provides the same sort of advantages in refactor ability and maintainability that React provides for the DOM using JSX. TypeStyle allows you to do that with the additional safety of TypeScript.

In this course we will cover core CSS concepts like CSS Properties, media queries, keyframes, pseduo-states and show how they can be represented in your JavaScript code using TypeStyle. 

Maintainable CSS using TypeStyle

React provides are a powerful paradigm for creating UI applications with JavaScript. TypeScript can greatly increase the maintainability of React applications by opening up syntax for self-documenting code.

In this course, we will cover how to set up a React application with TypeScript and use TypeScript for React applications


Use TypeScript to develop React Applications

TypeScripts purpose, the reason it exists, is to add a solid type system on top of ECMAScript 6+. JavaScript is a dynamically typed language. TypeScript applies a fundamental change to the language and applies static typing to the code in our applications.

This course will dive into the type system that TypeScript provides. You will gain a deeper understanding of what types can do for your applications. 

Use Types Effectively in TypeScript

In this course, we will learn how to set up all the necessary infrastructure to build a Design System of reusable React components, with state of the art developer experience afforded by Typescript and Storybook. 

A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. Design Systems can be a significant productivity multiplier in any medium-to-large project or company because you can document your components as you develop them, ensure a consistent look and feel throughout all your screens, and have a seamless workflow between designers and developers.


Design Systems with React and Typescript in Storybook

In this series of lessons, we will learn to use some of the tips and tricks that can help you write better TypeScript. We will have a look at some of the utility types, understand how the immutable types work, learn how to use conditional types, go through some of the examples and see how we can write them better and so on.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

TypeScript: Tips and Tricks

Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins.
You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

Using a plugin you can:

* Load Real Data from your server and visualize it 
* Change elements in your design programmatically 
* Convert your design to JSX or HTML, the sky is the limit

Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want





Create a Figma Plugin Using Typescript

Learn some of the new features of TypeScript 3.7

TypeScript 3.7 Videos

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

Next.js is a minimalistic framework for server-rendered React applications.

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Typescript

The anagram test is commonly used to demonstrate how an naive implementation can perform significant order of magnitudes slower than an efficient one. We’ll also briefly go over why each implementation is not as efficient as you could make it. 

A word is an anagram of another if you can rearrange its characters to produce the second word. Here we’ll write multiple increasingly more efficient functions that given two strings determines if they are anagrams of each other.

Determine if two strings are an anagram

A common interview question is to write  a function that converts  a  string into an integer e.g. `"123"` => `123`.  This  function  is commonly  called  `atoi` because  we  are  converting  an  ASCII  string  into  an  integer.

In this lesson we cover the proper way to do this in JavaScript which is `parseInt` along with implementing it using basic ascii math.

Topics

Instructors

Content Type