TypeScript - 개요
안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 TypeScript의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 fascinaning한 언어를 안내해드리기 위해 여기 있습니다. 그러면 가상의 배낭을 챙기고, 함께 뛰어들어보겠습니다!
TypeScript는 무엇인가요?
거대한 LEGO 성을 짓는다고 상상해보세요. JavaScript는 기본적인 LEGO 세트를 가지고 있는 것이라면, TypeScript는 그同一个 세트에 특별한 조각과 자세한 설명서가 더해진 것입니다. TypeScript는 바로 이렇게 - JavaScript의 슈퍼차저된 버전입니다!
TypeScript는 Microsoft가 개발하고 유지보수하는 오픈소스 프로그래밍 언어입니다. JavaScript의 엄격한 문법 확장집합으로, JavaScript의 모든 유효한 코드는 TypeScript 코드로도 유효합니다. 하지만 TypeScript는 선택적인 정적 타입과 JavaScript에 추가된 다른 강력한 기능을 제공합니다.
다음은 차이를 설명하기 위한 간단한 예제입니다:
// JavaScript
function greet(name) {
console.log("Hello, " + name + "!");
}
// TypeScript
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}TypeScript 버전에서는 타입 정보를 추가했습니다. name 뒤의 : string은 name이 문자열이어야 한다는 것을 지정하며, : void은 함수가 어떤 것도 반환하지 않는다는 것을 나타냅니다.
TypeScript의 기능
이제 TypeScript를 돋보이게 만드는 멋진 기능 중 일부를 탐구해보겠습니다.
1. 정적 타이핑
TypeScript의 가장 두드러진 기능은 선택적인 정적 타이핑입니다. 이는 변수, 함수 매개변수 및 반환값에 타입 정보를 추가할 수 있다는 것을 의미합니다. 이는 적절한 형태의 블록을 적절한 구멍에 넣는 것처럼 - 실수를 방지하는 데 도움이 됩니다!
let age: number = 30;
let name: string = "Alice";
let isStudent: boolean = true;
function multiply(a: number, b: number): number {
return a * b;
}이 예제에서 우리는 변수와 함수에 타입을 지정했습니다. 이는 오류를 빨리 찾아내고 코드가 더 자문서화되도록 도와줍니다.
2. 객체 지향 프로그래밍
TypeScript는 클래스, 인터페이스, 모듈과 같은 객체 지향 프로그래밍 개념을 완전히 지원합니다. 이는 복잡한 구조를 짓는 블루프린트를 가지는 것과 같습니다!
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
greet(): void {
console.log(`Hello, my name is ${this.name}`);
}
}
let alice = new Person("Alice");
alice.greet(); // 출력: Hello, my name is Alice이 코드는 Person 클래스를 정의하고 생성자와 메서드를 가지고 있습니다. 이는 코드를 조직하고 구조화하는 훌륭한 방법입니다.
3. 인터페이스
TypeScript의 인터페이스는 객체의 구조를 정의할 수 있게 해줍니다. 이는 코드가 따라야 할 계약서라고 생각할 수 있습니다.
interface Vehicle {
brand: string;
speed: number;
accelerate(): void;
}
class Car implements Vehicle {
brand: string;
speed: number;
constructor(brand: string) {
this.brand = brand;
this.speed = 0;
}
accelerate(): void {
this.speed += 10;
console.log(`${this.brand} is now going ${this.speed} mph`);
}
}
let myCar = new Car("Toyota");
myCar.accelerate(); // 출력: Toyota is now going 10 mph이 예제에서 우리는 Vehicle 인터페이스를 정의하고 Car 클래스가 이를 구현합니다. 이는 Car이 Vehicle에 지정된 모든 속성과 메서드를 가지도록 보장합니다.
TypeScript를 사용하는 이유
혹시 이렇게 생각할 수도 있을 것입니다. "왜 JavaScript를 사용하지 않고 TypeScript를 배우기로 했을까요?" 훌륭한 질문입니다! 작은 이야기를 공유해드리겠습니다.
처음으로 컴퓨터 프로그래밍을 가르쳤을 때, 제 학생 중 한 명이 거대한 JavaScript 프로젝트를 만들었습니다. 처음에는 모든 것이 잘 보였지만, 몇 개월 후에 변경을 시도하면서 수 시간 동안 디버깅에 시간을 보냈습니다. TypeScript를 사용하면 이러한 문제를 빨리 찾을 수 있을 것입니다. 그때 TypeScript의 진정한 가치를 깨달았습니다.
TypeScript를 사용하는 이유는 다음과 같습니다:
- 향상된 IDE 지원: TypeScript는 더 나은 자동 완성, 이동 및 개선 서비스를 제공합니다.
- 초기 오류 검출: 컴파일 시간에 오류를 찾아내기 때문에 실행 시간에 비해 더 나은 결과를 가져옵니다.
- 개선된 가독성: 타입 애노테이션은 코드가 자문서화되도록 도와줍니다.
- 대형 프로젝트에 유리: TypeScript의 기능은 대형 코드베이스를 관리하고 개선하는 데 도움이 됩니다.
- 미래의 JavaScript 기능: TypeScript는 종종 JavaScript의 미래 기능을 먼저 구현합니다.
TypeScript의 구성 요소
TypeScript는 세 가지 주요 구성 요소로 구성되어 있습니다:
| 구성 요소 | 설명 |
|---|---|
| 언어 | 문법, 키워드, 타입 애노테이션 |
| 컴파일러 | TypeScript를 JavaScript로 변환하는 TypeScript 컴파일러 (tsc) |
| 언어 서비스 | 편집기 및 기타 도구가 TypeScript 코드를 지능적으로 분석할 수 있는 방법 |
TypeScript 컴파일러는 생태계에서 매우 중요한 부분입니다. 이를 통해 모든 놀라운 기능을 사용하고 여전히 JavaScript로 변환할 수 있습니다.
다음은 컴파일 과정이 어떻게 작동하는지 간단한 예제입니다:
// TypeScript 코드 (hello.ts)
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("World"));
// 컴파일 명령: tsc hello.ts
// 결과로 생성된 JavaScript (hello.js)
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("World"));TypeScript 컴파일러는 TypeScript 코드를 받아서 깨끗한 표준 JavaScript로 변환합니다.
이제 우리는 TypeScript의 첫 걸음을 냈습니다. 새로운 언어를 배우는 것은 자전거 타는 것과 같습니다.처음에는 흔들릴 수 있지만, 연습을 통해 빠르게 이동할 수 있습니다. 계속 코딩하고, 배우고, 가장 중요한 것은 즐기세요!
Credits: Image by storyset