[TS] 1. TypeScript 환경설정

TypeScript란?

TypeScript는 마이크로소프트에서 개발한 JavaScript를 포함하는 상위 집합(Superset) 언어로 브라우저, 운영체제 상관없이 이용가능한 오픈소스입니다. TypeScript는 왜 등장하게 되었을까요? 우선 JavaScript의 불편함에 대해 이야기해보겠습니다. JavaScript 언어는 동적 타입 언어로 매우 유연하고 편리하게 코드 작성이 가능합니다. 하지만 이러한 유연함 때문에 불편함을 경험해보신 적 없으신가요?

 

JavaScript 프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다. 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우라던지, 단순한 오타, 라이브러리 API를 이해하지 못하거나 런타임 동작에대한 잘못된 가정 또는 기타 다른 오류가 발생하죠. 이러한 오류들은 JavaScript에서 명시해주지 않는 경우가 많습니다. 그래서 대부분의 개발자들이 의도치않은 실수를 많이 하게 되죠.

 

아래의 예제 코드를 볼까요?

let add = (x, y) => {
	return x + y;
}

add(5, "7");

단순히 x, y의 값을 전달인자로 받아 두 값을 더한 결과를 리턴하는 add 함수가 있습니다. 해당 함수에 5와 “7”의 값을 전달 인자로 전달해주면 어떤 결과 값을 리턴받게 될까요?

 

정답은 “57”입니다. 이런 식으로 JavaScript는 문자열과 숫자를 더할 경우, 숫자 타입의 인수 쪽을 강제적으로 타입 변환해 문자열을 만듭니다. 이렇게 JavaScript는 함수나 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예상치 못한 결과를 초래하게 됩니다. 이런 문제점을 보완하기 위해 TypeScript라는 언어가 등장하게 되었습니다.

 

TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여줍니다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있습니다.

 

또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와줍니다.

TypeScript 시작하기

먼저 프로젝트 폴더를 생성합니다.

mkdir typescript-example
cd typescript-example

당연한 얘기지만 node와 npm이 설치되어 있어야합니다. 프로젝트 폴더 생성 후 해당 폴더로 이동하여 프로젝트를 초기화해주고 TypeScript를 설치해줍니다.

npm init -y

# Global 설치
npm install -g typescript

# Local 설치
npm i -D typescript

TypeScript 권장 설치 방법은 로컬에서 설치하는 방법입니다. 다수의 프로젝트에서 TypeScript를 사용한다면 편의상 글로벌 설치하셔도 됩니다.

 

TypeScript가 설치가 되었다면 아래의 명령어를 통해 TypeScript의 트랜스파일링이 잘 실행되는지 확인합니다.

# 버전 확인 및 설치, 실행 잘 되는지 확인
tsc -v 

이 외에도 ESLint + Prettier를 사용하면 더 효율적으로 TypeScript를 사용할 수 있습니다. 관련 포스팅은 이후에 이후에 하도록 하겠습니다.

tsconfig.ts 생성

이제 설치 및 실행 확인까지 다 완료하였습니다. 그럼 이제 TypeScript를 사용하기 위한 tsconfig.ts 파일을 설정해주겠습니다. tsconfig.ts 파일은 매번 TypeScript를 컴파일할 때마다 옵션을 추가하고 제거해주는 번거로움을 없애줍니다. 매번 명령어를 입력하지 않고 컴파일 설정 파일을 만들어서 사용하는 것이 편리합니다.

 

tsconfig.ts 파일의 위치가 TypeScript 프로젝트의 루트 디렉토리가 됩니다. 아래 명령어를 통해 tsconfig.ts 파일을 생성해주세요.

tsc --init

생성된 tsconfig.ts 파일에 다음과 같은 코드를 작성해주세요.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
  },
  "include": ["src/**/*"],
	"exclude": ["nodemodules"]
}

• compilerOptions
  • target : tsc가 최종적으로 컴파일할 ECMAScript 목표 버전을 설정합니다. default는 ES3입니다. ES6를 웹 표준으로 많이 사용하고 있으므로 ES6로 설정해줍니다. ES3까지 설정해줄 경우 불필요한 코드들이 추가되기 때문에 번들 크기가 커질 수 있습니다.
  • module: 사용할 모듈 방식을 지정해줍니다. 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
• include: 변환할 폴더를 지정합니다. 노드 환경이나 브라우저 환경에서 JavaScript 밖에 읽지 못하기 때문에 JavaScript로 변환해주는 작업을 해야합니다.
• exclude: include와 반대로 컴파일을 제외할 대상들을 설정해줍니다.

이 외의 다양한 config 속성들이 존재합니다. 여기를 참고하셔서 프로젝트에 필요한 설정이 있다면 추가로 설정해주세요. 그 밖에 속성들이 무엇이 있고 어떤 의미를 가지는지 궁금하신 분들도 여기를 참고해주세요.

 

여기까지 TypeScript 실행하기 위한 기본적인 설정은 끝났습니다! 이제 src 폴더를 생성해주고 index.ts 파일을 생성해주세요.

 

이후 아래와 같이 코드를 작성해주고 무사히 잘 실행되는지 확인해봅시다!

// src/index.ts

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

add(1+2)

코드를 작성해주신 후 아래의 명령어를 이용해 실행해봅니다.

tsc src/index.ts // 해당 명령어를 실행하면 index.js파일이 생성되어요!(트랜스파일링)
node src/index.js

TypeScript Type

TypeScript는 변수를 선언할 때 타입을 명시적(Explicit)으로 할당 할 수 있습니다. TypeScript는 JavaScript를 포함하는 수퍼셋(Superset)이므로 JavaScript가 지원하는 데이터 타입을 모두 사용 가능합니다. 뿐만 아니라 클래스, 인터페이스 등을 타입으로 설정할 수도 있습니다.

• null
• undefined
• number
• string
• boolean
• array
• function
• object
• Symbol

Boolean

let isShow: boolean = true;
let isDone: boolean = false;

Number

let number1: number = 5;
let number2: number = 0.7;

String

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

Array

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

Tuple

let user: [string, number, boolean] = ["kimcoding", 20, true];

Object

let obj: object = {};

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있습니다. 그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아닙니다.

 

따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋습니다. 객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있습니다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

Any

간혹 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 때도 있습니다. 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다.

let maybe: any = 4;

다음과 같이 변수 선언과 초기화 과정에서 값을 할당하지 않으면, 암시적으로 any 타입이 지정됩니다.

let maybe = 4;

any 타입을 사용한다면 굳이 TypeScript를 쓸 이유가 없습니다. JavaScript는 기본이 any 타입을 사용하기 때문입니다. 그러므로 TypeScript를 사용한다면 다음과 같이 타입을 명시적으로 설정하는 것을 권장합니다. 타입을 지정하면 잘못된 타입이 할당 되었을 때 오류를 사용자에게 알려주므로 매우 유용합니다.

Function

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

return 값이 없다면 void 를 사용할 수 있습니다.

let printAnswer = (): void => {
	console.log("YES");
}

유니온(Union) 타입과 인터섹션(Intersection) 타입

TypeScript는 연산자를 이용해 타입을 정할 수 있습니다. JavaScript에서도 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있습니다. | 연산자를 이용한 타입을 유니온(Union) 타입이라고 하며, & 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 부릅니다.

유니온 타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입입니다.

function setInfo(id:number|string, name:string){
  return { id, name };
}

유니온 타입 주의할 점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 합니다.

예를 들어 아래와 같은 타입이 있을 때

interface Developer {
  name: string;
  skill: string;
}

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

Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있습니다. 왜냐하면 공통되고 보장된 프로퍼티만 제공해야 하기 때문입니다. 만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 합니다.

아래 코드는 타입 가드를 사용해 작성된 코드입니다.

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

인터섹션(Intersection) 타입

인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현합니다.

let value: string & number & boolean;

이런 식으로 타입을 결합해 사용할 수 있습니다. 여기서 value 변수는 string, number, boolean 타입을 전부 받을 수 있습니다.

인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않습니다.

interface Developer {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

 

[참고 사이트]

TypeScript 공식 사이트 핸드북

Handbook - The TypeScript Handbook

이듬님 TypeScirpt 핸드북

TypeScript 가이드북 - TypeScript Guidebook

코드스테이츠 TypeScript