초보자를 위한 TypeScript 시작하기

TypeScript는 JavaScript의 강력한 슈퍼셋으로, 정적 타이핑과 다른 고급 기능을 언어에 추가합니다. 개발자가 오류를 일찍 포착하고, 더 깔끔한 코드를 작성하고, 대규모 코드베이스를 보다 효과적으로 유지 관리하는 데 도움이 됩니다. 이 가이드에서는 TypeScript의 기본 사항을 안내하고, 완전한 초보자라도 TypeScript를 시작하는 데 도움을 드립니다.

TypeScript란 무엇인가요?

TypeScript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어입니다. 정적 유형을 추가하여 JavaScript를 기반으로 하며, 이는 런타임이 아닌 컴파일 타임에 오류를 식별하는 데 도움이 될 수 있습니다. 이를 통해 안정적이고 유지 관리 가능한 코드를 작성하기가 더 쉬워집니다. TypeScript 코드는 브라우저나 Node.js 환경에서 실행하기 전에 JavaScript로 컴파일해야 합니다.

왜 TypeScript를 사용해야 하나요?

정적 타이핑을 통한 향상된 코드 품질 및 조기 버그 감지
최신 IDE의 더 나은 툴링 및 자동 완성 기능
대규모 코드베이스에 대한 가독성 및 유지 관리성 향상
최신 JavaScript 기능과 미래 표준을 지원합니다

TypeScript를 설치하는 방법

TypeScript를 사용하기 전에 컴퓨터에 설치해야 합니다. Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 설치되어 있지 않으면 Node.js 웹사이트에서 다운로드하세요.

터미널이나 명령 프롬프트를 엽니다.
다음 명령을 실행하여 TypeScript를 전역적으로 설치합니다.

npm install -g typescript

이 명령을 사용하면 TypeScript가 시스템에 전역으로 설치되어 모든 폴더에서 액세스할 수 있습니다.

첫 번째 TypeScript 프로그램 만들기

TypeScript를 설치하면 첫 번째 TypeScript 파일을 만들 수 있습니다. 다음 단계를 따르세요.

프로젝트를 위한 새 폴더를 만들고 터미널을 사용하여 해당 폴더로 이동합니다.

mkdir my-first-typescript-app
cd my-first-typescript-app

app.ts이라는 이름의 새로운 TypeScript 파일을 만듭니다.

echo "console.log('Hello, TypeScript!');" > app.ts

이렇게 하면 "Hello, TypeScript!"를 콘솔에 기록하는 간단한 TypeScript 파일이 생성됩니다.

TypeScript를 JavaScript로 컴파일하기

TypeScript 코드는 브라우저나 Node.js에서 직접 실행할 수 없습니다. 먼저 JavaScript로 컴파일해야 합니다. 터미널에서 다음 명령을 실행하여 TypeScript 파일을 컴파일할 수 있습니다.

tsc app.ts

이 명령은 같은 디렉토리에 app.js이라는 JavaScript 파일을 생성합니다. 이제 Node.js를 사용하여 컴파일된 JavaScript 파일을 실행할 수 있습니다.

node app.js

콘솔에 Hello, TypeScript!이 인쇄되어야 합니다.

TypeScript의 기본 유형 이해

TypeScript는 데이터의 모양과 구조를 정의하는 데 도움이 되는 몇 가지 기본 유형을 소개합니다. 다음은 몇 가지 일반적인 유형입니다.

Number: 숫자 값을 나타냅니다.
String: 텍스트 값을 나타냅니다.
Boolean: 참 또는 거짓 값을 나타냅니다.
Array: 동일한 유형의 값 컬렉션을 나타냅니다.
Tuple: 서로 다른 유형의 요소가 고정된 개수로 구성된 배열을 나타냅니다.
Enum: 명명된 상수의 컬렉션을 나타냅니다.
Any: 모든 값을 가질 수 있는 동적 유형을 나타냅니다.

예: TypeScript에서 유형 사용

TypeScript에서 다양한 유형을 사용하는 방법을 보여주는 간단한 예를 살펴보겠습니다.

let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;
let hobbies: string[] = ["Reading", "Gaming", "Traveling"];
let person: [string, number] = ["Jane", 25];

enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Green;

console.log(age, name, isStudent, hobbies, person, favoriteColor);

이 예에서 우리는 number, string, boolean, array, tuple, enum과 같은 특정 유형의 변수를 정의합니다. TypeScript 컴파일러는 변수에 올바른 유형이 할당되도록 보장하여 vanilla JavaScript가 제공하지 않는 안전성 계층을 제공합니다.

결론

TypeScript는 더욱 견고하고 유지 관리하기 쉬운 코드를 작성하려는 개발자에게 좋은 선택입니다. JavaScript에 정적 유형을 추가하면 TypeScript를 통해 오류를 일찍 포착하고 더 나은 툴링 지원을 제공할 수 있습니다. 이 튜토리얼에서는 TypeScript의 기본 사항, 설치 방법, 간단한 프로그램 작성 방법, 몇 가지 기본 유형을 사용하는 방법을 배웠습니다. TypeScript를 계속 탐색하면서 개발 워크플로를 개선하는 데 도움이 되는 훨씬 더 강력한 기능을 발견하게 될 것입니다.

타입스크립트 초보자 튜토리얼 자바스크립트 코딩 프로그래밍 학습 설치 컴파일 유형 함수 클래스 인터페이스 열거형