inflearn logo

Learning TypeScript with AI — From Basic Syntax to Full-Stack App Deployment

We live in an age where AI can write code for us, but if you can’t read that code, you can’t fix it—or trust it. Instead of memorizing syntax and typing everything by hand, this course teaches TypeScript by showing you how to read, run, and validate with types the code generated by AI coding tools like Claude Code, Codex, and Gemini. From basic syntax and DOM manipulation to an Express backend, completing a to-do list app, and deploying it on Render, you’ll experience the entire practical workflow of giving AI precise instructions and reviewing the results.

1 learners are taking this course

Level Basic

Course period Unlimited

AI
AI
JavaScript
JavaScript
TypeScript
TypeScript
Express
Express
Node.js
Node.js
AI
AI
JavaScript
JavaScript
TypeScript
TypeScript
Express
Express
Node.js
Node.js

What you will gain after the course

  • The ability to read AI-generated TypeScript code line by line and identify type errors and incorrect behavior on its own

  • TypeScript syntax used in practice, covering everything from types, functions, objects, arrays, classes, and generics to advanced types.

  • A browser interface built with Vite and DOM manipulation, and a REST API server built with Express and Zod

  • A workflow for giving AI precise instructions and reviewing the results using a context file (AGENTS.md) and a step-by-step plan (PLAN.md)

  • A completed full-stack to-do list app with a user interface and server, deployed on Render.

Can You Read Code Written by AI?

AI coding tools generate code in just a few seconds. However, if you can’t read that code, you won’t be able to fix it when errors occur or determine whether it’s working correctly.

Instead of memorizing TypeScript syntax by typing it out by hand, this course teaches you by asking AI for code → reading it → running it → asking questions and fixing it. TypeScript’s type system is the most reliable safeguard for catching mistakes in AI-generated code before execution. That’s why it’s the first language you should learn in the era of coding with AI.

Starting with the basics of the language, you’ll work through browser interfaces (DOM, Vite) and backend APIs (Express, Zod), and finally deploy a full-stack to-do list app you built yourself to the internet. This course is based on the latest TypeScript 7 and can be followed using any tool, including Claude Code, Codex, or Gemini Code Assist.

After completing the course, you’ll be able to create projects like this

Example Image Title (1)

Write a brief description of the example.

Example Image Title (2)

Write a brief description of the example.

Example Image Title (3)

Write a brief description of the example.

Example Image Title (4)

Write a brief description of the example.

  • You can read AI-generated TypeScript code line by line and identify type errors and incorrect behavior on your own.


  • Learn a workflow for giving AI precise instructions using a context file (AGENTS.md) and a step-by-step plan (PLAN.md), then reviewing the results.

  • Understand the entire flow of how a web application works, from the browser screen to the server and deployment.

What You’ll Learn

Section (1) TypeScript Basics: Types · Control Flow · Functions

Learn variables and data types, union types, conditional statements and loops, and scope. You will also learn function type annotations, type aliases, and type narrowing. In each section, use an AI coding tool to complete review quizzes and solve a practical application problem (a discounted price calculator).

Section (2) Objects · Arrays · Object-Oriented Programming · Advanced Types

Learn destructuring, optional chaining, array methods (map, filter, reduce), classes and interfaces, generics, and Map and Set. Then learn how to read advanced types frequently encountered in production code, including keyof, mapped types, utility types (Partial, Pick, Record), and satisfies.

Section (3) Browser and Server: DOM · Vite · Express

You’ll learn to manipulate the DOM in the Vite development server, along with events, client-side rendering, and ES modules. Then, you’ll build a REST API with Express 5, validate requests with Zod, and organize server-side code using middleware and routers.

Section (4) Real-World Projects and Deployment

Connect the frontend and server using async/await and fetch. Based on the requirements and design, get a plan from AI and review it, then implement a to-do list app in five steps. Finally, deploy it on Render’s free plan and publish the completed app on the internet.

Things to Know Before Taking the Course

Practice environment

  • Operating systems: Windows, macOS, and Linux are all supported (the course demonstrations use Windows)

  • Tools Used:

    • Node.js 22.18 or later (LTS recommended)

    • Visual Studio Code

    • One AI coding tool: Choose from Claude Code, Codex, or Gemini Code Assist. Please check the official page for each tool’s pricing plans.

    • Deployment practice: GitHub account, free Render account (no credit card required)

  • PC requirements: An ordinary PC that can run VS Code and a browser smoothly is sufficient.

Learning Materials

  • Lecture slides (PDF)

  • Two GitHub repositories for the hands-on code: for Sections 1–9 (Infran_TypeScript), and for Sections 10–11 (Infran_TypeScript_Express)

  • Section-by-section review quizzes: Run them by entering "Give me the Section 2 quiz" in the AI coding tool’s chat window.

  • 7 practical application problems, a to-do list project requirements document (REQUIREMENTS.md), and a screen layout diagram

Prerequisite Knowledge and Notes

  • Basic knowledge of HTML and CSS is required. No experience with JavaScript or TypeScript is necessary.

  • The code generated by AI may vary slightly each time it runs. The code shown in the lecture is an example, and we will also explain how to verify it using names, rules, and completion criteria.

  • Please leave your questions on the course Q&A board. (Please fill in the response time and update policy according to the instructor’s standards.)

  • Unauthorized distribution or resale of lecture videos and materials is prohibited.

Recommended for
these people

Who is this course right for?

  • A beginner who uses AI coding tools to create code but can’t fix or trust it because they don’t understand what it means

  • A developer who has used JavaScript but gets stuck whenever they see a type error and can’t move on to TypeScript

  • Those who have taken grammar courses but have never completed an app with both a frontend and a server from start to finish.

  • An aspiring frontend developer who knows HTML and CSS but feels overwhelmed by backend development and deployment, preventing them from gaining full-stack experience.

  • A junior developer who feels uneasy about submitting AI-generated code directly to the team because they’re unable to review it.

Need to know before starting?

  • Basic knowledge of HTML and CSS is required. It is sufficient to be able to read the page structure and styles.

  • The class will use AI coding tools. Please prepare one of the following: Claude Code, Codex, or Gemini Code Assist.

Hello
This is YoungJea Oh

Career Verified

5,789

Learners

502

Reviews

162

Answers

4.8

Rating

23

Courses

I am an AI specialist instructor teaching Artificial Intelligence and Python based on over 30 years of IT field experience. I develop and teach practical-oriented curricula, including deep learning, NLP, LLM fine-tuning, LangChain/LangGraph-based AI agents, and AI-driven development (AIDD). I translate more than 30 years of development and operations experience gained at Hyundai Engineering & Construction's IT department, Samsung SDS, and Citibank Korea into realistic, hands-on lectures. Currently, I am conducting AI courses at institutions such as KOSA, KOSTA, and KITRI.

Homepage Address: https://ironmanciti.github.io/

More

Curriculum

All

134 lectures ∙ (13hr 32min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

YoungJea Oh's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal

$44,000.00

20%

$42.90