한국어

TypeScript 기본

TypeScript 기본 타입

TypeScript 제어 흐름

TypeScript 함수

TypeScript 인터페이스

TypeScript 클래스 및 객체

TypeScript 고급 유형

TypeScript 타입 조작

TypeScript 제네릭

TypeScript 기타

TypeScript 튜토리얼: 초보자를 위한 슈퍼차지된 자바스크립트 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? 우리의 TypeScript 튜토리얼에 오신 것을 환영합니다. TypeScript의 세계로 안내해드리는 기쁨을 느끼고 있습니다. 프로그래밍을 가르쳐온 지 오래된 저는 당신이 이 놀라운 언어의 힘을 풀어갈 수 있도록 지식을 나누고 싶어 마음이 뛰어います.

TypeScript - Home

TypeScript는 무엇인가요?

기본적인 것으로 시작해보겠습니다. TypeScript는 자바스크립트의 더 멋지고 더 세련된 사촌입니다. 자바스크립트를 기반으로 하여 새로운 기능을 추가하고, 오류를 문제가 되기 전에 잡아내는 프로그래밍 언어입니다. 자바스크립트가 멋진 양복과单片眼鏡을 입은 것을 상상해보세요 - 그게 TypeScript입니다!

간단한 예제

간단한 예제로 들어보겠습니다:

function greet(name: string) {
console.log(`Hello, ${name}!`);
}

greet("Alice"); // 출력: Hello, Alice!
greet(123); // 오류: argument of type 'number' is not assignable to parameter of type 'string'.

이 예제에서, 우리는 greet 함수를 정의했습니다. : string 부분은 TypeScript에게 name이 문자열이어야 한다는 것을 알립니다.当我们用数字调用 greet 函数时，TypeScript 会在代码运行之前捕捉到错误！

TypeScript를 배우는 이유

perhaps you're thinking, "Why should I bother learning TypeScript when JavaScript already exists?" Great question! Here are a few compelling reasons:

  1. Early error detection: TypeScript helps you find and fix errors before your code even runs.
  2. Better tooling: Get smarter code suggestions and auto-completion in your editor.
  3. Clearer code: TypeScript makes your code easier to read and understand.
  4. Scalability: It's great for large projects and teams.

누가 TypeScript를 배워야 하나요?

TypeScript는 누구에게나 적합합니다! 다음 중에 어느 하나라도 해당된다면:

  • 프로그래밍에 전혀 익숙하지 않은 초보자
  • 레벨업을 위해 자바스크립트를 배우고 있는 개발자
  • 대규모 애플리케이션을 개발하는 팀의 일원

TypeScript는 당신에게 무언가를 제공할 수 있습니다. 프로그래밍을 배우는 것은 훈련轮을 달고 자전거를 타는 것과 같아요 - 배우는 동안 추가적인 지원을 받을 수 있지만, 여전히 멋진 기술을 할 수 있습니다!

TypeScript를 배우기 전에 알아야 할 사항

자세히 알아보기 전에, 다음 사항을 알아 두시기 바랍니다:

  • 프로그래밍 개념(변수, 함수 등)에 대한 기본 이해
  • 자바스크립트에 대한 약간의 친숙함 (하지만 경험 부족하다면 걱정 마세요!)

이러한 사항을 알지 못해도 괜찮습니다! 우리는가감으로 기본적인 내용을 다루겠습니다.

TypeScript로 시작하기

설치

먼저, 컴퓨터에 TypeScript를 설치해야 합니다. 터미널을 엽니다하고 다음 명령어를 실행합니다:

npm install -g typescript

이 명령어는 TypeScript를 컴퓨터에 전역으로 설치합니다. 이제 코딩을 시작할 수 있습니다!

첫 TypeScript 프로그램

원형의 면적을 계산하는 간단한 프로그램을 작성해보겠습니다:

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`원의 면적은 ${area.toFixed(2)} 평방 단위입니다.`);

이 프로그램을 간단히 설명하자면:

  1. calculateCircleArea 함수를 정의하고, radius 매개변수를 number 타입으로 지정합니다.
  2. 함수 선언 뒤의 : number은 함수가 숫자를 반환할 것이라고 지정합니다.
  3. 원의 면적을 계산하는 식을 사용합니다.
  4. calculateCircleArea 함수를 반지름 5로 호출하고 결과를 area에 저장합니다.
  5. 마지막으로 결과를 출력하며, toFixed(2)를 사용하여 소수점 두 자리로 반올림합니다.

이 프로그램을 실행하려면 circle.ts 파일로 저장한 후, 컴파일하고 실행합니다:

tsc circle.ts
node circle.js

출력을 확인해보면 "원의 면적은 78.54 평방 단위입니다."와 같이 나타날 것입니다.

TypeScript 타입

TypeScript의 강력한 기능 중 하나는 그 타입 시스템입니다. 다음은 일반적인 타입 몇 가지입니다:

타입 설명 예제
number 숫자 값 let age: number = 30;
string 텍스트 값 let name: string = "Alice";
boolean 참/거짓 값 let isStudent: boolean = true;
array 값의 목록 let fruits: string[] = ["apple", "banana"];
object 키-밸류 쌍 let person: { name: string, age: number } = { name: "Bob", age: 25 };
any 임의 타입 (sparingly 사용하세요!) let data: any = 42;

여러 타입을 사용하는 더 복잡한 예제를 보겠습니다:

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`Name: ${student.name}`);
console.log(`Age: ${student.age}`);
console.log(`Average Grade: ${calculateAverage(student.grades)}`);
console.log(`Active: ${student.isActive ? "Yes" : "No"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "Alice",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

이 예제는 다음을 보여줍니다:

  1. interface를 사용하여 복잡한 타입(Student)을 정의합니다.
  2. 배열과 객체를 작업합니다.
  3. 함수 매개변수와 반환 타입에 대한 타입 표기법을 사용합니다.
  4. 조건부(ternary) 연산자를 사용하여 간결한 if/else 논리를 작성합니다.

TypeScript 프로그램을 컴파일하고 실행하기

TypeScript 프로그램을 실행하려면 먼저 자바스크립트로 컴파일해야 합니다. 다음 과정을 따르세요:

  1. TypeScript 코드를 작성합니다 (예: app.ts).
  2. 컴파일합니다: tsc app.ts.
  3. 결과 자바스크립트를 실행합니다: node app.js.

Pro tip: tsc --watch app.ts를 사용하여 변경을 저장할 때마다 자동으로 재컴파일합니다!

실제 세계에서 TypeScript 사용

TypeScript는 단순히 학습용만이 아닙니다. 많은 인기 있는 라이브러리와 프레임워크에서 사용됩니다:

  • Angular (Google의 웹 애플리케이션 프레임워크)
  • React (TypeScript 지원)
  • Node.js (서버 측 자바스크립트)
  • Vue.js (TypeScript 지원)

TypeScript를 배우면 이러한 강력한 도구들과 함께 일할 수 있는 문을 열어줍니다!

결론

축하합니다! TypeScript의 세계로 첫 걸음을 내디디셨습니다. 기본적인 내용을 다couvred했지만, 탐구할 것이 많이 남았습니다. 프로그래밍을 배우는 것은 새로운 언어를 배우는 것과 같아요 - 연습, 인내, 지속이 관键입니다.

TypeScript 여정을 계속하면서 실수를 두려워하지 마세요. 모든 실수는 배울 수 있는 기회입니다. 계속 코딩하고, 실험하고, 가장 중요한 것은 즐겁게 만들어보세요!

행복한 코딩 되세요, TypeScript 모험길에 버그 없고 즐거운 여정을 기원합니다! ?✨

Credits: Image by storyset

 
다음 튜토리얼:
TypeScript - 개요