[TypeScript] Section 1. TypeScript 시작하기 및 기초(1)

📍 TypeScript란?

타입스크립트란 자바스크립트에 타입을 부여한 언어이다. 즉 자바스크립트의 값의 type, documentation 등을 한 눈에 확인할 수 있는 언어이다. 자바스크립트와는 달리 브라우저에서 실행하기 위해 파일을 한 번 변환해주는 컴파일 과정이 필요하다.

---

📍 TypeScript를 쓰는 이유?

1️⃣ 에러 사전 방지

타입스크립트를 사용하면 서버에서 받아 온 혹은 어떠한 경로로든 받아 온 데이터의 타입 혹은 형상에 대해 알지 못하고 접근하게 될 경우 혹은 데이터에 접근할 때 오탈자가 났을 경우에 발생하는 에러들을 사전에 방지할 수 있다!

자바스크립트에서는 객체로 구성되어 있는 어떠한 값에 접근하여 화면에 렌더링 하려는 경우, 접근 과정에서 오타가 있더라도 브라우저는 문제 없이 렌더링이된다. 이 경우 화면을 직접 보며 원하는 값이 화면에 나타났는지 아닌지와 console창에 나타나는 에러메세지 등을 통해 오류 발생여부를 확인하게 된다.

➡️ 타입스크립트에서는 미리 데이터의 type을 지정해 둘 경우 객체의 key값에 따른 value값들을 자동 완성을 통해서 확인해볼 수 있다! 즉 오탈자를 줄일 수 있게 되고, 브라우저에 console을 찍으며 값을 확인해보지 않고 코드 상에서 값을 확인해보며 에러를 사전에 방지할 수 있게 된다.

✅ 코드 예시를 통해 확인해보자

// JavaScript
function sum(a,b) {
	return a+b;
}
sum(10, '20') //1020

// TypeScript
function sum(a: number, b: number): number {
	return a+b;
}

sum(10, '20') 
// Argument of type 'string' is not assignable to parameter of type 'number'

위와 같이 number type을 지정해 둔 값에 string을 넣을 경우, 타입스크립트는 Type error를 던져주는 반면 자바스크립트는 문자열로 인식하여 연산한 결과를 return 한다.

2️⃣ 코드 자동 완성과 가이드

타입스크립트에서는 지정된 타입에 따라서 해당 타입에서 기본적으로 제공하는 모든 메소드들을 자동완성으로 추천받을 수 있다!

✅ 코드 예시를 통해 확인해보자

위와 같이 number type이 지정된 result 값에 접근할 경우 number와 관련된 메소드들을 자동완성으로 추천해주는 것을 볼 수 있다!

---

📍 TypeScript 프로젝트 시작하기

1️⃣ TypeScript -> JavaScript 컴파일

아직은 타입스크립트 파일을 브라우저가 바로 인식하고 변환하지 못하기 때문에 타입스크립트를 자바스크립트로 변환하는 컴파일 과정을 거쳐야한다.

이를 위해 터미널에 관련된 명령어를 작성해야 한다.

1. npm i typescript -g : tsc라는 명령어를 사용하기 위해 설치
2. tsc 파일이름 (ex. tsc index.ts)

이 작업을 마치면, ts파일과 같은 이름의 js파일이 만들어진다.

2️⃣ 컴파일 옵션 파일 지정하기 (심화 / 선택)

타입스크립트 -> 자바스크립트로 컴파일 할 때 부가적인 옵션들을 지정하기 위해서 **타입스크립트** 설정 파일 만들어 활용할 수 있다.
TS가 처음인 나는 일단 알아만 두고 넘어가려 한다 ...

이를 위해선 tsconfig.json를 만들고 내부에

// tsconfig.json
{
  // 컴파일 할 때의 부가적인 옵션 지정하기
  "compilerOptions": {
    "allowJs": true, // 이 프로젝트 안에서 JS를 허용한다
    "checkJs": true, // JS에서 TS의 기능들 활용을 허용한다
    "noImplicitAny": true // 모든 type에 대해서 최소한 any라도 지정해야 한다
  }
}

위와 같이 key-value 값으로 옵션을 지정하여 사용하면 된다.

TypeScript 공식문서 - TSConfig Reference
TypeScript Playground : tsc를 돌렸을 때 변환된 결과물을 온라인 상에서 바로 확인할 수 있는 링크

---

📍 TypeScript의 기본 타입

기본적으로 타입스크립트의 변수를 지정하는 방법은 다음과 같다.

let varName: typeName = value

varName : 변수 이름
:
typeName : typescript의 type들
value : 지정값

✅ TS 문자열 선언

// JS 문자열 선언
// var str = 'hello';

// TS 문자열 선언
let str: string = 'hello';

✅ TS 숫자 선언

// TS 숫자
let num: number = 10;

✅ TS 배열 선언

// TS 배열
// 배열 요소들의 type을 지정할 수 있다
let arr: Array<number> = [1,2,3];
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10] // number가 있으므로 에러 발생
// 배열 리터럴로 선언한 방식 (Array<>로 선언한 것과 동일)
let items: number[] = [1,2,3];

✅ TS 튜플 선언

// TS 튜플
// 배열과 같이 전체에 대한 type을 지정하는 것이 아니라
// 배열 값들의 type 위치(순서)를 지정할 수 있다
// 즉 모든 index에 Type이 지정되어 있는 배열
let address: [string, number] = ['gangnam', 100];

✅ TS 객체 선언

// TS 객체
// 간단하게 object type만 지정하여 사용할 수 있고
let obj: object = {};
let person1: object = {
  name: 'capt',
  age: 100
};
// 객체의 값들에 각각 Type을 지정하여 사용할 수도 있다.
let person2: { name: string, age: number } = {
  name: 'thor',
  age: 1000
}

✅ TS boolean 선언

// TS 진위값
let show: boolean = true;