재우니의 블로그

타입스크립트 배우기 - Learn TypeScript (learn-ts.org)

 

 

 

https://www.learn-ts.org/

 

Learn TypeScript - Free Interactive TypeScript Tutorial

Welcome to Learn TypeScript - the Interactive TypeScript Tutorial Welcome to learn-ts.org - the Interactive TypeScript tutorial. Whether you are new to TypeScript or aiming to deepen your knowledge, this guide is curated for learners of all levels. TypeScr

www.learn-ts.org

 

 

이 가이드는 TypeScript를 처음 접하거나 지식을 심화하고자 하는 모든 수준의 학습자를 위해 선별되었습니다. JavaScript의 상위 집합인 TypeScript는 정적 타이핑 및 기타 여러 가지 강력한 기능을 제공하여 개발 환경을 개선하고 더욱 강력한 애플리케이션을 보장합니다.

아래 챕터에서 TypeScript  시작하세요. 각 섹션에서는 이해를 돕기 위한 튜토리얼, 예제 코드, 연습 문제, 솔루션을 제공합니다.

 

 

 

Basics

  1. Introduction
  2. Variables and Types
  3. Functions
  4. Loops
  5. Arrays
  6. Operators
  7. Truthy and Falsy
  8. Classes
  9. Interfaces
  10. Modules
  11. Type Assertions

Advanced

  1. keyof and typeof Operators
  2. Type Unions and Intersections
  3. Conditional Types
  4. Enum Type
  5. Generics
  6. Index Types
  7. Literal Types
  8. Discriminated Unions
  9. Mapped Types
  10. Mixins
  11. Namespaces
  12. Readonly Type
  13. Tuple Types
  14. Type Aliases
  15. Type Guards
  16. Decorators
  17. Utility Types
  18. Abstract Classes

 

 

Introduction

 

타입스크립트는 자바스크립트의 엄격한 구문론적 상위 집합으로, 선택적 정적 타이핑을 추가합니다. Microsoft에서 개발 및 유지 관리하며, 개발자가 최신 ECMAScript 기능을 사용하고 코드를 일반 JavaScript로 컴파일하여 모든 브라우저 또는 Node.js 환경에서 실행할 수 있습니다.

타입스크립트 사용의 가장 큰 장점은 정적 타이핑 기능으로, 개발 단계에서 오류를 조기에 발견하는 데 도움이 됩니다. 이는 버그를 조기에 발견하면 상당한 시간과 비용을 절약할 수 있는 대규모 프로젝트에서 매우 유용할 수 있습니다.

가장 기본적인 프로그램부터 시작해 보겠습니다: "Hello World". 타입스크립트에서는 자바스크립트와 마찬가지로 간단한 console.log() 문으로 이 작업을 수행할 수 있습니다.

const message: string = "Hello World";
console.log(message);

 

 

문자열은 메시지 변수에 문자열만 저장할 수 있음을 TypeScript에 알려주는 유형 주석입니다. 이는 타입스크립트가 자바스크립트에 추가한 많은 기능 중 하나입니다.

TypeScript는 백틱(backtick) 연산자를 사용한 문자열 서식 지정도 지원합니다. 다음은 예제입니다:

 

const name = "John";
const message: string = `Hello ${name}`;
console.log(message);

 

 

이름 변수가 Hello 라는 단어 바로 뒤에 문자열로 형식이 지정되었기 때문에 "Hello John"이 출력됩니다.

 

 

 

 

코드를 직접 아래 사이트에 넣고 실행해 보는 것도 좋네요.

 

https://www.mycompiler.io/ko/new/typescript

 

새 TypeScript 프로그램 만들기 - 마이컴파일러 - myCompiler

실행 코드 코드 저장 기존 코드를 유지하시겠습니까? 에디터에 코드가 있는 동안 언어를 전환하려고 합니다. 이를 유지하려면 “기존 코드 유지”를 선택합니다. 예제로 바꾸려면 “예제로 바

www.mycompiler.io