타입스크립트의 기본

이 기사에서는 타입스크립트의 기본에 대해 설명합니다.

YouTube Video

"Hello World!" 실행하기

먼저, Visual Studio Code를 사용하여 타입스크립트의 고전적인 "Hello World!" 예제를 실행해 보겠습니다.

npm install -g typescript

npm 명령어를 사용하여 typescript를 설치하세요.

tsconfig.json 파일을 생성하세요.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Visual Studio Code에서 main.ts 파일을 실행할 수 있도록 .vscode/launch.json 파일을 생성하세요.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

"Hello World!"를 출력하는 main.ts 파일을 작성하세요. Visual Studio Code에서 F5 키를 눌러 실행할 수 있습니다.

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

이렇게 설정하면 VSCode 내에서 TypeScript 파일을 실행할 수 있습니다.

타입스크립트 개요

타입스크립트(TS)는 Microsoft가 개발한 자바스크립트의 상위 집합입니다. 타입스크립트는 정적 타이핑을 지원하여 더욱 견고하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

정적 타이핑

• 타입스크립트는 자바스크립트에 타입을 추가하고 컴파일 시점에 타입 검사를 수행합니다. 이것은 타입 관련 버그를 사전에 방지할 수 있도록 합니다.

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

컴파일

• 타입스크립트는 브라우저에서 직접 실행할 수 없으므로 자바스크립트로 트랜스파일(컴파일)해야 합니다. tsc (타입스크립트 컴파일러)를 사용하여 TS 파일을 JS 파일로 변환하십시오.

선택적 타입 주석

• 타입스크립트는 타입 추론도 수행하지만, 필요한 경우 명시적으로 타입을 지정할 수 있습니다. 이로 인해 코드 가독성과 신뢰성이 향상됩니다.

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

인터페이스

• 타입스크립트는 객체의 구조를 정의하기 위해 interface를 제공합니다. 이를 통해 객체 구조를 엄격히 관리할 수 있습니다.

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

클래스

• TypeScript는 JavaScript의 클래스 문법을 확장하며, 상속, 접근 제한자(public, private, protected), 및 추상 클래스를 지원합니다.

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

제네릭

• TypeScript에서는 제네릭을 사용하여 재사용 가능하고 타입 안전한 코드를 작성할 수 있습니다.

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

에코시스템

• TypeScript는 JavaScript 에코시스템과 완전히 호환되며, 기존의 JavaScript 코드를 그대로 사용할 수 있습니다. 또한 React와 Node.js와 같은 인기 라이브러리와 통합되어 있습니다.

강력한 개발자 도구

• TypeScript는 VSCode와 같은 에디터에서 자동 완성, 리팩토링 지원, 에러 검사를 포함한 고급 기능을 제공합니다.

TypeScript는 특히 대형 프로젝트에서 신뢰성을 높이고 개발자의 생산성을 향상시키는 데 유용합니다.

TypeScript의 변수

TypeScript에서 변수의 기본 개념과 사용법을 설명합니다.

변수 선언

TypeScript에서는 변수 선언에 let, const, var 세 가지 키워드를 사용합니다. 각 키워드는 서로 다른 특징을 가지고 있습니다.

let의 예:

let은 블록 스코프를 가지며, 중괄호 {} 내에서만 유효합니다. 값은 나중에 재할당될 수 있습니다.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const의 예:

const는 재할당할 수 없으므로, 한 번 할당된 값은 변경할 수 없습니다. 하지만 객체와 배열의 내용은 수정이 가능합니다.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var의 예:

var는 함수 범위(function scope)를 가지며, 재할당이 가능합니다. 하지만 블록 범위를 무시하여 let 또는 const와 비교했을 때 예상치 못한 동작을 초래할 수 있습니다.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

타입 주석

TypeScript에서는 변수에 대해 명시적으로 타입을 지정할 수 있습니다. 타입 추론도 지원되지만, 복잡한 상황에서는 타입 주석이 유용합니다.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

초기화되지 않은 변수

변수가 초기화되지 않고 선언되면 기본적으로 undefined가 할당됩니다. let으로 선언된 변수가 초기화되지 않았다면, 명시적으로 undefined를 할당하거나 타입에 undefined를 포함시켜야 합니다.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

변수 범위

let과 const는 블록 범위를 가지므로 동일한 블록 내에서만 유효합니다.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

변수 호이스팅

타입스크립트는 자바스크립트의 상위 집합이므로, 자바스크립트의 호이스팅 기능을 상속받습니다. 호이스팅은 변수와 함수 선언이 해당 스코프 상단으로 끌어올려진 것처럼 동작하는 것을 의미합니다. 그러나 선언만 끌어올려지며 초기화는 원래 위치에 그대로 남아 있습니다. var로 선언된 변수는 호이스팅되지만, let 또는 const를 선언 전에 사용하는 경우 오류가 발생합니다.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• 이 경우, var로 선언된 변수는 호이스팅되며, 해당 변수의 값이 출력됩니다.

1console.log(b); // ReferenceError
2let b = 20;

• let으로 선언된 변수는 호이스팅되지 않으며, 이에 따라 오류가 발생합니다.

요약

다음은 let, const, var에 대한 요약입니다.

• let은 재할당 가능하며 블록 스코프를 가집니다.
• const는 재할당 불가능하며 블록 스코프를 가집니다.
• var는 재할당 가능하며 함수 스코프를 가집니다.
• 이들 모두 변수 타입을 명시하기 위한 명시적 타입 주석을 허용합니다.

TypeScript의 이스케이프 문자

이스케이프 문자는 특정 문자를 직접 입력할 수 없거나 문자열 내에서 특별한 의미를 가지는 문자를 나타낼 때 사용됩니다. TypeScript에서는 제어 문자나 특수 문자를 나타내는 데 이스케이프 문자가 사용됩니다.

예를 들어, \n을 사용하여 개행을 포함한 메시지를 출력할 수 있습니다.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

특수 문자 이스케이프 처리

이스케이프 문자는 문자열에 특수 문자를 포함할 때도 유용합니다. 예를 들어, 문자열 내에서 큰따옴표나 작은따옴표를 직접 사용하고 싶을 수 있습니다.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

역슬래시 자체를 이스케이프 처리하기

문자열에 역슬래시를 포함하려면 두 개의 역슬래시를 작성해야 합니다.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

유니코드 및 16진수 이스케이프

TypeScript에서는 유니코드 코드 포인트를 이스케이프 시퀀스를 사용하여 나타낼 수 있습니다.

유니코드 이스케이프 시퀀스

\u 뒤에 4자리 16진수 번호를 지정하여 유니코드 문자를 나타낼 수 있습니다.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

16진수 이스케이프

\x 뒤에 2자리 16진수 번호를 사용하여 특정 문자를 나타낼 수 있습니다.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

템플릿 리터럴과 이스케이프

템플릿 리터럴은 백틱으로 둘러싸여 정의되며, 내장 표현식이나 멀티라인 문자열을 쉽게 생성하는 방법을 제공합니다. 템플릿 리터럴에서 일반 이스케이프 문자를 직접 사용할 수 있습니다.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

특수한 경우

TypeScript에서는 문자열 내에서 잘못된 이스케이프 시퀀스를 사용하면 구문 오류가 발생할 수 있습니다. 따라서, 이스케이프 문자가 유효한지 확인하는 것이 중요합니다.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

실제 사용 예제

이스케이프 문자를 사용하여 복잡한 문자열을 구성하는 예제가 여기 있습니다.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

이 예제에서는 \n은 개행에, \t는 들여쓰기를 추가하는 데 사용됩니다. 이는 JSON 구조를 더 쉽게 읽을 수 있도록 만듭니다.

요약

TypeScript에서 문자열을 다룰 때 이스케이프 문자는 매우 중요합니다. 문자열에 특수 문자 또는 제어 문자를 포함하고자 할 때, 적절한 이스케이프 시퀀스를 사용하여 표현력 있는 문자열을 작성할 수 있습니다. 이스케이프 문자를 올바르게 이해하고 사용하는 것은 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

TypeScript 버전

여기에서 TypeScript 버전을 간략히 살펴보겠습니다.

1. TypeScript 1.0 (2014)

   TypeScript의 첫 번째 안정 버전. 타이핑, 클래스, 모듈과 같은 기본 기능이 도입되었습니다.

2. TypeScript 2.0 (2016)

   Null이 아닌 타입, 제어 흐름 분석, 읽기 전용 속성, Never 타입이 도입되어 타입 추론이 강화되었습니다.

3. TypeScript 3.0 (2018)

   프로젝트 참조, 튜플 타입 확장, 그리고 나머지 매개변수 개선과 같은 기능을 통해 보다 유연한 타입 시스템이 도입되었습니다.

4. TypeScript 4.0 (2020)

   가변적 튜플 타입, 편집기 개선, 타입 추론 향상, 그리고 라벨된 튜플 요소와 같은 기능들이 추가되어 개발 경험이 향상되었습니다.

5. TypeScript 4.1 (2020)

   템플릿 리터럴 타입이 도입되어 문자열 타입 조작이 더욱 강력해졌습니다.

6. TypeScript 4.3 (2021)

   Override 키워드의 추가, 생성자 내 접근 제한자의 개선, 그리고 WeakMap 및 WeakSet에 대한 타입 지원 강화.

7. 타입스크립트 4.5 (2021)

   Awaited 타입, ModuleSuffixes 및 ECMAScript 모듈과의 호환성 개선이 추가되었습니다.

8. 타입스크립트 5.0 (2023)

   Decorators의 표준화, 프로젝트 빌드 속도의 개선, 타입 시스템 강화 및 최신 ECMAScript 기능 지원이 제공되었습니다.

타입스크립트는 지속적으로 발전하고 있으며, 매년 여러 버전을 발행하여 새로운 기능과 개선 사항을 도입하고 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video