이번 게시물은 TypeScript에 대해, 왜 타입 시스템을 도입했는지 살펴보도록 하겠습니다 😀

💭 타입스크립트 ?

타입스크립트(TypeScript) : 타입을 위한 구문이 있는 자바스크립트 -> JS + type 👉 코드를 더 읽기 쉽게 만들어줌

• JavaScript

  const hello = "JavaScript"
  function add(x, y) {
  return x + y;
  }
  

const animal = { name: "Choonsik", age: 23, };

- `TypeScript`
```typescript
const hello: string = "TypeScript";
function add(x: number, y: number): number {
  return x + y;
}

interface Animal {
  name: string,
  age: number,
}

const animal: Animal = {
  name: "Choonsik",
  age: 23,
};

⌨️ 코드의 작성법은 크게 바뀌지 않았습니다. ⌨️ 다만, : 과 string , number 로 타입을 미리 지정해 준 형태를 볼 수 있습니다.

TypeScript는 타입을 위한 구문은 변수나, 매개변수, 반환값 같은 값에 타입을 부여합니다. 이때 타입은 데이터의 형태를 의미합니다.

• 데이터의 형태 : JavaScript에서 배운 문자열, 숫자, 객체 등의 자료형을 뜻함

타입을 부여하는 행위를 타이핑(typing) 이라고 표현합니다.

이처럼 코드의 역할을 훨씬 풍부하게 하는데에 큰 역할을 해줍니다. 그러면 굳이굳이굳이... 귀찮게 타입을 입혀가면서 TypeScript를 써야하는지에 대해 알아보도록 하겠습니다.

💭 타입스크립트 왜 쓰는걸까 ?

1. 에러의 사전 방지 2. 코드 가이드 및 자동 완성

JavaScript로 만드는 프로그램의 규모가 점점 커지고, 방대한 코드를 타입 없이 작성하기엔 타입 관련 오류와 오타가 많이 발생하게 되었습니다. TypeScript는 타입 관련 오류와 오타를, 코드를 실행하기 전에 잡아주기 떄문에 실제로 코드를 실행했을 때에는 오류가 나는 경우가 많이 줄어들게 됩니다.

1. 에러의 사전 방지

➣ 코드를 실제로 실행하기 전, 미리 에러를 어느 정도 검출 가능

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

sum(10, 20);

⌨️ 인자 2개를 넘겨 받아야 하는 sum() 함수에서 다음처럼 10 과 20 을 넘겨 호출하는 경우엔 30 을 반환하게 됩니다.

🤔 이때 이 함수에 숫자가 아닌 문자열을 넘기면 어떻게 될까 ?

sum(10, "20");

⌨️ JavaScript에 익숙하다면 결과는 문자열 1020 이라는 것을 알 수 있습니다. ⌨️ But, Java나 C++ 등 변수에 타입을 정하는 언어를 사용하는 사람이 보기에는 이상한 결과일 수 밖에 없습니다. 👉🏻 타입이 없어 유연하기에, 쉽게 개발할 수 있는 JavaScript의 단점이자 장점입니다.
만약 다음처럼 코드에 인자 타입이 정해져있다면, 사전에 실수할 확률도 줄어듭니다.

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

2. 코드 가이드 및 자동 완성

➣ 코드를 빠르고 정확하게 작성할 수 있도록 도와준다는 것이 두 번째 장점

• index.js

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

let total = sum(10, 20); total.toFixed(2);

⌨️ `toFixed()` 는 변수의 타입이 숫자일 때 사용할 수 있는 JavaScript 내장 API입니다.
⌨️ `toFixed(2)` 를 호출하면 숫자를 소수점 둘째자리까지 표시해줍니다. <br/>

- `index.ts`
```typescript
function sum(a: number, b:number) {
  return a + b;
}

let total = sum(10, 20);
total.toFixed(2);

⌨️ IDE에서 toFixed() API 정보를 제공해줌과 동시에 tab 으로 키워드를 자동 완성하도록 도와줍니다. ⌨️ 또한 index.ts 에서 sum() 함수의 반환 타입은 자동으로 number 로 추론됩니다.

💭 타입스크립트에 존재하는 타입들

그림과 같이 다양한 타입들이 존재하게 되는데 이 포스팅에서는 주요 데이터 타입만 알아보도록 하겠습니다.

• string
• number
• boolean
• object
• Array
• tuple
• any
• null
• undefined
• bigint
• symbol
  

1. 문자열 타입 : string

const name: string = "Choonsik";

2. 숫자 타입 : number

const age: number = 23;

3. 진위 타입 : boolean

const isLogin: boolean = false;

4. 객체 타입 : object

const cat: object = { name: "Choonsik", age: 23 };

5. 배열 타입 : Array

➣ 앞서 배운 타입들과는 다르게 배열 타입은 두 가지 방법으로 선언 가능

// 문자열 배열
const companies: Array<string> = ["네이버", "카카오", "인프런"];
const companies: string[] = ["네이버", "카카오", "인프런"];

// 숫자 배열
const cards: Array<number> = [1, 2, 3, 4];
const cards: number[] = [1, 2, 3, 4];

배열의 타입을 정의할 때는 다음 문법으로 타입을 정의할 수 있습니다.

Array<배열의 데이터 타입>
배열의 데이터 타입[]

👉🏻 배열의 타입을 선언할 때는 string[] 형태의 문법을 추천

6. 튜플 타입 : tuple

➣ 특정 형태를 갖는 배열을 의미하며, 배열 길이가 고정되고 각 요소 타입이 정의된 배열을 의미

// 문자열 배열
const items: [string, number] = ["hi", 12];

7. any

➣ 아무 데이터나 취급하겠다는 의미 🚨 가급적으로 쓰지 않는 것이 좋습니다.

const myName: any = "Choonsik";
myName = 23;
const age: any = 23;

⌨️ any 타입으로 지정했기 때문에 초기에는 문자열을 갖지만 이후 다른 데이터 값으로 변경이 가능합니다.

8. null & undefined

null : 의도적으로 값을 비어두고 싶을 때 사용 undefined : 변수를 선언할 때 값을 할당하지 않으면 기본적으로 할당되는 초깃값

const empty: null = null;
const nothingAssigned: undefined; // undefiend 가 초깃값으로 지정될 것

9. bigint

const big: bigint = 100000000n;

10. symbol

const sym: symbol = Symbol("sym");

💭 글을 마치며...

TypeScript가 무엇인지, 왜 쓰는지, 타입에는 무엇이 있는지에 대해 알아보았습니다. TypeScript는 자유로운 JavaScript에 타입을 정확히 명시해주면서 실수할 확률을 줄어주면서 개발할 수 있습니다. 다만, 타입이라는 개념이 도입되면서 어이없게(?) 발생하는 에러들도 많이 있는 것 같습니다.

• tsconfig.json 설정에서 target 을 잘못 지정
• _코드가 길고 복잡해지면서 타입 간에 형식이 맞지 않음 _
• 타입이라는 시스템의 한계가 보여지는 등등.. (물론 그냥 잘하다 보면 이런 고초는 안 겪겠지만!)

그리고 타입을 막무가내로 남발해서 쓰면 안되기도 합니다.

위에서는 any 를 간단하게 소개했지만 any 를 쓰게되면 사실상 TypeScript를 쓰는 목적이 흐려지기도 합니다. 물론, 개발 첫 단계에서 어떤 타입을 쓸 지 명시하기 전, 임시로 any 를 쓰는 경우는 있을 수 있으나 다른 타입들을 타이핑 하는 과정에서 에러가 난다고 남발해서는 안됩니다.

타입이라는 것이 도입되면서 편리함도 있지만, 어떻게 보면 자유도가 떨어지면서 고민해봐야 할 점도 많이 생기는 것 같습니다 🤔