Full-Stack Web Development with TypeScript 5 E-Book

Mykyta Chernenko

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 303

Veröffentlichungsjahr: 2024

Beschreibung

This book takes you on a journey with TypeScript 5, introducing its nuances and advantages over traditional JavaScript, explaining TypeScript basics, and highlighting the syntax, typing, generics, classes, and interfaces. Expert advice will help you build your understanding of TypeScript's role in modern web applications.
You'll gain hands-on experience with the tools required to write full-stack web applications end to end, beginning with setting up the Bun environment for backend development. This book also explores server-side functionality such as authentication, routing, and database integration with PostgreSQL. The second part of the book focuses on the integration of the OpenAI API, demonstrating the use of the GPT API for different use cases. The final part covers frontend development using Svelte, guiding you through UI design, state management, and performance optimization. Each chapter has real-world examples and comparisons to other technologies, providing you with a comprehensive understanding of full-stack development.
By the end of this book, you'll have learned how to build modern web applications using TypeScript 5 and confidently tackle full-stack development challenges.

Leseprobe

Full-Stack Web Development with TypeScript 5

Craft modern full-stack projects with Bun, PostgreSQL, Svelte, TypeScript, and OpenAI

Mykyta Chernenko

Full-Stack Web Development with TypeScript 5

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

The author acknowledges the use of cutting-edge AI, such as ChatGPT, with the sole aim of enhancing the language and clarity within the book, thereby ensuring a smooth reading experience for readers. It’s important to note that the content itself has been crafted by the author and edited by a professional publishing team.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Kaustubh Manglurkar

Publishing Product Manager: Bhavya Rao

Book Project Manager: Sonam Pandey

Senior Editor: Rashi Dubey

Technical Editor: K Bimala Singha

Copy Editor: Safis Editing

Indexer: Subalakshmi Govindhan

Production Designer: Vijay Kamble

DevRel Marketing Coordinator: Nivedita Pandey and Anamika Singh

First published: August 2024

Production reference: 1020724

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83588-558-1

www.packtpub.com

To my parents, Iryna and Vadym Chernenko; my aunt, Oksana Pidvalna; and my grandparents, Vira and Vasyl Pivdalni, for dedicating everything they could to help me reach where I am now, providing motivation and believing in me. To my wife, Yuliia, for her constant support, encouragement, and tremendous love throughout our life-long journey.

– Mykyta Chernenko

Foreword

In the ever-evolving landscape of web development, mastering the latest technologies and integrating them seamlessly into full-stack projects is not just an advantage; it’s a necessity. Having worked alongside Mykyta Chernenko in various capacities—from frontline coding at Quantum to collaborating on a startup idea—I have witnessed firsthand his deep technical expertise and innovative approach to problem-solving in the tech world.

Full-Stack Web Development with TypeScript 5 is Mykyta’s latest endeavor to empower full-stack developers by sharing his wealth of knowledge. This book is a beacon for junior and mid-level software engineers who are eager to dive deep into the intricacies of modern web development using an array of cutting-edge tools including TypeScript, Bun, PostgreSQL, Svelte, and the pioneering OpenAI API.

What sets this book apart is not just its comprehensive coverage of both frontend and backend technologies but its practical, project-based approach. Through Mykyta’s guidance, you will not only learn the theoretical aspects of each technology but also aspects of how to apply some of them in real-world scenarios, crafting robust and scalable web applications. The journey from understanding basic concepts to integrating AI features is laid out with clarity and precision, ensuring that every reader comes away with the ability to navigate and innovate within the tech industry.

As someone who has seen Mykyta’s meticulous approach to both writing and coding, I am confident that this book will serve as a great resource for those looking to make advancements in their careers. Whether it’s leveraging TypeScript’s capabilities to enhance application reliability or integrating AI to create dynamic user experiences, readers will find Full-Stack Web Development with TypeScript 5 an invaluable guide to becoming well-rounded, forward-thinking developers capable of tackling challenges for real business use cases.

Embark on this learning journey with Mykyta, and equip yourself with the knowledge to not just participate in the future of tech but to shape it.

Artem Korchunov

Senior Software Engineer, Pillsorted

Contributors

About the author

Mykyta Chernenko has over seven years of experience in technology, mainly in full-stack development with a focus on Python and TypeScript. He has also worked with Go, Kotlin, and Dart on various projects. His technical contributions include working on the Azure integration for Nutanix’s cluster discovery project and a key engineering role at Factmata, overseeing engineering and infrastructure. Currently, he holds a position as a senior consultant at KodeWorks. In addition to his technical work, Mykyta has mentored over 20 professionals, sharing his knowledge and experience. He is also the author of The Rational Software Engineer and runs a blog with the same name on Hackernoon, where he writes about his insights in the field.

A big thank you to my best friend, Artem, for working closely with me, offering valuable feedback, and always being there both as a friend and a technical reviewer. I also want to express my gratitude to everyone at Packt Publishing for their professionalism and for making the publishing process seamless and positive. Your efforts have truly shaped this book.

About the reviewers

Kawtar Choubari is a software engineer specializing in JavaScript, TypeScript, React, and Next.js. She has been featured at Next.js Conf (2023) and React Conf (2024) with other community members and has spoken at major conferences, such as React Paris and Devoxx; she is passionate about sharing knowledge and making complex topics accessible.

Also, Kawtar mentors students, guiding their tech careers, creates tech videos part-time, and shares her conference insights in a vlog format on her YouTube channel (under her name). Dedicated to educating, she conducts workshops and actively engages on social media platforms, sharing her expertise and extending her impact with the tech community.

Kawtar’s work is encapsulated by these three words: engineering, educating, entertaining.

Artem Korchunov is a product software engineer at Pillsorted, UK, where he blends a strong team-oriented approach with the ability to independently drive projects from inception to completion. Known for his project management and technical expertise in Terraform, AWS, .NET, and Node.js, Artem skillfully manages both the technical and business aspects of his work.

I am grateful to the team at Pillsorted for their support and the rich, collaborative experiences that drive mutual growth and innovation.

Joao Rodrigues is a senior typescript engineer at Acrontum Portugal.

Table of Contents

Preface

Part 1: Introduction to TypeScript

1

TypeScript Fundamentals

Technical requirements

Introduction to TypeScript and its evolution

Key differences between TypeScript and JavaScript

The advantages of using TypeScript in modern web development

Basic syntax of TypeScript

Simple types

Interfaces

Summary

2

TypeScript Deep Dive – Typing, Generics, Classes, and Interfaces

Technical requirements

Advanced typing techniques

Narrowing

null types

Function types

Creating types from other types

Utility types

Union types

Type intersections

Interface and OOP features

Interfaces

OOP functionalities

Generics

Promises

Summary

Part 2: Backend Development with Bun and TypeScript

3

Configuring a Backend Environment with Bun and Hono

Technical requirements

Introducing Bun

Introducing Hono

Setting up the project

Adding linting and formatting

Adding middleware

Handling environment variables

Discussing the project structure

Summary

4

Building Backend Infrastructure with Bun, Hono, and TypeScript

Technical requirements

Implementing in-memory storage

Defining the interfaces

Creating database and API types

In-memory implementation of the interfaces

Implementing authentication and authorization

Developing the authentication middleware

Defining our controllers

Implementing chat controllers

Implementing the endpoints

Combining the endpoints

Using the index file for calling the function

Summary

5

Improving Reliability – Testing and Validation

Technical requirements

Writing validation with Zod

Adding validation to our authentication endpoints

Adding validation to our chat endpoints

Developing tests with Bun

Writing tests with Bun’s test runner

Writing tests for our authentication endpoints

Writing test for our chat endpoints

Summary

6

Advanced Backend Development – Security, Throttling, Caching, and Logging

Technical requirements

Managing security aspects

Adding request throttling

Writing the middleware

Implementing the middleware

Including the middleware in the main app

Managing the cache

Writing the cache middleware

Using the cache middleware in our chat endpoints

Using logging

Creating our logger’s configuration

Adding logger to our caching middleware

Summary

Part 3: Integrating PostgreSQL for Data Management

7

PostgreSQL Basics, Storage, and Setup

Technical requirements

Setting up PostgreSQL in Docker

What are Docker and Docker Compose?

What is PostgreSQL?

Creating a database as a Docker container

Constructing the database schema

Defining the database schema

Creating the database schema

Writing CRUD SQL operations

Summary

8

Interacting with PostgreSQL Using Libraries

Technical requirements

Integrating SQL implementation in the codebase

Writing a class

Updating a user

Incorporating SQL implementation into the main function

Replacing in-memory data storage with a SQL-based solution

Testing our SQL integrations to ensure reliability

Summary

9

Interacting with PostgreSQL Using Prisma ORM

Technical requirements

Introduction to ORMs and Prisma

Introducing Prisma – our ORM of choice

Understanding Prisma Migrate

Handling migrations using Prisma

Defining the database schema

Applying the migration to our database

Interacting with the database using Prisma

Defining the Prisma Client class

Integrating ORM into the main function

Testing our ORM integration

Summary

Part 4: AI Integration with OpenAI API

10

Basics of Integrating External APIs with TypeScript and Hono

Technical requirements

Introduction to API integration in TypeScript using fetch

Handling errors and retries

Validating API correctness

Summary

11

Setting Up and Configuring the OpenAI API for the Backend

Technical requirements

Introduction to LLMs and their applications

Setting up OpenAI API integration

Integrating the OpenAI API into our backend

Summary

Part 5: Frontend Development with Svelte

12

Introduction to Svelte for Frontend Development

Technical requirements

What is Svelte?

History of Svelte

Differentiation from other frameworks

Learning Svelte fundamentals

Component composition structure

Introduction to .svelte file structure

Reactivity

Events

Bindings

Handling conditionals and iterating arrays

Props

Lifecycle

Stores

Summary

13

Setting Up the Svelte Project

Technical requirements

Discussing Vite and SvelteKit

Setting up the project

Exploring the project structure

Vite configuration file

TypeScript configuration file

Svelte configuration file

Configuring package.json

HTML entry point

Main file

Application title

Summary

14

Svelte Chat Application Development

Technical requirements

Writing routes for our application

Handling authentication logic

Defining the authentication store

Implementing Login component

Implementing Register component

Developing chat logic

Creating a parent component

Implementing the Header component

Creating the Chat component

Introducing styling

Writing application-wide styling

Styling for our Login and Register components

Styling our header component

Styling the chat container

Styling for the chat list

Styling our chat popup creation component

Styling for specific chats

Summary

15

Advanced Svelte Techniques

Technical requirements

Configuring formatting and linting

ESLint config file

Prettier file

Exploring a11y

The importance of accessibility

Accessibility rules and best practices in Svelte

Fixing accessibility issues in our project

Setting up i18n

Introducing testing

Configuring the Vite file

Exploring our setup file

Writing a test for our component

Further reading

Summary

Index

Other Books You May Enjoy

Part 1: Introduction to TypeScript

In this part, you will dive into the world of TypeScript, understanding its core principles and advanced features. This section sets a strong foundation in TypeScript, highlighting its evolution from JavaScript and demonstrating its power in enhancing code quality and maintainability for large-scale applications. You’ll learn the basics as well as more complex concepts, such as generics and object-oriented programming, that are essential for robust web development.

This part includes the following chapters:

Chapter 1, TypeScript FundamentalsChapter 2, TypeScript Deep Dive – Typing, Generics, Classes, and Interfaces

2

TypeScript Deep Dive – Typing, Generics, Classes, and Interfaces

We covered the very basics of TypeScript in Chapter 1