BEST

개발 · 프로그래밍

프로그래밍 언어

[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

Name: [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편
Price: 36300 KRW

타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

(4.9) 수강평 61개

수강생 1,528명

제로초(조현영)

TypeScript

초급자를 위해 준비한
[프로그래밍 언어, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

타입스크립트
TSC(컴파일러)
인터페이스, 타입 애일리어스
제네릭, 오버로딩
유틸리티 타입스

이제는 옵션이 아닌 필수 사항,
타입스크립트를 재미있게 배워봐요! 🦾

자바스크립트에서의 실수를
꽉 잡아줘요, 타입스크립트 ➰

Typescript

자바스크립트에 타입이 추가된 것으로,
타입에 관한 문제를 코딩 중에 미리 알려주어
개발자의 실수를 줄여주는 역할을 합니다.

타입스크립트를 공부할 때 가장 막막한 것은 막상 문법은 다 배웠는데 실전에서 응용하지 못한다는 것입니다. 인터페이스, 타입 애일리어스, 제네릭, 맵드 타입스, 인덱스드 시그니처 등을 배워도 언제 어떤 문법을 사용해야 하는지 모른다면 소용이 없죠.

기존에 웹게임을 만들며 배우는 타입스크립트 강좌를 낸 적이 있으나 수강생분들이 여전히 남의 타입을 분석하고, 직접 타입을 만드는데 어려움을 겪는다는 사실을 깨달았습니다. 따라서 강의를 완전히 개편하여 배운 타입스크립트 문법이 실전에서 어떻게 쓰이는지 알아보고, 타입을 어떤 식으로 작성해나가면 되는지 직접 실습해보는 강좌를 만들게 되었습니다.

이런 분들에게 추천합니다 😎

JS에서 타입스크립트로
전환하고 싶은 분

남이 만든 타입을
분석하는 게 어려운 분

내가 직접 타입을
작성하려고 하면 막막한 분

학습할 내용 ✍

1. 타입스크립트의
기본 문법을 배웁니다.

2. 다른 사람이 작성한 타입을
분석하는 법을 학습합니다.

3. 내가 직접 타입을
작성하는 법을 알아봅니다.

본 강의에서는 여러분들이 직접 타입을 분석하여 쓸 수 있도록 만들어 드립니다!
강의를 들은 후 타입스크립트의 기본 문법을 이해하고, lib.es5.d.ts나 utility types 등 타입스크립트가 기본적으로 제공하는 타입 정의를 분석하여 내 코드에 적용할 수 있게 됩니다. 심지어 반대로 lib.es5.d.ts나 utility types 등을 안 보고도 직접 작성할 수 있게 됩니다.

다음과 같은 코드를 직접 작성할 수 있게(작성까지는 못 해도 적어도 분석할 수는 있게) 해드립니다.

여기서 다루는 툴 🙌

크롬 브라우저와 Visual Studio Code(또는 웹스톰)을 사용합니다.

질문에 빠르게
대답해 드려요 🗒

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!

Who is ZeroCho?

_{제로초 블로그 및
유튜브 채널 운영}

_{웹개발 베스트셀러
<Node.js 교과서>, <Let's get IT 자바스크립트> 저자}

_{카카오모빌리티 오늘의픽업
기술파트장}

예상 질문 Q&A 💬

Q. 타입스크립트 몇 버전을 사용하나요?

4.7버전으로 촬영되었습니다. 더 높은 버전을 사용하셔도 됩니다.

Q. 소스 코드와 강의 교안은 어디에 있나요?

제로초의 깃허브에서 확인하실 수 있습니다.

Q. 자바 스크립트를 알고 들어야 하나요?

네, 기본 자바스크립트 문법 (렛츠기릿 자바스크립트 강좌 정도)는 아셔야 코드 이해가 가능합니다.

Q. 강의의 특징이 뭔가요?

이 강좌에서는 기본적인 문법 학습 이후, lib.es5.d.ts나 utility types 등(남이 만든 타입)을 분석하는 연습을 하고, 반대로 그 타입을 내가 직접 다시 만들어보는 연습을 해봅니다. 간단하게 시작해서 점점 복잡하게 만들 수 있게 도와드립니다. 실전 라이브러리 분석은 실전분석편 강좌에서 추가로 더 진행합니다.

Q. 실전 분석 편과는 다른 점이 무엇인가요?

추후 나올 실전분석편에서는 기본 문법편에서 설명한 문법은 안다는 전제 하에 React, Redux, Express, Node, jQuery, Axios 라이브러리의 타입을 분석하고 직접 작성해보는 연습을 합니다. 이를 위해 기본문법편의 내용을 알고 계셔야 합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

JS를 배우고 나서 TS를 배우고 싶으신 분
소프트웨어를 조금 더 안정적으로 만들고 싶으신 분

선수 지식,
필요할까요?

자바스크립트 문법 지식

안녕하세요
입니다.

64,229

명

수강생

1,543

개

수강평

9,625

개

답변

4.8

점

강의 평점

개

강의

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중
– 현) 스모어톡 CTO
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
Operator of ZeroCho.com
Currently running a YouTube channel ZeroCho TV, covering development topics
CTO at SmoreTalk
Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

커리큘럼

전체

42개 ∙ (7시간 41분)

섹션 1. 기본 세팅하기

4개 ∙ (37분)

섹션 2. 기본 문법 배우기

18개 ∙ (2시간 50분)

5. 타입스크립트는 변수, 매개변수, 리턴값에 타입 붙이는 것!
14:18
6. 타입 추론을 적극 활용하자
07:22
7. js 변환 시 사라지는 부분을 파악하자
05:56
8. never 타입과 느낌표(non-null assertion)
07:50
9. 원시 래퍼 타입, 템플릿 리터럴 타입, rest, 튜플
06:47
10. enum, keyof, typeof
09:31
11. union(|)과 intersection(&)
09:25
12. 타입 애일리어스와 인터페이스의 상속(extends)
10:17
13. 타입을 집합으로 생각하자(좁은 타입과 넓은 타입)
08:50
14. void의 두 가지 사용법
15:48
15. unknown과 any(그리고 타입 대입가능표)
06:28
16. 타입 좁히기(타입 가드)
14:21
17. 커스텀 타입 가드(is, 형식 조건자)
11:31
18. {}와 Object
04:38
19. readonly, 인덱스드 시그니처, 맵드 타입스
03:53
20. 클래스의 새로운 기능들
15:41
21. 옵셔널, 제네릭 기본
13:16
22. 기본값 타이핑
04:58

섹션 3. lib.es5.d.ts 분석

8개 ∙ (1시간 25분)

23. forEach, map 제네릭 분석
16:37
24. filter 제네릭 분석
16:31
25. forEach 타입 직접 만들기
09:34
26. map 타입 직접 만들기
06:13
27. filter 타입 직접 만들기
09:17
28. 공변성과 반공변성
09:58
29. 하나에는 걸리겠지(오버로딩)
05:42
30. 타입스크립트는 건망증이 심하다(+에러 처리법)
11:46

섹션 4. Utility Types

8개 ∙ (1시간 46분)

섹션 5. 마무리

4개 ∙ (1시간 0분)

강의 게시일:

마지막 업데이트일:

수강평

전체

61개

4.9

61개의 수강평

xiu15
수강평 3
∙
평균 평점 4.7
5
48% 수강 후 작성
I paid for the lecture to listen to it twice after listening to the live lecture a while ago!! TS Who said it was easy!?? Java developer? C# developer, please be quiet. I am a junior developer who has never learned a typed language and has been suffering from dust-like worries and agony while working on TypeScript. Errors lead to errors... and eventually, only codes that exclude errors pile up... I listened to a lot of famous lectures and studied the docs, but Even well-known lectures often explain the grammar in the docs (if you understand it by just reading the handbook, why bother?) and the examples lack depth + new content is missing, so I was disappointed. Without a general understanding of TS, I was in a hurry to fix individual types or errors, so my skills did not improve and I just sighed more and more. At that time!! I went to spy on Zerocho's lecture because the alarm went off, and when I came across the lecture, I was so shocked because it was so good. I felt like I was being compensated for the past N months of suffering because of TS?? Ah, this is how you should study TypeScript!! I felt that. As shown in the course introduction video, this course was especially "renewed" after receiving feedback from students, so the parts that covered practical materials and analyzing actual library types were overwhelmingly good. Also, it seems to be especially good for people who have tried it a little bit like me but are having difficulties, rather than people who don't know anything about TS at all. For those who don't know anything about TS at all, I recommend reading the TypeScript Handbook and starting. I would like to thank my teacher again for working hard to edit and upload such a great course!
- zerocho
  지식공유자
  First + Thank you for your sincere course review~
kimuyjoong2two
수강평 9
∙
평균 평점 4.6
5
100% 수강 후 작성
The lectures are detailed. They are not just lectures that explain grammar, but they actually create grammar. They also answer questions quickly. They are the best.
kyungjun
수강평 10
∙
평균 평점 5.0
5
93% 수강 후 작성
I wanted to go beyond simple type definitions while working on the job and define types and read typescript files of libraries, and I think this lecture is suitable for that. And as I have accumulated know-how about lectures, the breathing, flow, and examples of the lectures have become clearer, making it easier to listen to. Thank you for the great lecture.
ohsubin
수강평 13
∙
평균 평점 4.9
5
100% 수강 후 작성
Thanks to you, I feel like I've gotten closer to TypeScript. I learned a lot by analyzing and creating together. I'll have to go back and fill in the missing parts. I'll watch Part 2 lectures and get closer to TypeScript. Thank you and stay healthy.
rlaks57579885
수강평 1
∙
평균 평점 5.0
5
31% 수강 후 작성

제로초(조현영)님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

React Native with Expo: Mastering from 제로초

zerocho

It has become an era where web developers (especially if you are a React developer) can really easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps through Expo.

초급

React, React Native, Hybrid App

[Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

zerocho

You will learn about what a node is, the latest JavaScript grammar, the node API, npm, the module system, databases, testing, and more. You will create a project using five practical examples. You will also deploy a service to the cloud and convert a node project to TypeScript.

초급

Node.js, Express, MySQL

Next + Create a SNS service with React Query

zerocho

We will create an SNS service similar to Twitter (X.com) using the React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand stack. Finally, we will add SSR for search engine optimization!

중급이상

Next.js, React, react-query

Non-majors catching up with majors - Database, SQL

zerocho

If you are already a developer or want to become a developer but did not major in computer science and are weak in databases, gain lifelong knowledge with this one course!

입문

DBMS/RDBMS, SQL, MySQL

Test with Jest: Learn Properly from Zerocho

zerocho

In this lecture, we will show you when testing is necessary and the advantages of testing using the Jest framework. We will apply unit testing and integration testing to React, Express, etc.

초급

Software Test, Jest, react-testing-library

Slack Clone Coding [Backend with NestJS + TypeORM]

zerocho

Let's learn NestJS, which is called the Spring of Node.js, and experience the convenience of Dependency Injection. Let's learn everything from API development, comparison with Express, deployment, and testing.

중급이상

NestJS, TypeORM, Express

TS/JS Design Patterns with Canvas: Learn Properly from Zerocho

zerocho

Learn about the uses, pros and cons of various design patterns while creating a drawing board with TypeScript/JavaScript. Learning the canvas API is a bonus!

중급이상

Design Pattern, oop, TypeScript

[Renewal] TypeScript All-in-One: Part 2. Practical Analysis

zerocho

Now that you've learned the basic grammar of TypeScript, let's learn how to analyze complex types from popular libraries.

중급이상

TypeScript

Slack Clone Coding [Real-time Chat with React]

zerocho

Let's start serious React web development by creating it following the Slack service! From sign-up, login, room creation, to real-time chat!

중급이상

Clone Coding, React, TypeScript

Non-majors catching up with majors - Data Structures (with JavaScript)

zerocho

Data structures are essential subjects for studying algorithms! Let's learn various data structures using JavaScript!

초급

JavaScript, Algorithm, Coding Test

Catching up with non-majors - Networks, HTTP

zerocho

If you are a developer who deals with HTTP or want to become a developer but did not major in computer science and are weak in networking, gain lifelong knowledge with this one course!

입문

Network, tcpip, websockets

Delivery App Clone Coding [with React Native]

zerocho

Let's create a delivery app for riders with React Native. This is a lecture by a developer who has created more than 5 apps with React Native over the past 6 years and sold them to Kakao Mobility.

중급이상

React Native

Learning React while making web games

zerocho

Learn React through web games. Get familiar with Classes and Hooks, and learn additional things like Context API, React Router, Webpack, and Babel.

초급

React

[Renewal] Introduction to JavaScript in Zero Seconds through Coding Self-Study

zerocho

In this lecture, we will practice developing programming thinking skills using JavaScript. Let's start with the web game, the multiplication table, and then create a word game, number baseball, a reaction speed test, tic-tac-toe, a lottery machine, rock-paper-scissors, a card matching game, a text RPG, a minesweeper, a 2048 game, and a mole catching game.

초급

JavaScript

[Renewal] Creating NodeBird SNS with React

zerocho

Let's create a Twitter-like SNS service with React & Next & Redux & Redux Saga & Express stack. Finally, we will deploy it to AWS after SEO.

중급이상

React, Redux, Node.js

Applying TypeScript to Node.js (feat. NodeBird)

zerocho

Let's apply TypeScript to Node.js, add typings to existing npm packages, or create your own TypeScript library.

중급이상

TypeScript, Node.js, Web Application

Applying TypeScript to React while learning while making web games

zerocho

Let's use React and TypeScript together by adding TypeScript to a web game made with React and React Router, Redux, and MobX.

중급이상

React, TypeScript

Redux vs MobX (Learn Both!)

zerocho

Are you having trouble deciding between Redux and MobX? Let's learn both first and then decide!

초급

Redux, MobX

Learning Vue while making web games

zerocho

Learn Vue.js and Vuex and Vue Router, which are used with Vue, by creating 8 simple web games.

초급

Vue.js, Webpack, Vuex

Creating Nodebird SNS with Vue

zerocho

Create a SNS service using Vue and Nuxt frameworks. Learn the full stack knowledge required for the service.

중급이상

Vue.js, Node.js, AWS

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[Renewal] TypeScript All-in-One: Part 2. Practical Analysis

zerocho

Now that you've learned the basic grammar of TypeScript, let's learn how to analyze complex types from popular libraries.

중급이상

TypeScript

Bite-sized TypeScript

winterlood

Beyond grammar, delving into working principles and concepts – if you find TypeScript confusing no matter how much you learn, now is the time to learn it properly! We'll turn you into a TypeScript wizard 🧙🏻‍♀️.

초급

TypeScript

Learning TypeScript Basics Easily Through Projects

csslick

TypeScript: Core concepts, from basic to practical, all at once! Practical application through a project.

초급

JavaScript, TypeScript, TailwindCSS

[Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

zerocho

초급

Node.js, Express, MySQL

Applying TypeScript to Node.js (feat. NodeBird)

zerocho

Let's apply TypeScript to Node.js, add typings to existing npm packages, or create your own TypeScript library.

중급이상

Web Application, Node.js, TypeScript

Slack Clone Coding [Real-time Chat with React]

zerocho

Let's start serious React web development by creating it following the Slack service! From sign-up, login, room creation, to real-time chat!

중급이상

Clone Coding, React, TypeScript

TypeScript Basics for Ionic (ionic2) Development

jeongmincha

Let's learn Typescript as a preliminary step to learning Ionic2 Framework, one of the frameworks for developing hybrid apps.

초급

TypeScript, IONIC

Introductory course from TypeScript to ionic6 (Angular-based)

nodeep777

I recommend this to those who want to learn how to easily create and distribute Android apps, Windows apps, and iOS apps. We will teach you the basics of TypeScript rather than JavaScript and Angular!

입문

TypeScript, IONIC, Hybrid App

TypeScript Korea: Electron with TypeScript Hands-On Labs Seminar

woongjae

This tutorial will teach you how to create a simple chat app using TypeScript and Electron.

초급

TypeScript, Electron

Learn TypeScript with a real-world project

captain

This is the practical application part of "TypeScript Introduction - From Basics to Practical Use." If you haven't taken the introductory course, please take the introductory course first 😄

중급이상

TypeScript, ES6

How to create a map service with React + Express, as told by the developer of Corona Map (Typescript)

donghunee

This is a lecture on creating a map service from start to finish using the MERN stack (feat. TypeScript). Let's create each part step by step by looking at the official API documentation.

초급

MongoDB, Express, React