Build Your Own Blog Portfolio with Web Components: TypeScript

Part 4 — Build Web Components using TypeScript and Webpack

As developers, we all know that we should reuse code as much as possible. Duplicated code is one of the leading causes of software bugs, and it is essential to avoid it. Web Components help us to create reusable markup structures with encapsulated functionality.

This series of articles will teach the fundamentals and advanced features of Web Components by applying them to an example. We will develop step by step a portfolio to showcase medium articles of any medium user.

1. Build Your Own Blog Portfolio with Web Components: The Basics
2. Build Your Own Blog Portfolio with Web Components: Data Flow (Attributes, Props, Callbacks)
3. Build Your Own Blog Portfolio with Web Components: Webpack
4. Build Your Own Blog Portfolio with Web Components: TypeScript
5. Build Your Own Blog Portfolio with Web Components: Lit Library

Short Introduction

In the first article, we have learned about the three main technologies of Web Components: Custom Elements, Shadow DOM, and HTML Templates. We applied those concepts to implement our application in the second…