JavaScript에서 TypeScript로: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! JavaScript에서 TypeScript로의 흥미로운 여정에서 당신의 안내자로서 기쁜 마음을 전합니다. 컴퓨터 과학을 가르치고 있는 많은 해 동안 수많은 학생들이 이 전환을 거쳐갔고, 이를 가능한 한 원활하게 해드리기 위해 여기 있습니다. 그럼 마음에 드는 음료를 한 잔 챙기고, 편안하게 앉아我们一起來看看吧!

From JavaScript To TypeScript

TypeScript는 무엇인가요?

우리의 이주 모험을 시작하기 전에, TypeScript가 무엇이고 왜 점점 더 인기가 있는지 이해해보겠습니다.

TypeScript는 JavaScript의 더 조직적이고 체계적인 사촌입니다. JavaScript의 확장 집합으로, 모든 유효한 JavaScript 코드는 TypeScript 코드로도 유효합니다. 하지만 TypeScript는 선택적 정적 타입과 다른 기능을 추가하여 대규모 애플리케이션을 쉽게 작성하고, 실수를 줄일 수 있도록 합니다.

자, 집을 짓는 것을 생각해보세요. JavaScript는 레고 블록으로 집 짓는 것처럼 유연하고 즐겁지만, 가끔은 블록이 잘 맞지 않을 때가 있습니다. TypeScript는 레고 블록에 자세한 설명서가 있는 것처럼, 정확히 어디에 어떤 조각이 들어가는지 알 수 있어 실수의 가능성을 줄입니다.

JavaScript에서 TypeScript로 이주하는 이유는 무엇인가요?

"JavaScript가 잘 돌아가니, TypeScript를 왜 귀찮게 하겠어?"라고 고민할 수도 있습니다. 훌륭한 질문입니다! 다음은 몇 가지 이유입니다:

코드 품질 개선: TypeScript의 정적 타입은 개발 과정에서 초기 단계에서 오류를 잡아줍니다.
좋은 도구 지원: IDE는 TypeScript와 함께 더 나은 자동 완성과 리팩토링 도구를 제공합니다.
읽기 쉬움: 타입 주석은 코드가 자문서화되어 더 쉽게 이해할 수 있습니다.
유지보수 용이성: 프로젝트가 커질수록 TypeScript의 기능은 복잡성을 관리하는 데 도움이 됩니다.

이제 TypeScript가 멋진 이유를 알았으니, 우리의 이주 여정을 시작해보겠습니다!

JavaScript에서 TypeScript로 이주하는 단계

1. TypeScript 설치

먼저 TypeScript를 설치해야 합니다. 터미널을 열고 다음 명령어를 실행하세요:

npm install -g typescript

이 명령어는 TypeScript를 컴퓨터에 전역으로 설치합니다. 이제 tsc 명령어를 사용하여 TypeScript 코드를 컴파일할 수 있습니다.

2. .js 파일을 .ts 파일로 이름 변경

다음 단계는 JavaScript 파일의 이름을 .js에서 .ts로 변경하는 것입니다. 예를 들어, app.js는 app.ts로 변경됩니다. 걱정 마세요, 코드는 여전히 작동합니다!

3. tsconfig.json 파일 생성

이제 TypeScript 설정 파일을 생성해보겠습니다. 프로젝트 루트에 tsconfig.json 파일을 생성하고 다음을 추가하세요:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}

이 설정은 TypeScript가 코드를 어떻게 컴파일할지 지정합니다. 요리사에게 요리 방법을 지시하는 것과 같은东西!

4. 타입 주석 추가

이제 즐거운 부분입니다 - JavaScript 코드에 타입을 추가하는 것입니다. 몇 가지 예제를 보겠습니다:

예제 1: 변수

// JavaScript
let name = "Alice";
let age = 30;

// TypeScript
let name: string = "Alice";
let age: number = 30;

이 예제에서 우리는 name이 항상 문자열이고 age가 항상 숫자여야 한다는 것을 TypeScript에게 알립니다. 나중에 name에 숫자를 할당하려고 하면 TypeScript가 경고를 보여줄 것입니다. 친절한 친구가 어깨에 기대아래고 "정말 그렇게 하고 싶은 거야?"라고 물어주는 것과 같습니다.

예제 2: 함수

// JavaScript
function greet(name) {
return "Hello, " + name + "!";
}

// TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}

이 예제에서 우리는 greet 함수가 문자열 매개변수를 받고 문자열을 반환한다고 지정합니다. 이렇게 하면 실수로 숫자를 greet 함수에 전달하는 것을 방지할 수 있습니다.

예제 3: 객체

// JavaScript
let person = {
name: "Bob",
age: 25
};

// TypeScript
interface Person {
name: string;
age: number;
}

let person: Person = {
name: "Bob",
age: 25
};

이 예제에서 우리는 Person 인터페이스를 정의하여 객체의 형태를 설명합니다. 이렇게 하면 person이 항상 올바른 프로퍼티와 타입을 가지도록 보장할 수 있습니다.

5. any 타입 처리

이주 과정에서 TypeScript가 타입을 추론할 수 없는 곳을 만날 수 있습니다. 이 경우 any 타입을 볼 수 있습니다. any를 어디서나 사용하는 것은 매력적일 수 있지만, 가능하다면 피하도록 하세요. 대신 적절한 타입이나 인터페이스를 정의하세요.

6. TypeScript 특정 기능 사용

TypeScript는 JavaScript에서 사용할 수 없는 몇 가지 멋진 기능을 제공합니다. 두 가지를 살펴보겠습니다:

열거형(Enums)

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

열거형은 이름을 가진 상수 집합을 정의하는 데 사용됩니다. 선택할 수 있는 옵션 메뉴를 만드는 것과 같습니다.

연합 타입(Union Types)

function printId(id: number | string) {
console.log("Your ID is: " + id);
}

printId(101);  // OK
printId("202");  // Also OK
printId(true);  // Error!

연합 타입은 값이 여러 타입 중 하나일 수 있음을 지정합니다. "이것은 숫자이거나 문자열이지만, 다른 것은 아님!"과 같은 말입니다.

7. 점진적으로 엄격성 높이기

TypeScript는 tsconfig.json에서 설정할 수 있는 여러 가지 엄격성 플래그를 제공합니다. 처음에는 덜 엄격한 설정으로 시작하고, 점차 더 엄격한 설정으로 바꿔보세요.

플래그	설명
`noImplicitAny`	추론된 'any' 타입의 표현식과 선언에 대해 오류를 발생시킵니다
`strictNullChecks`	엄격한 null 검사를 활성화합니다
`strictFunctionTypes`	함수 타입의 엄격한 검사를 활성화합니다
`strictBindCallApply`	'bind', 'call', 'apply' 메서드의 엄격한 검사를 활성화합니다
`strictPropertyInitialization`	클래스 내 프로퍼티 초기화의 엄격한 검사를 활성화합니다
`noImplicitThis`	추론된 'any' 타입의 'this' 표현식에 대해 오류를 발생시킵니다
`alwaysStrict`	엄격 모드로 파싱하고 각 소스 파일에 대해 "use strict"를 출력합니다

8. 리팩토링 및 최적화

이주 과정에서 코드를 리팩토링하고 개선할 기회를 많이 찾을 수 있습니다. TypeScript의 정적 타입은 버그를 잡고 코드를 더 강력하게 만들어줄 수 있습니다.

결론

축하합니다! JavaScript에서 TypeScript로의 첫 걸음을 뗐습니다. 기억하시기 바랍니다, 이것은 여정이 아니라 경주입니다. 여유를 가지고 실험하고, 실수를 두려워 말아요 - 우리는 그래서 배우잖아요!

TypeScript는처음에는 조금 두려울 수 있지만, 한 번 익숙해지면 없앨 수 없을 만큼 유용할 것입니다. 자전거에서 모터사이클로 업그레이드하는 것처럼, 학습 곡선이 있지만 얻는 힘과 속도는 기말할 만합니다.

계속 연습하고, 호기심을 가지고, 가장 중요한 것은 즐겁게 코드를 짜세요! 당신이 TypeScript를 마스터하는 것을 알고 있습니다. 행복한 코딩을 기원합니다!

Credits: Image by storyset

이전 튜토리얼:

TypeScript - tsconfig.json