이번 주부터 유데미 'Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS' 강의 스터디를 진행하게 되었습니다.
스터디는 총 4주간 진행되며, 각 주차마다 강의 섹션별로 학습 내용을 나누어 계획을 세웠습니다. 매주 공부한 내용을 포스팅으로 정리하면서 복습할 예정입니다.
◆ TypeScript란?
TypeScript는 자바스크립트의 수퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하면서, 타입 시스템과 클래스, 인터페이스 등 고급 기능이 추가된 프로그래밍 언어입니다.
하지만 타입스크립트 코드는 브라우저에서 바로 실행되지 않습니다. 브라우저가 타입스크립트를 이해할 수 없으므로, 먼저 자바스크립트 코드로 컴파일한 후에 실행해야 합니다. 타입스크립트는 컴파일러 역할을 하며, 작성된 코드를 자바스크립트로 변환합니다.
◆ 왜 TypeScript를 사용해야 할까?
타입스크립트를 사용하면 코드 작성 시 발생할 수 있는 실수를 미리 방지할 수 있습니다. 자바스크립트는 동적 타입 언어이기 때문에 변수의 타입을 명시적으로 지정하지 않으면 타입 관련 오류가 런타임에서 발생할 수 있습니다. 이러한 오류는 코드 실행 중에만 확인이 가능해 디버깅에 많은 시간을 소모하게 됩니다.
하지만 타입스크립트는 정적 타입 언어로, 변수나 함수의 타입을 미리 정의할 수 있습니다. 이를 통해 코드 작성 시 타입 오류를 컴파일 단계에서 미리 파악할 수 있어, 런타임 오류를 줄이고 코드의 안정성을 높일 수 있습니다.
또한 위 이미지의 예시 코드와 같이 예상한 결과와 다르게 출력되는 것을 미리 방지할 수 있습니다.
◆ TypeScript 설치하기
타입스크립트는 프로그래밍 언어지만, 실제로 우리가 설치하고 사용하는 것은 타입스크립트 컴파일러입니다. 컴파일러는 타입스크립트 코드를 자바스크립트로 변환해 줍니다.
sudo npm i -g typescript
설치가 완료되면 `tsc` 명령어를 사용하여 타입스크립트 파일을 자바스크립트로 컴파일합니다.
using-ts.ts
const button = document.querySelector("button");
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;
function add(num1: number, num2: number) {
return num1 + num2;
}
button.addEventListener("click", function() {
console.log(add(+input1.value, +input2.value));
});- `!`는 타입스크립트에게 해당 요소가 null이 아님을 확신시켜 주는 역할을 합니다.
- `as HTMLInputElement`는 형 변환을 통해 `input` 요소가 `HTMLInputElement` 임을 명시합니다.
- `+`는 문자열을 숫자로 변환하는 연산자입니다.
위의 타입스크립트 코드를 자바스크립트로 컴파일하려면 아래 명령어를 실행합니다.
tsc using-ts.ts그러면 `using-ts.js`라는 자바스크립트 파일이 생성됩니다. 이 파일은 자바스크립트 코드만 포함하고 있으며, 타입스크립트의 타입 정보나 형 변환 구문은 제거됩니다.
브라우저는 타입스크립트를 실행할 수 없기 때문에 `using-ts.js` 파일을 `index.html`에서 자바스크립트 파일로 임포트해야 합니다.
◆ TypeScript의 장점
- 타입 시스템 : 타입을 명시적으로 지정할 수 있어 코드가 더 명확하고 개발 중에 발생할 수 있는 오류를 사전에 예방할 수 있습니다.
- 최신 IDE 지원 : 타입스크립트는 많은 최신 IDE에서 내장 지원을 제공합니다.
- 차세대 자바스크립트 기능 사용 : 최신 자바스크립트의 기능을 미리 사용할 수 있도록 도와줍니다. 또한, 컴파일 시 구형 브라우저에서도 동작할 수 있도록 자바스크립트로 변환됩니다.
- 타입스크립트만의 기능 : 인터페이스, 제네릭, 데코레이터 등 자바스크립트에서 지원하지 않는 기능들이 포함되어 있습니다. 이러한 기능들은 컴파일 후 자바스크립트로 변환되지 않지만, 개발자가 코드를 더 정확하게 정의하고 오류를 예방할 수 있도록 도와줍니다.
- 유연한 설정 가능 : 유연한 설정을 통해 프로젝트에 맞는 환경을 설정할 수 있습니다.
◆ 강의 개요
이번 강의에서는 타입스크립트의 기본적인 사용법부터 고급 기능까지 배울 수 있습니다.
- 타입스크립트 기본 - 핵심 타입과 일반 원리, 새 기능
- 컴파일 타입과 설정
- 자바스크립트와의 차이점, TS에서 지원하는 최신 기능
- 클래스와 인터페이스
- 고급 타입과 기능
- 제네릭
- 데코레이터
- 연습 문제
- 네임스페이스와 모듈
- 웹팩과 TS 결합
- 서드파티 라이브러리와 TS
- React + TS & Node.js + Express + TS
◆ 강의 프로젝트 설정
1. `index.html`과 `app.ts` 파일을 생성합니다.
2. 타입스크립트 파일을 자바스크립트로 컴파일합니다.
tsc app.ts3. 프로젝트의 `package.json`을 생성하고 개발 서버를 설치합니다.
npm init
npm install --save-dev lite-server`lite-server`는 간단한 개발용 서버로, 코드 변경 시 자동으로 새로고침 없이 결과를 확인할 수 있게 해 줍니다.
`package.json`의 `"scripts"` 항목에 다음을 추가합니다.
"scripts": {
"start": "lite-server"
}이제 `npm start` 명령어로 개발 서버를 실행하면 됩니다.