ONLINE CLASS

타입스크립트 [입문부터 차근차근]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

타입스크립트 개발 환경을 설정하고 타입 단언과 interface를 사용하며 코드의 오류를 감지하는 방식을 살펴봅니다. 콜백 함수와 함수 오버로드, 반환타입·객체 구조 분해를 실습해 함수와 데이터의 관계를 익힙니다. 클래스 접근 방식과 선언 병합, 열거형 및 타입 호환성을 확인하면서 변수 선언부터 복합적인 타입 구성까지 단계적으로 학습합니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆

기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기

ALZIO DEEP GUIDE

TypeScript을 더 깊게 이해하기

19강의 타입·함수·객체·클래스·모듈·유틸리티·선언 기능을 연결합니다. 후반 데코레이터·메타데이터는 공개 설명의 실험적 설정을 그대로 근거로 삼고 현재 다른 데코레이터 방식과 구분합니다.

공식 기술정보 확인19강 커리큘럼 연결2026 현재 기술정보

타입스크립트 [입문부터 차근차근] · 19강 · 7시간 18분

01

TypeScript은 무엇인가

TypeScript는 JavaScript 코드에 타입 표현과 정적 검사를 더하는 언어입니다. 실행 전에 값의 사용 방식과 함수·객체의 계약을 검토하고, 보통 JavaScript로 변환하여 브라우저나 서버에서 실행합니다. 검사 통과가 외부 입력의 실제 형태나 업무 결과까지 보장하는 것은 아닙니다.

02

관련 플랫폼과 개발도구의 관계

JavaScript 언어·TypeScript 컴파일러·브라우저 또는 Node.js 실행환경·프레임워크는 서로 다른 역할입니다. 타입 선언은 편집기와 컴파일러에 정보를 주지만 실행환경을 새로 만드는 장치가 아닙니다. 설정 파일과 라이브러리 선언·모듈 출력 형식이 프로젝트의 검사와 실행 조건을 함께 결정합니다.

03

TypeScript의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

자료형·검사

변수·매개변수·반환값의 계약을 작성 전에 확인합니다. 자료 전달이 복잡한 코드에서 사용 실수를 찾는 데 유용합니다. 타입 단언은 실제 값을 검사하거나 변환하는 실행 함수가 아닙니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

Narrowing

조건과 제어 흐름으로 가능한 타입을 좁힙니다. null이나 여러 자료 형태를 처리할 때 분기별로 허용되는 작업을 구분합니다. 외부 입력이 항상 선언과 같다는 가정은 별도 검증이 필요합니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

함수·제네릭

매개변수와 결과 사이의 타입 관계를 표현합니다. 여러 자료를 같은 처리 규칙으로 다루면서 정보 손실을 줄이는 데 유용합니다. 제네릭 선언 자체가 알고리즘의 정확성을 증명하지는 않습니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

객체·클래스

프로퍼티와 메서드·생성 규칙을 모델링합니다. 인터페이스와 타입 별칭을 통해 여러 모듈의 자료 계약을 읽기 쉽게 합니다. 타입 수준의 제한과 실행 시 접근 제어가 항상 같은 장치는 아닙니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

모듈·유틸리티 타입

코드의 이름 범위와 타입 재사용을 정리합니다. 기존 자료 계약의 일부를 선택하거나 변형할 때 반복 선언을 줄입니다. 모듈 출력 형식과 실행환경의 로딩 방식은 별도로 맞춰야 합니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

데코레이터·선언

선언의 의미를 도구와 연결하는 기능입니다. 기존 프로젝트의 설정과 사용 규칙을 이해하는 데 필요합니다. 실험적 데코레이터 설정과 새로운 표준 계열의 동작·메타데이터 조건을 같은 문법으로 취급하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 실제 회차 연결표에서 확인

04

이 과정의 실제 작업 흐름

1~3강은 설치·출력·첫 오류·타입 단언·리터럴·Narrowing으로 검사와 실행의 차이를 확인합니다. 4~7강은 모듈·함수·제네릭·콜백·오버로드·객체 타입·인터페이스와 자료 전달 계약을 다룹니다.

8~12강은 제네릭·클래스·접근·메서드·this·추상 클래스와 모듈·유틸리티 타입을 연결합니다. 13~19강은 데코레이터·메타데이터·선언 병합·enum·JSX·반복·네임스페이스·심볼·호환성입니다. 각 출력이 타입 선언인지 실제 실행 코드인지 나누어 읽어 보세요.

설치·출력 확인
타입·분기
함수·객체 계약
클래스·모듈
선언·데코레이터
호환성과 결과 점검

05

핵심 구조를 이해하는 방법

타입은 값이 어떤 연산을 허용하는지 표현하고 제어 흐름에 따라 좁혀집니다. 객체의 구조를 비교하는 타입 호환성과 이름만으로 계통을 판단하는 방식은 다릅니다. 많은 타입 표현은 출력 코드에서 사라지지만 enum처럼 실행 코드를 만들 수 있는 구문도 있으므로 모든 문법이 지워진다고 단정하지 않습니다.

06

실무 적용과 결과 확인

2~3강을 복습할 때 잘못된 값 전달과 null을 포함한 분기를 각각 확인해 보세요. 타입 단언을 추가해 오류 표시가 사라진 것과 실제 자료가 올바른 것은 다른 결과입니다. 외부 JSON의 실행 시 검증은 추가 학습이며 자동으로 강좌 범위에 포함하지 않습니다.

12~19강에서는 모듈 출력과 이름 범위·호환성을 비교하세요. 동일한 선언이라도 컴파일 설정과 실행환경이 맞지 않으면 로딩 문제가 생길 수 있습니다. 결과 JavaScript를 읽는 점검은 추가 복습 방법으로 제안합니다.

07

이 강좌에서 집중할 전문주제

본 강좌의 전문 축은 타입 계약과 선언 기능을 함께 읽는 것입니다. 4~7강의 함수·객체 계약을 8~12강의 클래스·모듈에 연결하고, 후반의 선언 병합·네임스페이스·JSX를 구분하면 이름과 값이 어디에서 만들어지는지 확인할 수 있습니다.

13~14·17강 데코레이터는 공개 설명에 experimentalDecorators·emitDecoratorMetadata·reflect-metadata가 등장합니다. 이는 새 표준 계열 데코레이터의 설정·메타데이터 계약과 동일하지 않습니다. 현재 방식으로의 마이그레이션 전체를 이 강좌가 직접 가르친다고 표시하지 않습니다.

08

현재 기술과 강좌 환경의 관계

강좌에서 사용한 정확한 TypeScript 릴리스는 공개 설명만으로 확정하지 않습니다. ES5·ES2017 같은 표기는 출력 대상이나 라이브러리 조건이며 TypeScript 자체의 버전 번호가 아닙니다.

현재 문서의 타입·Narrowing·함수·클래스 개념을 참고하되 기존 실험적 데코레이터 설정은 분리합니다. TypeScript 5.0에서 설명하는 새 데코레이터 방식은 기존 emitDecoratorMetadata와 호환 조건이 다릅니다. 최신 안정 버전 번호와 새 기능 전체의 직접 수강 범위는 추측하지 않습니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
TypeScript	타입 계약과 정적 검사를 JavaScript 개발에 추가	본 강좌 중심
JavaScript	실행 시 실제 값과 브라우저·서버 API 처리	기반 언어 이해
프레임워크	UI·상태·라우팅 등 응용 구조 제공	후속 학습 범위

10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
환경·검사·Narrowing	출력과 타입 분기	정적 검사와 실제 값 구분	1·2·3강	강좌에서 직접 학습
함수·객체 계약	함수·제네릭·객체 타입	자료 전달 규칙	4·5·6·7강	강좌에서 직접 학습
클래스·모듈	클래스 구조와 이름 범위	책임·출력·로딩 조건	8·9·10·11·12강	강좌에서 직접 학습
유틸리티·데코레이터·메타데이터	타입 변형과 실험적 설정	현재 방식과 구분	13·14강	강좌에서 직접 학습
선언·enum·JSX·반복	선언 병합과 실행 구문	이름과 값 확인	15·16·17강	강좌에서 직접 학습
네임스페이스·심볼·호환성	범위와 자료 호환	설정과 계약 점검	18·19강	강좌에서 직접 학습

11

처음 배울 때 자주 생기는 오해

타입을 쓰면 실행 오류가 없어지나?

정적 검사는 일부 사용 실수를 미리 찾습니다. 외부 자료나 실행환경의 상태까지 보장하지 않습니다. 2~3강에서 검사와 실제 값을 구분하세요.

타입 단언은 값을 바꾸나?

컴파일러에 해석을 알려 주는 표현입니다. 실행 시 검증·변환 함수와 다릅니다. 2강의 단언과 실제 출력 값을 따로 확인하세요.

interface가 실행 시 검사를 하나?

주로 정적 타입 계약입니다. 외부 JSON이 계약과 같은지는 별도 확인이 필요합니다. 6~7강의 객체 선언을 입력 검증 전체로 확대하지 않습니다.

ES5가 강좌의 TypeScript 버전인가?

출력 대상 등의 조건입니다. TypeScript 릴리스 번호와 다릅니다. 13·18강의 설정 표기를 제품 버전으로 바꾸지 않습니다.

모든 데코레이터가 같은 방식인가?

설정과 제안 세대에 따라 계약이 다릅니다. 13~14강의 실험적 설정은 현재 새 방식과 구분합니다. 메타데이터 설정을 무조건 그대로 옮기지 않습니다.

타입 문법은 모두 출력에서 없어지나?

많은 타입 선언은 제거됩니다. enum 등 실행 코드가 생길 수 있는 구문도 있습니다. 15~16강에서 선언과 실제 결과를 나누어 확인하세요.

12

다음 학습 방향

자바스크립트 ES6 [입문부터 고급까지]

기반 JavaScript의 값·함수·비동기를 보강합니다.

자료 보기 →

ReactJS [제작실습]

별도 React 과정으로 UI 구조를 확장합니다.

자료 보기 →

TypeScript 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

타입스크립트 [입문부터 차근차근]

타입스크립트 [입문부터 차근차근]

타입스크립트 [입문부터 차근차근]

강의구성
(19강) 전체 : 7시간 18분|평균 : 23분3초

이용기간/강사
1개월2개월
알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
190,000원95,000원

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

01.19분 설치및 세팅 간단한 코드설명
왜? 어떤것을 설치 해야 하는지와 기본적인 부분부터 차근차근

설치와 세팅, 디버깅 의 수정, 콘솔 출력, 정적 타입 체크, flip 메서드 반환값, any 타입 TypeScript, greet 출력, 비동기 함수, 콘솔에 대문자, 객체 타입 printCoord
02.26분 printName, first 속성, 에러 감지, 좌표, 타입 단언
TypeScript가 에러를 감지, HTMLCanvasElement, literal types, interface

obj.last, undefined, welcomePeople, type, 타입 체크와 옵셔널 체이닝, welcomePeople, isArray, 타입으로 다시 할당, HTMLCanvasElement, literal types, URL과 HTTP, non-null assertion operator, TypeError, Symbol
03.25분 Narrowing, interface, 타입 가드
typeof, 문자열, 문자열 배열, 또는 null, 런타임 동적 객체의 속성 체크

Error 출력 repeat 해결, truthy인지 falsy 확인 배열 여부, undefined, factor를 곱한 배열, 문자열 메서드 호출 허용, null, 변수의 타입이 런타임에서 체크, 변수의 타입 변경될 수 있음 허용 TypeScript는 해당 분기에서 shape.radius가 정의
04.27분 모듈화하고 확장, More on Functions
제네릭 타입 매개변수, 배열을 필터링하는 두 가지 방법, 제네릭 함수

두 개의 인터페이스 유니온 타입, 처리를 강제화 런타임 에러, switch 함수를 인자로, 타입 별칭(type alias), 다른 함수에 전달, 다양한 타입의 배열 및 함수, 제네릭 타입 매개변수 타입
05.21분 More on Functions 2
콜백 함수, 함수 오버로드, JSON 파싱, 객체 구조 분해, 함수반환타입, 오버로드, 함수 오버로딩

배열과 콜백 함수, toFixed, 선택적 index 매개변수, 다양한 매개변수 시그니처, 함수 오버로딩, this 타입(User) JSON 파싱, 전개 연산자, 객체 구조 분해
06.25분 Object Types
객체 타입 type 키워드, PaintOptions, 객체 비구조화, TypeScript에서 에러, 인덱싱 가능한 타입, 여러 에러의 이유

매개변수 타입, 반환 타입, 객체 타입을 type 키워드, PaintOptions 사용하여 함수의 매개변수, destructuring 와 기본 매개변수 default parameters, readonly 속성, 다른 인터페이스로 타입 캐스팅, 숫자 또는 문자열일 수 있는 딕셔너리
07.24분 Object Types 2
인터페이스 종류별 학습, 타입 별칭, 비구조화 할당

객체 특정 구조, optional 속성 필수 속성, extends, 인터페이스를 결합, 오류 감지, 타입 단언, 함수 오버로딩, 제네릭 타입을 동적, 별칭과 함수를 생성, OneOrManyOrNullStrings, 함수를 호출할 때 문자열 배열, ReadonlyArray, 튜플 함수의 매개변수, 함수에 여러 값을 전달, 인터페이스를 사용 특정한 구조 배열
08.24분 제네릭 함수 와 Classes
제네릭 과 클래스 인터페이스 활용 함수 예제

매개변수로 전달된 값과 동일한 타입의 값 배열을 출력, 특정 타입에 의존하지 않고 일반적인 동작을 유지, 클래스를 여러 타입에 대해 재사용, 여러 클래스 동일한 생성, keyof 타입의 키 클래스와 인스턴스를 사용 생성자에 대한 오버로드
09.21분 Classes 2
인터페이스 와 클래스 와 메소드 사용시 모든 오류의 종류해결

클래스 상속 과 생성자, 접근자를 사용, 데이터에 대한 접근을 높은 수준으로 제어, 인덱스 시그니처 사용하여 동적으로 속성을 추가, 파라미터 에 대한 타입, 클래스 상속과 메서드 호출, Type-only Field Declarations, JavaScript와 TypeScript에서의 순서차이
10.23분 Classes 3
클래스별 접근시도의 여러방법들

프로토타입 체인이 올바르게 설정되도록, 클래스와 인스턴스, 부모 클래스의 메서드 접근, 상속된 클래스 protected, 캡슐화, private 멤버에 대한 비교나 조작, private 필드와 public 필드, 클래스의 정적 멤버와 정적 메서드, 제네릭 클래스를 사용하여 타입을 동적으로
11.24분 Classes 4
클래스의 메서드를 다른 객체(obj)의 메서드로 할당, this Types, 추상 클래스의 인스턴스

함수가 생성될 때의 this 컨텍스트를 유지, 특정 객체나 타입을 가진 this를 강제하여 오류를 방지, 명시적인 this 타입을 지정하면 코드에서 발생할 수 있는 잠재적인, 메서드를 연달아 호출하여 contents 속성의 값을 변경, 클래스의 상속 구조를 고려하여 동작, 상속 및 타입 가드, 값이 존재할 때만 해당 값을 안전하게 사용, 접근 제한자 해당 속성의 가시성과 보호 수준을 명확히, 제네릭 클래스 타입의 값을 가지는 클래스를 동적, 클래스의 인스턴스 타입을 도출
12.23분 Modules, Utility Types
CommonJS 스타일 Node.js 모듈, Partial, Required, 옵셔널한 객체

함수를 내보내고 모듈 시스템의 차이, tsconfig.json ES6 모듈로 취급, 모듈의 내보내기, 유니온 타입을 정의, 모듈에서 가져온 함수와 타입, 비동기적으로 파일을 읽고자 한다면, Node.js에서 모듈을 정의, 인터페이스와 이를 업데이트하는 함수, Readonly<>로 선언된 객체
13.24분 Utility Types 2, Decorators
Record, ReturnType, ThisParameterType, 인터페이스 정보 정의, 유니온 유틸리티 타입, --target ES5, ECMAScript 5

인터페이스와 하나의 객체, 타입이 정의된 객체, 파라미터가 없는 함수, ThisParameterType 유틸리티, 객체를 생성하는 함수, 객체 속성 조작 메서드를 호출, 데코레이터 함수, 팩토리 함수
14.22분 Decorators2, Declaration Merging
Metadata, Node.js reflect-metadata, tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata

데코레이터의 평가, 팩토리 함수, 클래스를 봉인하는 함수, 클래스가 고정된 형태, 데코레이터 런타임, 다양한 용도, 메서드나 속성을 변경, 데코레이터와 메타데이터, npm관련 설치후 tsconfig.json 추가세팅, 런타임에 클래스와 속성에 대한 메타데이터, 인터페이스를 합치는 것
15.26분 Declaration Merging 2, Enums
열거형 과 Document 인터페이스를 정의

네임스페이스 는 전역 스코프, 코드를 조직화하고 논리적으로 모듈화, 코드를 그룹화, 네임스페이스, 열거형에 새로운 함수, 모듈 확장, 혼합된 타입, 열거형 비트 OR 연산
16.23분 Enums 2, JSX
Iterators and Generators, for...in 루프와 for...of 루프 배열 순회, 클래스와 팩토리 함수

IIFE(즉시 실행 함수 표현식), 상수 열거형 컴파일 정의하고 활용하는 예제입니다., 읽기 전용 상수, 상수 열거형, 제네릭을 사용, for...of 루프를 사용하면 배열의 요소를 순회, 값만 저장하는 컬렉션, JSX 함수를 오버로드, 타입을 추론 시그니처를 사용, 유효하지 않은 컴포넌트와 팩토리 함수
17.23분 JSX 2, Mixins, Namespaces
(mixin)믹신을 구현, 데코레이터, 유효성 검사기

Intrinsic Element, JSX에서 사용될 요소의 속성, 객체지향 프로그래밍, 클래스에 스케일링, 믹신을 정의, 적용할 클래스와 믹신 클래스들, 데코레이터, 클래스의 타입 정보를 유지, 모듈화된 유효성 검사기
18.22분 Namespaces 2, Symbols
lib 옵션 설정, 고유(unique) 심볼, ECMAScript 2017, amd-module

인터페이스의 규약에 따라 문자열, --outFile 대신에 모듈 시스템을 권장, 코드를 조직화, D3 라이브러리, Symbol을 사용함으로써 다른 코드와 충돌할 염려가, AMD 모듈을 정의 JavaScript 모듈을 비동기적으로 정의하는 표준
19.16분 type-compatibility, Variable Declaration
중요사항 총 정리

인터페이스와 객체, 형식 호환성, 객체가 필요한 속성을 포함, 호환성을 엄격, forEach 메서드의 콜백 함수, 객체의 구조를 기반으로 타입 호환성, 함수의 매개변수를 옵셔널

강의목록 다운로드 1:1 강의 질문&답변

💬

알지오 학습·수강 도우미

운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.

상담 상태 확인 중