What is TypeScript

TypeScript란 JavaScript의 슈퍼셋이다.

(JavaScript를 상속하는 프로그래밍 언어)

TypeScript는 프로그램의 동작을 로직을 보는 것 만으로도 파악하기 쉽다는 것과, 엄격하지않은 제한처리로 개발하기에 크게 어려움이 없다는 장점이 있다.

하지만 이러한 장점은 큰 기업에서 사용될 경우 단점이 될 수도 있는데, TypeScript는 해당 프로젝트에 대한 상세한 설정을 지원하여, 제한처리에 대한 엄격도를 설정할 수 있게 해준다.

STEP 1. 백문이불여일견, TypeScript 설치를 해보자

# node 에서 실행
# TypeScript 설치 (본 프로젝트에만 적용할 예정이면 global 옵션 제거해도 무방)
npm install -g typescript

# 프로젝트 생성
yarn init

이전에 장점을 언급하면서 상세한 설정을 지원한다고 말했을 것이다.

말 그대로 타입스크립트는 ts파일을 컴파일할 때, JSON형태의 설정파일을 참조하는데, 프로젝트의 루트 디렉토리에 tsconfig.json 파일을 생성하여 설정파일을 만들 수 있다.

STEP 2. TypeScript 설정, 지원 가능한 인자??

TypeScript가 처음이라면 아주아주아주 간단한 설정 옵션부터 진행해보자.

# ./tsconfig.json
# include
# TypeScript 실행 시, 컴파일하여 자바스크립트로 만들 파일 경로를 기재한다.
{
	include: [
		'index.ts',
	  'ts/*'       // 경로도 가능
	],
# exclude
# include와 반대되는 개념으로, 컴파일을 제외할 파일 경로를 기재한다.
	exclude: [
		'node_modules/*'
  ],
}

TypeScript는 어디까지나 컴파일 이전까지의 프로그래밍의 전반적인 과정을 도와주는 언어이다.

TypeScript는 자체 명령어 tsc 를 통해 컴파일을 할 수 있으며, 컴파일을 통해 만들어지게 된 JavaScript를 실행하는 과정은 이전과 동일하다.

그렇다면 이제 컴파일 될 TypeScript 파일을 만들어보자.

STEP 3. TypeScript, 간단한 스크립트 파일 생성

# ./index.ts
# Name: whatAmI
# Description: 내 자신을 설명해주는 함수

const name = 'Lucas',
			age = 24,
			gender = 'male';

const whatAmI = (name, age, gender) => {
	alert(`My Name is ${name}, I am ${age} years old, I am a ${gender}`);
};

# 다음은 whatAmI 함수를 호출했을 때, 각 인자 별로 동작 처리를 케이스로 분류한 것이다.
# Case 1, 모든 인자가 전달되었을 때
whatAmI(name, age, gender);
# 실행 결과: "My Name is Lucas, I am 24 years old, I am a male"

# Case 2, 인자가 전부 전달되지 못하였을 때
whatAmI(name, age);          // gender 인자가 전달되지 않음
# 실행 결과: typeScript Error  // 엄격한 검사 구분으로, 인자가 전부 전달되지 않을 경우 오류 발생 

위 코드로 whatAmI 함수를 선언하고, 인자 전달에 대한 함수의 처리 결과를 확인할 수 있다.

JavaScript로 직접 실행하는 것과, tsc를 통해 컴파일을 진행하여 Type 검사를 먼저 진행하고, 이후 실행하는 것에는 커다란 차이가 있는데, Case 2의 경우에는 tsc 단계에서 오류가 발생할 것이다.

마지막이다. whatAmI 함수의 특정 파라미터에 ? 기호를 추가해보자

# Function Declaration
const whatAmI = (name, age, gender?) => {
	alert(`My Name is ${name}, I am ${age} years old, I am a ${gender}`);
};

# Function Call
whatAmI(name, age);          // gender 인자가 전달되지 않음
# 실행 결과: "My Name is Lucas, I am 24 years old, I am a undefined"

파라미터 뒤에 붙는 ? 기호는 컴파일러에게 해당 파라미터는 함수 호출 시 들어올 수도 있고 안들어올 수도 있다고 미리 알려주는 기능을 한다.

여러분들의 시스템에서도 동일하게 동작했으면 좋겠지만 (VSCode Extension이 필요할 수도..) whatAmI 함수에 마우스를 오버하게 되면, 아마 이러한 내용을 가지고 있는 팝업이 보일 것이다.

function whatAmI(name: any, age: any, gender?: any) => void

해당 함수가 어느 파라미터를 어떠한 타입으로 받는지, 필수적으로 필요한 파라미터인지 알 수 있다.

필자는 이 기능이 TypeScript에서 가장 중요하고 커다란 장점이라고 얘기하고 싶다. (라고 니콜라스가 언급했따..)

위 구문에서 보이는 any(Type) 과 void는 다음 포스트에서 기술하도록 하겠다.

이삼