[Typescript] 타입스크립트, 정의 | 특징 | 비교 | 장단점 | 설치방법 | 문법 (feat.mac / window)

척척 프로그래밍, 인프준

 

 

 

 

 

 

 

들어가며

타입스크립트는 자바스크립트에 타입을 추가하는 정적 타입 언어입니다. 이 말은 즉, 프로그램을 작성할 때 미리 타입을 지정함으로써 버그를 미리 방지할 수 있고, 개발자의 실수를 줄일 수 있다는 것을 의미합니다. 이렇게 프로그램의 안정성과 유지보수성을 높여주는 동시에, 개발자가 코드를 작성하는 과정에서 더욱 창의적으로 프로그래밍할 수 있도록 도와줍니다.

 

또한, 타입스크립트는 현재 많은 기업들과 개발자들이 사용하고 있으며, 특히 대규모 프로젝트에서는 필수적인 언어로 자리 잡고 있습니다. 따라서 타입스크립트를 배우고 익힌다면, 미래에 대비한 안정적이고 창의적인 개발을 할 수 있을 것입니다.

 

 

 

 

 

 

 

타입 스크립트

 

 

 

 

 

 

 

정의

타입스크립트는 자바스크립트 문법을 기반으로 하면서, 변수나 함수 등에 대한 타입을 명시할 수 있습니다. 이를 통해 코드를 작성할 때, 개발자가 의도하지 않은 버그를 미리 방지할 수 있습니다. 또한, 자바스크립트의 모든 기능을 지원하며, ES6(ECMAScript 2015)에서 추가된 최신 기능들도 사용할 수 있습니다.

 

이러한 기능들은 타입스크립트 컴파일러가 자바스크립트 코드로 변환하는 과정에서 호환성 문제가 없도록 컴파일됩니다. 따라서, 타입스크립트는 자바스크립트의 확장된 버전으로, 개발 생산성을 높이고 코드의 안정성을 높일 수 있는 강력한 도구입니다.

 

 

 

 

 

[Javascript] ECMAScript, ES5와 ES6 비교 / 기능 / 사용법 / 예제코드

 

 

 

 

문서

타입스크립트는 공식문서 이외에도 국내의 많은 개발자분들이 모여 한글로 작성한 문서도 존재합니다.

 

 

공식문서

The starting point for learning TypeScript

 

한글 문서

TypeScript 한글 문서

 

 

 

---

 

 

 

특징

타입스크립트는 자바스크립트의 상위 집합 언어이므로, 자바스크립트 코드를 그대로 사용할 수 있습니다. 이를 통해 기존의 자바스크립트 프로젝트를 쉽게 타입스크립트 프로젝트로 전환할 수 있습니다.

 

하지만, 타입스크립트에서 제공하는 정적 타입 시스템을 활용하기 위해서는 기존의 자바스크립트 코드를 일부 수정해야 할 필요가 있습니다. 이는 변수나 함수 등의 타입을 명시해야 하거나, 타입 검사를 위해 타입 어노테이션을 추가해야 하는 등의 작업을 수행해야 합니다.

 

변환 과정에서 타입 에러가 발생할 가능성이 있으므로 주의가 필요합니다. 이를 방지하기 위해 타입스크립트에서 제공하는 엄격한 타입 검사 옵션을 활용하거나, 변환 작업을 단계별로 수행하여 안정성을 높일 수 있습니다.

 

따라서, 기존의 자바스크립트 프로젝트를 타입스크립트 프로젝트로 변환하는 작업은 일정한 작업량과 주의가 필요하지만, 기술적으로 어려운 작업은 아닙니다. 타입스크립트의 주요 특징들은 아래와 같습니다.

 

 

1. 정적 타입 체크

 

타입스크립트는 자바스크립트에 없는 정적 타입 체크를 지원합니다. 즉, 변수나 함수의 인자 등에 대한 타입을 명시하고, 컴파일 시점에서 타입 에러를 발견할 수 있습니다. 이를 통해 런타임 에러를 줄이고 코드의 안정성을 높일 수 있습니다.

 

2. 객체 지향 프로그래밍

 

타입스크립트는 클래스, 인터페이스, 모듈 등 자바스크립트에서 제공하지 않는 객체 지향 프로그래밍(OOP)의 기능을 지원합니다. 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다.

 

3. ES6+ 기능 지원

 

타입스크립트는 최신 자바스크립트(ECMAScript) 버전에서 추가된 기능들을 모두 지원합니다. 이를 통해 개발자는 최신 기술을 활용하여 더 간결하고 가독성 좋은 코드를 작성할 수 있습니다.

 

4. IDE 지원

 

타입스크립트는 강력한 IDE 지원을 제공합니다. IDE에서 코드의 자동 완성, 디버깅, 문법 검사 등 다양한 기능을 활용할 수 있으며, 개발 생산성을 높일 수 있습니다.

 

5. 커뮤니티 지원

 

타입스크립트는 활발한 커뮤니티를 가지고 있으며, 많은 개발자들이 기여하고 있습니다. 따라서 새로운 기능과 라이브러리가 지속적으로 추가되고 있으며, 문제 해결이 빠르게 이루어집니다.

 

6. 자바스크립트와의 호환성

 

타입스크립트는 자바스크립트와의 호환성이 높습니다. 따라서 기존의 자바스크립트 코드를 타입스크립트로 쉽게 마이그레이션 할 수 있습니다.

 

 

 

---

 

 

 

비교

자바스크립트( Javascript )와 타입스크립트( Typescript )는 둘 다 객체 지향 프로그래밍(OOP)의 기능을 지원하며 클라이언트 측 브라우저와 서버 측 런타임 환경(Node.js)에서 사용될 수 있다는 공통점이 있습니다.  그렇다면 어떤 차이가 있을까요?

 

 

Javascript	Typescript
동적타입 언어	정적타입 언어
인터프리터 언어	컴파일러 언어
유연성 ( 타입제한 x )	간결성, 일관성, 재사용성
독립적 실행	의존적 실행 ( 자바스크립트 )
작은 규모 프로젝트에 적합	큰 규모 프로젝트에 적합
.js 확장자	.ts 확장자

 

 

 

 

 

컴파일러 언어와 인터프리터 언어, 정의 | 특징 | 종류 | 비교 | 차이

 

 

 

 

장점

위 특징에 작성한 내용들 대부분이 타입스크립트의 강력한 장점입니다. 타입스크립트는 대표적으로 코드의 안정성과 유지보수성을 높여줍니다. 이를 실제로 어떻게 활용할 수 있는지, 예제를 통해 알아보겠습니다.

 

function add(a, b) {
  return a + b;
}

 

위 코드는 자바스크립트로 작성된 a와 b를 입력받아 덧셈을 처리하고 반환해 주는 함수입니다. 하지만 이 함수는 인자의 타입을 지정하지 않았기 때문에, add("1", 2)와 같이 문자열과 숫자를 더하려고 할 경우 에러가 발생하지 않습니다. 하지만 타입을 지정해 주면 다음과 같이 코드를 작성할 수 있습니다.

 

function add(a: number, b: number): number {
  return a + b;
}

 

이렇게 타입스크립트를 적용하여 작성하게 되면 add("1", 2)와 같이 문자열과 숫자를 더하려고 할 때 미리 타입 에러를 감지하여 코드에서 에러를 발생시킵니다. 이러한 타입 정의를 통해 코드의 안정성을 높일 수 있습니다.

 

 

 

 

단점

타입스크립트(TypeScript)는 매우 인기 있는 언어 중 하나이지만, 몇 가지 단점이 있습니다.

 

 

1. 학습 곡선이 높다

 

자바스크립트에 익숙한 개발자라 하더라도, 타입스크립트는 높은 학습 곡선이 있습니다. 타입스크립트를 사용하기 위해서는 새로운 문법 및 개념을 익혀야 하며, 이는 초기 학습 과정에서 어려움을 겪을 수 있습니다.

 

 

2. 코드량이 늘어날 수 있다

 

정적 타입 시스템을 사용하기 때문에 변수 및 함수 등에 타입을 지정해야 합니다. 이로 인해 코드 양이 증가할 수 있으며, 초기 구현 시간이 더 걸릴 수 있습니다.

 

 

3. 컴파일 시간이 길다

 

자바스크립트로 변환되기 전에 컴파일 과정을 거쳐야 합니다. 이로 인해 개발 중 컴파일 시간이 길어질 수 있으며, 특히 대규모 프로젝트에서는 컴파일 시간이 더욱 길어질 수 있습니다.

 

4. 타입 오류의 발생 가능성이 있다

 

정적 타입 시스템을 사용하기 때문에, 변수나 함수 등의 타입이 맞지 않을 경우 오류가 발생합니다. 하지만 모든 오류를 찾아내기 어렵기 때문에, 타입 오류가 발생할 가능성이 있다는 점을 염두에 두어야 합니다.

 

 

종합적으로, 타입스크립트는 장점이 많은 언어이지만, 몇 가지 단점이 있습니다. 그러나 이러한 단점은 비교적 작고 타입스크립트가 제공하는 기능과 장점의 강력함을 고려할 때 무시할 수 있습니다.

 

 

 

---

 

 

 

설치 방법

타입스크립트(TypeScript)를 설치하는 방법은 매우 간단합니다. 다음은 macOS와 Windows에서 각각의 설치 방법입니다.

 

 

Mac OS

1. Homebrew 패키지 관리자를 사용하여 타입스크립트를 설치하는 것이 가장 간편합니다. 따라서, Homebrew를 설치하기 위해 터미널에서 다음 명령어를 실행합니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

2. Homebrew 설치가 완료되면, 다음 명령어를 실행하여 타입스크립트를 설치합니다.

brew install typescript

 

3. 타입스크립트가 제대로 설치되었는지 확인하기 위해 다음 명령어를 실행하여 버전 정보를 확인합니다.

tsc --version

 

 

 

Window OS

1. Windows에서는 npm(Node Package Manager)를 사용하여 타입스크립트를 설치할 수 있습니다. 먼저, Node.js를 설치해야 합니다. Node.js는 아래 공식 홈페이지에서 다운로드할 수 있습니다.

 

Node.js

 

2. Node.js 설치가 완료되면, 다음 명령어를 실행하여 npm을 최신 버전으로 업데이트합니다.

npm install -g npm

 

3. 이제 다음 명령어를 실행하여 타입스크립트를 전역으로 설치합니다.

npm install -g typescript

 

4. 타입스크립트가 제대로 설치되었는지 확인하기 위해 다음 명령어를 실행하여 버전 정보를 확인합니다.

tsc --version

 

 

 

---

 

 

 

주요 문법

타입스크립트(TypeScript)는 자바스크립트와 유사하지만, 몇 가지 차이점이 있습니다. 타입스크립트에서 사용되는 주요 문법과 예제 코드를 살펴보겠습니다.

 

 

변수 선언

 

Boolean -  true 또는 false 값을 가지며, 기본 타입은 boolean입니다.

let isDone: boolean = false;

 

Number -  정수 및 부동 소수점 숫자를 나타내는 데 사용되며, 기본 타입은 number입니다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

 

String - 문자열을 나타내는 데 사용되며, 기본 타입은 string입니다.

let color: string = "blue";
color = 'red';

 

Array -  동일한 데이터 타입의 값들의 집합을 나타내는 데 사용되며, 기본 타입은 any[]입니다.

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

 

Tuple - 고정된 개수의 요소로 구성된 배열을 표현하는 데 사용됩니다.

let x: [string, number];
x = ["hello", 10];

 

Enum - 일련의 숫자형 값을 이름으로 매핑할 수 있도록 해주는 데 사용됩니다.

enum Color {
    Red,
    Green,
    Blue,
}
let c: Color = Color.Green;

 

Any - 모든 데이터 타입을 나타내는 데 사용됩니다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

 

Void - 일반적으로 반환 값이 없는 함수의 반환 타입으로 사용됩니다.

function warnUser(): void {
    console.log("This is my warning message");
}

 

Null과 Undefined - 각각 null과 undefined 값을 가지는 데 사용됩니다.

let u: undefined = undefined;
let n: null = null;

 

Never - 절대로 발생하지 않는 값을 나타내는 데 사용됩니다. 예를 들어 항상 예외를 발생시키는 함수의 반환 값으로 사용됩니다.

function error(message: string): never {
    throw new Error(message);
}

 

Object - 비 원시 타입을 나타내는 데 사용됩니다.

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK

 

함수 선언

// 매개변수와 반환 타입을 지정한 함수
function add(x: number, y: number): number {
  return x + y;
}

// 선택적 매개변수를 지정한 함수
function sayHello(name?: string): void {
  console.log('Hello, ' + (name || 'world') + '!');
}

// 기본 매개변수 값을 지정한 함수
function repeat(str: string, times: number = 1): string {
  return str.repeat(times);
}

 

 

객체와 인터페이스

인터페이스는 타입스크립트에서 객체의 구조를 정의할 때 사용됩니다. 예를 들어, 다음과 같은 인터페이스를 정의할 수 있습니다.

 

interface User {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

 

위의 인터페이스는 User라는 이름을 가진 객체가 name, age, gender라는 property를 가져야 한다는 것을 정의합니다. gender property는 'male' 또는 'female' 중 하나의 값을 가져야 합니다. 이제 이 인터페이스를 사용하여 객체를 생성할 수 있습니다.

 

const user: User = {
  name: 'John',
  age: 30,
  gender: 'male',
};

 

위의 코드에서 user 객체는 User 인터페이스의 구조를 따르고 있으므로, 타입스크립트는 이 객체를 유효한 타입으로 인식합니다.

 

 

타입 별칭 ( Type Alias )

타입 별칭은 타입에 별칭을 붙이는 것을 의미합니다. 다음과 같이 type 키워드를 사용하여 타입 별칭을 정의할 수 있습니다.

 

type UserId = number | string;

type User = {
  name: string;
  age: number;
  gender: 'male' | 'female';
  id: UserId;
};

 

위의 코드에서 UserId는 number 또는 string 타입을 가질 수 있는 타입 별칭입니다. User 타입은 User 인터페이스와 동일한 구조를 가지고 있지만, id property는 UserId 타입을 가집니다.

 

타입 별칭은 인터페이스와 유사하지만, 인터페이스는 객체의 구조를 정의하는 데에 주로 사용되고, 타입 별칭은 타입에 별칭을 붙이는 데에 사용됩니다.

 

 

클래스

// 클래스 선언
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// 클래스 생성
let person: Person = new Person('John', 30);
person.sayHello();

 

 

제네릭

제네릭(Generic)은 타입스크립트에서 함수, 클래스, 인터페이스 등의 형식을 일반화하여 여러 곳에서 재사용할 수 있는 기능입니다. 제네릭은 타입스크립트에서 타입 안정성을 보장하면서 코드 재사용성을 높일 수 있게 해 줍니다.

 

예를 들어, 배열의 요소를 역순으로 바꾸는 함수를 구현한다고 가정해 봅시다. 이 함수는 숫자 배열뿐만 아니라 문자열 배열, 객체 배열 등 모든 타입의 배열에서 동작해야 합니다. 제네릭을 사용하지 않고 이 함수를 구현하면, 각각의 타입마다 별도의 함수를 만들어야 합니다. 하지만 제네릭을 사용하면 함수를 일반화하여 타입 매개변수로 배열 요소의 타입을 받아들이고, 이를 활용하여 배열 요소의 순서를 바꿀 수 있습니다.

 

function reverse<T>(arr: T[]): T[] {
  return arr.reverse();
}

const numberArray = [1, 2, 3, 4];
const stringArray = ['a', 'b', 'c'];
const reversedNumberArray = reverse(numberArray);
const reversedStringArray = reverse(stringArray);

 

위 코드에서 reverse 함수는 T라는 타입 매개변수를 가지고 있습니다. 이 타입 매개변수는 함수가 호출될 때 전달되는 배열 요소의 타입을 나타냅니다. 함수에서 arr 매개변수의 타입은 T[]로 지정되어 있습니다. 이렇게 하면 함수 내부에서 arr 배열의 요소에 대해 타입 안정성을 보장하면서, 재사용 가능한 함수를 만들 수 있게 됩니다.

 

 

// 제네릭 함수 선언
function reverse<T>(items: T[]): T[] {
  return items.reverse();
}

// 제네릭 타입 선언
interface List<T> {
  add(item: T): void;
  get(index: number): T;
}

// 제네릭 클래스 선언
class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

 

💡 제네릭은 클래스, 인터페이스, 함수 등에서 모두 사용할 수 있으며, 타입스크립트에서 매우 중요한 기능 중 하나입니다.

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

Reference

ChatGPT