Chapter 1 Introduction

1.1 History of Web Development
1.2 Limitations of Web JavaScript

2-sheet type

2.1 What is Type
2.2 TypeScript's type system
2.3 Primitive Types
2.4 Object Types

Chapter 3 Advanced Type

3.1 TypeScript's unique type system
3.2 Type combination
3.3 How to use generics

Chapter 4: Expanding and Narrowing Types

4.1 Extending the Type
4.2 Narrowing the Type - Type Guard
4.3 Narrowing the Type - Identifying Unions
4.4 Maintaining Accurate Type Branching with Exhaustiveness Checking

Chapter 5: Using Types

5.1 Conditional Types
5.2 Using Template Literal Types
5.3 Using Custom Utility Types
5.4 Using it as an immutable object type
5.5 Improving Record Primitive Type Keys

Chapter 6: Compiling TypeScript

6.1 JavaScript Runtime and TypeScript Compilation
6.2 TypeScript Compiler Behavior
6.3 Structure of the TypeScript Compiler

Chapter 7 Asynchronous Calls

7.1 API Requests
7.2 Managing API State
7.3 API Error Handling
7.4 API Mocking

Chapter 8 From JSX to TSX

8.1 Types of React Components
8.2 Creating React Components with TypeScript
8.3 Summary

Chapter 9 Hook

9.1 React Hooks
9.2 Custom Hooks

Chapter 10 State Management

10.1 State Management
10.2 State Management Library

Chapter 11 CSS-in-JS

11.1 What is CSS-in-JS?
11.2 Avoiding Duplicate Type Declarations in Styled-Components Using Utility Functions

Chapter 12: TypeScript Project Management

12.1 Using Ambient Types
12.2 Using scripts and configuration files
12.3 TypeScript Migration
12.4 Monorepo

Chapter 13 TypeScript and Object Orientation

13.1 Object Orientation in TypeScript
13.2 How to Use the Elegant Brothers
13.3 Encapsulation and Abstraction
13.4 Summary

What technology stack does the front-end developer at Elegant Brothers use?

Woowahan Brothers used JavaScript and its own web framework, WoowahanJS, as its official web front-end technology stack.
However, as the service grew into a large-scale web application, existing technologies were unable to meet rapidly changing business needs.
Due to difficulties in changing and maintaining various functions due to limitations of JavaScript, such as the difficulty in understanding the interface, Woowa Brothers adopted React-based TypeScript as the standard technology stack for the web front-end.


Why TypeScript?

TypeScript is an extension language that is 100% compatible with JavaScript and supports static typing to ensure stability.
It also provides an object-oriented programming environment, which is very helpful when developing complex applications.
Because of these various advantages, introducing TypeScript + React not only improves performance and stability, but also makes maintenance easier.


Hands-on TypeScript + React Guide from the Elegant Brothers

This book introduces the use of TypeScript and React based on the development case of Baedal Minjok by Woowa Brothers.
By learning the basic grammar and characteristics of TypeScript and examining how to use TypeScript in React, you can learn how to apply both technologies in practice.


Why should I learn TypeScript?

There are many reasons why you should learn TypeScript.
- Error prevention: Since types are checked during the compilation phase, errors that may occur during the execution phase can be discovered and corrected in advance.
- Improved code readability and maintainability: By explicitly specifying types, you can clearly express the meaning of the code and increase the reusability and maintainability of the code.
- Improved collaboration efficiency: Types can improve collaboration efficiency because they clearly convey the intent of the code.
- Compatible with JavaScript: TypeScript is 100% compatible with JavaScript, so you can use TypeScript anywhere JavaScript is used.

These features are why many development organizations are using TypeScript.
It is considered one of the skills that will help you become a better developer, so it is a good idea for front-end developers to learn it.

Target audience for this book

This course is for junior front-end developers who have experience with TypeScript or JavaScript but want to learn TypeScript from the basics in depth.
This book introduces the basic concepts and features of TypeScript and explains how to utilize TypeScript and React in practice based on examples of usage by Woowa Brothers.

Knowledge you need to know before reading this book

If you have any experience learning the basics of HTML, CSS, and JavaScript, you can read this book with ease.
You should also have basic knowledge of React, as it covers how to use TypeScript in React.

Structure of this book

Chapter 1 Introduction: We will briefly look at the history and limitations of JavaScript and examine the background that led to the emergence of TypeScript.
Chapter 2 Types: We will look at the types provided by TypeScript for static typing.
We'll look at what types are, how they work in other languages, and how to use types in TypeScript.
Chapter 3 Advanced Types: Introduces TypeScript's unique type system that does not exist in JavaScript data types.
And we will look at the knowledge required to perform more advanced type checking by applying the concept of types.
Chapter 4: Type Extension and Narrowing: We will look at the concepts of type extension and type narrowing and learn how to write more extensible and explicit code.
Chapter 5: Using Types: Introducing examples of how the Elegant Brothers use TypeScript.
We'll look at practical code examples from the Elegant Brothers and solve problems that arise from inaccurate typing using various TypeScript techniques and utility types.
Chapter 6 TypeScript Compilation: We will look at the overall flow of TypeScript execution and learn about the main role and structure of the TypeScript compiler.
And let's see how it actually compiles.
Chapter 7 Asynchronous Calls: All actions of requesting an API and receiving a response are performed asynchronously.
This chapter covers how to handle and manage asynchronous requests in TypeScript.
Chapter 8: From JSX to TSX: Introduces how to apply the JSX syntax used in React to TypeScript.
Chapter 9 Hooks: Introduces how to handle state or side effects using several hooks provided by React.
We'll also learn about custom hooks, which allow you to reuse state logic and reduce the complexity of your components.
Chapter 10: State Management: Learn about state, which plays a crucial role in React applications.
Learn the basic concepts of states and see how to manage them efficiently.
Chapter 11: CSS-in-JS: CSS-in-JS is a way to write CSS in JavaScript. Applying CSS-in-JS abstracts CSS styles at the component level, rather than the document level, making them easier to manage.
In Chapter 11, we will learn about the concepts and usage of CSS-in-JS.
Chapter 12: Managing TypeScript Projects: Introduces concepts and tips that can be useful in TypeScript projects.
Chapter 13: TypeScript and Object Orientation: Learn how to leverage and enhance object orientation in TypeScript and React environments.