TypeScript - 기본 문법

안녕하세요, 미래의 TypeScript 마법사 여러분! ? 저는 이 흥미로운 TypeScript 세계로 안내해드리게 되어 기쁩니다. 프로그래밍을 가르치고 있던 저로서는 TypeScript는 JavaScript의 슈퍼차저版으로, 여러분의 코딩 생활을 훨씬 더 쉽게 만들 것이라고 말씀드릴 수 있습니다. 시작해보겠습니다!

TypeScript - Basic Syntax

첫 번째 TypeScript 코드

좋아요, 새로운 언어에서 첫 줄을 쓰려고 하는 상상을 해보세요. 설레는 기분이지요? TypeScript에서 고전적인 "Hello, World!" 프로그램을 작성해 보겠습니다.

console.log("Hello, World!");

이제 여러분은 "이게 JavaScript랑 똑같아!"라고 생각할 수도 있습니다. 그렇습니다! TypeScript는 JavaScript의 확장집합이며, 모든 유효한 JavaScript는 TypeScript에서도 유효합니다. 하지만 걱정 마세요, 곧 TypeScript만의 특별한 내용을 배우게 될 겁니다.

보다 TypeScript다운 것을 시도해보겠습니다:

let message: string = "Hello, TypeScript!";
console.log(message);

이 작업에서 일어나는 일은 다음과 같습니다:

message라는 변수를 선언합니다.
: string 부분은 이 변수가 문자열 값을 가지도록 지정합니다.
"Hello, TypeScript!" 문자열을 이 변수에 할당합니다.
마지막으로, 이를 콘솔에 출력합니다.

이것은 TypeScript의 타입 시스템의 맛을 보는 것입니다. 이는 여러분의 코드에서 실수를 잡아내는 친절한 로봇 어시스턴트似的입니다!

TypeScript 프로그램 컴파일 및 실행

이제 TypeScript를 작성했으니, 어떻게 실행할까요? 브라우저와 Node.js는 TypeScript를 직접 이해하지 못하므로, 먼저 JavaScript로 컴파일해야 합니다. 이는 TypeScript를 컴퓨터가 이미 알고 있는 언어로 번역하는 것과 같습니다.

다음과 같이 합니다:

TypeScript 코드를 .ts 확장자 파일로 저장합니다. 예를 들어 hello.ts.
터미널이나 명령 프롬프트를 엽니다.
파일이 저장된 디렉토리로 이동합니다.
TypeScript 컴파일러를 실행합니다:

tsc hello.ts

이렇게 하면 같은 디렉토리에 hello.js라는 새 파일이 생성됩니다. 이는 여러분의 TypeScript 코드가 JavaScript로 번역된 것입니다!

이제 실행하려면 Node.js를 사용할 수 있습니다:

node hello.js

그러면 콘솔에 여러분의 메시지가 출력되어야 합니다.

컴파일러 플래그

TypeScript 컴파일러는 매우 지능적이지만, 때로는 특정 지시를 주고 싶을 수 있습니다. 이때 컴파일러 플래그가 등장합니다. 이는 컴파일러의 동작을 변경할 수 있는 특별한 명령입니다.

다음은 몇 가지 일반적인 컴파일러 플래그입니다:

플래그	설명
--outDir	모든 출력 파일의 출력 폴더를 지정
--target	ECMAScript 목표 버전을 지정
--watch	입력 파일을 관찰
--strict	모든 엄격한 타입 검사 옵션을 활성화

예를 들어, TypeScript를 이전 버전의 JavaScript로 컴파일하여 호환성을 위해 사용하고 싶다면 다음과 같이 할 수 있습니다:

tsc --target ES5 hello.ts

이 명령은 컴파일러가 ECMAScript 5와 호환되는 JavaScript를 생성하도록 지시합니다.

TypeScript에서의 식별자

프로그래밍에서 우리는 변수, 함수, 클래스와 같은 것들을 이름으로 부르기 위해 식별자를 사용합니다. 이를 코드의 다른 부분에 대한 레이블로 생각할 수 있습니다. TypeScript에서는 다음과 같은 규칙이 있습니다:

문자, 숫자, 밑줄, 달러 기호를 포함할 수 있습니다.
첫 글자는 문자, 밑줄 또는 달러 기호로 시작해야 합니다.
대소문자를 구분합니다 (예: myVariable과 MyVariable은 다릅니다).
예약어로 사용할 수 없습니다 (다음에 대해 이야기하겠습니다!).

다음은 몇 가지 유효한 식별자입니다:

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

그리고 몇 가지 무效한 식별자:

let 123abc: string = "Invalid"; // 숫자로 시작할 수 없습니다
let my-variable: number = 10; // 하이픈을 사용할 수 없습니다
let class: string = "Reserved keyword"; // 예약어를 사용할 수 없습니다

TypeScript ─ 키워드

키워드는 TypeScript에서 특정 의미를 가진 특별한 단어입니다. 이들은 언어의 사전과 같으며, 식별자로 사용할 수 없습니다.

다음은 몇 가지 일반적인 TypeScript 키워드입니다:

키워드	설명
let	블록 범위 변수를 선언
const	블록 범위 상수를 선언
if	if 문을 시작
for	for 루프를 시작
function	함수를 선언
class	클래스를 선언
interface	인터페이스를 선언
type	타입 별칭을 선언

예를 들어:

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

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

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

각 키워드는 코드를 구성하고 정의하는 데 특정 목적을 가집니다.

TypeScript에서의 주석

주석은 코드에 남겨둔 작은 메모와 같습니다. 컴파일러는 이를 무시므로, 코드의 실행에 영향을 미치지 않습니다. 이를 통해 코드의 동작을 설명할 수 있습니다.

TypeScript는 세 가지 주석을 지원합니다:

단일 줄 주석:

// 이것은 단일 줄 주석입니다
let x: number = 5; // 줄 끝에도 주석을 달 수 있습니다

복수 줄 주석:

/* 이것은 복수 줄 주석입니다
여러 줄을跨할 수 있습니다
더 긴 설명이 필요할 때 유용합니다 */
let y: number = 10;

문서 주석:
```
/**
```

이것은 문서 주석입니다
함수나 클래스에 대한 설명을 작성하는 데 사용됩니다
@param name 인사할 이름
@returns 인사 메시지 */ function greet(name: string): string { return Hello, ${name}!; }

좋은 주석은 코드가 무엇을 하는지 설명하는 것이 아니라, 왜 그렇게 하는지 설명해야 합니다. 코드 자체는 무엇을 하고 있는지 충분히 명확하게 짓도록 해야 합니다.

TypeScript와 객체 지향 프로그래밍

TypeScript의 좋은 점 중 하나는 객체 지향 프로그래밍(OOP)을 지원하는 점입니다. 프로그래밍 초보자라면 OOP는 코드를 "객체"라는 것으로 조직하는 방법으로 생각할 수 있습니다. 각 객체는 속성과 행동을 가집니다.

간단한 Car 클래스를 만들어 보겠습니다:

class Car {
// 속성
make: string;
model: string;
year: number;

// 생성자
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// 메서드
describe(): string {
return `This is a ${this.year} ${this.make} ${this.model}.`;
}
}

// Car의 인스턴스 생성
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // 출력: This is a 2022 Toyota Corolla.

이를 설명하자면:

Car 클래스를 정의하고, make, model, year 속성을 가집니다.
constructor는 새로운 Car 인스턴스가 생성될 때 호출됩니다.
describe 메서드는 차량을 설명하는 문자열을 반환합니다.
새로운 Car 객체를 생성하고 describe 메서드를 호출합니다.

TypeScript의 타입 시스템은 OOP에서 매우 유용합니다. 이는 타입 오류를 사전에 잡아내는 데 도움이 됩니다.

이제 여러분은 TypeScript의 첫 걸음을 냈습니다. 코드를 배우는 것은 여정이 아니라 목적지가 아닙니다. 모든 것이 처음에는 이해가 되지 않을 수도 있습니다 - 계속 연습하고, 실험하고, 가장 중요한 것은 즐기세요! 곧 복잡한 TypeScript 애플리케이션을 작성하고, 정적 타입이 없는日子里 어떻게 살았는지 기억할 수 없을 것입니다. 행복하게 코딩하세요! ?

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 환경 설정

다음 튜토리얼:

TypeScript vs. JavaScript