icon안동민 개발노트

첫 번째 타입스크립트 프로그램 작성

 타입스크립트 프로그래밍을 시작하는 가장 좋은 방법은 간단한 프로그램을 직접 작성해보는 것입니다.

 이 절에서는 기본적인 타입스크립트 파일 구조부터 시작하여 첫 번째 프로그램을 작성하고 실행하는 과정을 상세히 알아보겠습니다.

기본 구조와 'Hello, World!' 프로그램

 타입스크립트 파일의 기본 구조는 일반 자바스크립트와 매우 유사합니다. .ts 확장자를 사용합니다.

  1. VS Code에서 hello.ts 파일을 생성합니다.
  2. 다음 코드를 입력합니다.
function greet(name: string): string {
    return `Hello, ${name}!`;
}
 
console.log(greet("TypeScript"));
  1. 터미널에서 다음 명령어로 컴파일 및 실행
tsc hello.ts
node hello.js

변수 선언과 기본 타입

 타입스크립트에서 변수 선언 시 타입을 지정할 수 있습니다.

let age: number = 30;
let name: string = "John";
let isStudent: boolean = true;
let scores: number[] = [80, 90, 100];

함수 정의와 타입 지정

 함수 매개변수와 반환값에 타입을 지정할 수 있습니다.

function add(a: number, b: number): number {
    return a + b;
}
 
// 화살표 함수
const multiply = (a: number, b: number): number => a * b;

인터페이스를 사용한 객체 타입 정의

 인터페이스를 사용하여 객체의 구조를 정의할 수 있습니다.

interface Person {
    name: string;
    age: number;
}
 
function introducePerson(person: Person): string {
    return `My name is ${person.name} and I'm ${person.age} years old.`;
}
 
const john: Person = { name: "John", age: 30 };
console.log(introducePerson(john));

 인터페이스의 장점

  • 코드의 가독성 향상
  • 타입 재사용성
  • 객체 구조의 일관성 보장

컴파일 과정

 타입스크립트 파일을 자바스크립트로 컴파일하는 과정

 1. tsc 명령어 사용

tsc hello.ts

 2. hello.js 파일이 생성됨

 원본 TS 파일과 컴파일된 JS 파일 비교

hello.ts
// hello.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}
hello.js
// hello.js
function greet(name) {
    return "Hello, " + name + "!";
}

 주요 차이점

  • 타입 정보 제거
  • ES6+ 문법이 ES5로 변환될 수 있음 (tsconfig.json 설정에 따라)

타입 추론

 타입스크립트는 종종 타입을 자동으로 추론할 수 있습니다.

let inferredNumber = 42; // number로 추론됨
let inferredArray = [1, 2, 3]; // number[]로 추론됨
 
// 명시적 타입 지정과 비교
let explicitNumber: number = 42;

 타입 추론의 장점

  • 코드 간결성
  • 자동 타입 체크

 명시적 타입 지정이 필요한 경우

  • 초기값이 없는 변수
  • 복잡한 타입의 경우
  • 타입을 명확히 제한하고 싶을 때

일반적인 오류와 해결 방법

 1. 타입 불일치 오류

let name: string = 42; // Error: Type 'number' is not assignable to type 'string'.

 해결 : 올바른 타입의 값 할당

 2. 객체 속성 오류

interface User { name: string; }
let user: User = {}; // Error: Property 'name' is missing in type '{}'.

 해결 : 필요한 모든 속성 정의

 3. 함수 매개변수 오류

function greet(name: string) { console.log(`Hello, ${name}!`); }
greet(); // Error: Expected 1 arguments, but got 0.

 해결 : 필요한 모든 매개변수 전달

VSCode IntelliSense 활용

 VSCode의 IntelliSense는 타입스크립트 개발을 크게 도와줍니다.

  1. 자동 완성 : 변수, 함수, 메서드 이름 제안
  2. 타입 정보 표시 : 변수나 함수 위에 마우스를 올리면 타입 정보 표시
  3. 오류 하이라이팅 : 타입 관련 오류를 실시간으로 표시
  4. 빠른 수정(Quick Fix) 제안 : 오류에 대한 해결책 제안

 예시

interface User {
    name: string;
    email: string;
}
 
let user: User = {
    name: "John",
    // email 속성을 누락하면 VSCode가 오류를 표시하고 수정 제안
}

초보자를 위한 조언

  1. 점진적 학습 : 자바스크립트 기초부터 시작하여 타입스크립트 기능을 하나씩 추가
  2. 작은 프로젝트부터 시작 : 간단한 프로그램을 만들며 실습
  3. 공식 문서 활용 : TypeScript Handbook은 훌륭한 학습 자료
  4. 커뮤니티 참여 : Stack Overflow, TypeScript GitHub 등에서 질문하고 답변
  5. 기존 자바스크립트 프로젝트 변환 : 자신의 JS 프로젝트를 TS로 변환하며 학습
  6. 타입 정의 파일 (.d.ts) 읽기 : 라이브러리의 타입 정의를 통해 고급 사용법 학습

 타입스크립트로 첫 번째 프로그램을 작성하는 과정은 자바스크립트 프로그래밍과 매우 유사하지만, 타입 시스템의 도입으로 인한 중요한 차이점이 있습니다. 기본적인 타입스크립트 파일은 .ts 확장자를 사용하며, 자바스크립트 문법에 타입 주석을 추가한 형태를 갖습니다.

 'Hello, World!' 프로그램을 작성하는 과정은 타입스크립트의 기본 구조를 이해하는 좋은 시작점입니다. 이 과정에서 함수 정의, 매개변수 타입 지정, 반환 타입 지정 등의 기본적인 타입스크립트 문법을 접할 수 있습니다.

 변수 선언 시 : type 구문을 사용하여 타입을 명시적으로 지정할 수 있습니다. 기본 타입으로는 number, string, boolean, array 등이 있으며, 이를 통해 변수의 용도를 명확히 하고 타입 관련 오류를 방지할 수 있습니다.

 함수 정의에서도 매개변수와 반환값에 타입을 지정할 수 있어, 함수의 입출력을 명확히 문서화하고 잘못된 사용을 방지할 수 있습니다. 화살표 함수에서도 동일한 방식으로 타입을 지정할 수 있습니다.

 인터페이스를 사용한 객체 타입 정의는 타입스크립트의 강력한 기능 중 하나입니다. 이를 통해 복잡한 객체 구조를 명확히 정의하고, 재사용 가능한 타입을 만들 수 있습니다. 인터페이스는 코드의 가독성을 높이고, 큰 프로젝트에서 일관된 객체 구조를 유지하는 데 도움을 줍니다.

 타입스크립트 파일을 컴파일하는 과정은 tsc 명령어를 통해 이루어집니다. 컴파일된 자바스크립트 파일은 타입 정보가 제거되고, 설정에 따라 ES5 등 하위 버전의 자바스크립트로 변환될 수 있습니다. 이 과정을 통해 타입스크립트가 어떻게 자바스크립트로 변환되는지 이해할 수 있습니다.

 타입 추론 기능은 타입스크립트의 강력한 특징 중 하나로, 많은 경우 명시적인 타입 지정 없이도 타입을 정확히 추론할 수 있습니다. 이는 코드를 간결하게 유지하면서도 타입 안정성을 제공합니다. 하지만 복잡한 타입이나 명확한 의도 전달이 필요한 경우에는 여전히 명시적 타입 지정이 유용합니다.

 VSCode의 IntelliSense는 타입스크립트 개발을 크게 돕습니다. 자동 완성, 실시간 오류 감지, 타입 정보 표시 등의 기능은 개발 생산성을 크게 향상시키고 오류를 줄이는 데 도움이 됩니다.

 초보자가 타입스크립트를 시작할 때는 점진적인 접근이 중요합니다. 기본적인 자바스크립트 지식을 바탕으로 타입스크립트의 기능을 하나씩 추가해가며 학습하는 것이 효과적입니다. 작은 프로젝트부터 시작하여 실제 경험을 쌓고, 공식 문서와 커뮤니티 자료를 활용하는 것도 좋은 학습 방법입니다.

 결론적으로, 타입스크립트는 자바스크립트에 강력한 타입 시스템을 더한 언어로, 초기에는 약간의 학습 곡선이 있을 수 있지만, 장기적으로 코드의 품질과 유지보수성을 크게 향상시킬 수 있습니다. 첫 번째 프로그램 작성을 시작으로, 점진적으로 타입스크립트의 다양한 기능을 익히고 활용하면, 더욱 안정적이고 효율적인 웹 개발이 가능해질 것입니다.

이전으로다음으로