[53일차] TypeScript와 Vite

 

 

TypeScript란?

 

타입스크립트(TypeScript)는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트 기반으로 정적 타입 문법을 추가하여 코드의 안정성과 유지보수성을 높이는 것을 목표로 하는 언어이다.

 

왜 JavaScript가 아닌, TypeScript를 사용할까?

 

TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다.

 

이때 컴파일이란 사람이 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정이다.

TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 한 번 변환해 주어야 하는데, 이 과정을 컴파일이라고 한다.

 

컴파일 과정에서 TypeScript는 (1) 타입 체크, (2) 에러 검출, (3) 코드 최적화, (4) ES6+ 문법을 옛 브라우저에서도 돌아가는 JS로 변환하게 된다.

 

TypeScript를 사용하는 이유는 다음과 같다.

1️⃣ 에러를 실행 전에 잡을 수 있다

JavaScript는 코드 실행 시점(런타임)에 에러가 발생한다.

반면, TypeScript는 코드를 작성하는 순간(컴파일) 타입 검사를 통해 에러를 발견하므로 컴파일 에러를 예방할 수 있다.

 

예시)

// JavaScript -> 실행 후 에러 발생
function add(a, b) {
  return a + b
}
add(10, "20") // JS에서는 실행되고 결과는 "1020"


// TypeScript -> 즉시 에러 발생
function add(a: number, b: number) {
  return a + b
} // ❌ b에 string을 넣으면 즉시 에러

 

 

2️⃣ 팀 프로젝트에서 실수 방지 및 의사소통 개선

타입은 이 함수(변수)가 무엇을 받고, 무엇을 반환하는지를 명확히 한다.

그렇기에 다른 개발자들은 해당 코드를 보고 함수(변수)의 이름 뿐만 아니라, 타입(자료형)을 직관적으로 알 수 있기 때문에 높은 생산성을 제공한다.

 

 

3️⃣ 높은 호환성

앞서 말했듯 TypeScript는 JavaScript의 슈퍼 셋이다. 

슈퍼 셋이란 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장된 것인데, TypeScript를 적용하는 경우 기존 JavaScript로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 TypeScript 적용이 가능하다.

 

이러한 이유들로 여러 기업은 TypeScript을 언어로 채택하고 있으며, 실제로 2025년 stack overflow 설문조사에서 5위를 차지할 만큼 선호도가 높은 기술이다.

Stack Overflow 2025년 가장 인기있는 기술

 

 

TypeScript에서 자주 사용하는 타입 정리

형식

`const / let / var 변수명: 타입 = 값`

 

Type 종류

인프런 한입크기로 잘라먹는 타입스크립트 - 이정환님 강의 중 타입 계층도

 

🌵 JavaScript 데이터 타입 🌵

JavaScript 데이터 타입

 

 

원시 타입(Primitive Types)

원시 타입은 값 자체가 메모리에 직접 저장된다.

즉, 값이 복사(Copy by value)되며, 불변(Immutable)이라는 특징을 가진다.

 

• `undefined`: 변수에 값이 할당되지 않은 경우, 즉 의도하지 않은 값의 부재를 의미한다
     예시) `let a: undefined;`
• `null`: null은 의도적으로 값이 없음을 나타낼때 사용한다
     예시) `let b: null = null;`
• `boolean`: true와 false 두 가지 값을 가지고 있는 타입이다
     예시) `let isLoggedIn: boolean = true;`
• `string`: “타입스크립트” 같은 문자열을 의미한다
     예시) `let name: string = "TypeScript";`
• `number`: 이름처럼 숫자를 의미한다. 숫자는 123과 같은 정수, 1.23 같은 부동소수점, 16진수, 8진수도 숫자 타입이다
     예시) `let age: number = 23;` , `let hex: number = 0xff;`
  
  
• `bigint`
  • 매우 큰 숫자도 할당할 수 있는 타입이다
  • 숫자 뒤에 n을 붙여서 123n으로 표시한다
  • ES 2011부터 지원한다
  • 예시) `let bigNum: bigint = 123456789123456789n;`
• `symbol`: 불변이면서 유니크한 값을 표현하는 자료형이다
     예시) `const sym = Symbol("id");`

 

Optional (`?`) 옵션

원시 타입과 함께 자주 쓰이는 문법으로, 특정 속성이 있을 수도 있고 없을 수도 없다는 의미이다

interface User {
  name: string;
  age?: number; // 없으면 undefined
}

 

 

 

참조 타입(Reference Types)

참조 타입은 값이 아닌 "메모리 주소"를 저장한다.

즉, 복사할 경우 주소를 복사하기 때문에 동일한 데이터를 공유하게 된다.

1️⃣ 객체 (Object)

 

- interface

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

- type 

type User = {
  name: string;
  age: number;
};

 

- interface 확장

interface Student extends User {
  grade: number;
}

 

 

 

2️⃣ 배열 (Array)

const nums: number[] = [1, 2, 3];         // 방법 1 
const nums2: Array<number> = [1, 2, 3];	  // 방법 2

 

 

객체 배열로도 가능하다

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

const idols: Info[] = [
  { name: "뉴진스", age: 2022 }
];

 

 

3️⃣ 튜플 (Tuple)

 

- 여러 타입을 순서대로 가진 "고정된 길이"의 배열이다

const tuple: [string, number] = ["ureca", 3];

 

 

4️⃣ 함수 (Function)

let greet: (name: string) => void;

 

 

(기타) 복합 타입

 

- Union 타입 ( | ) : "여러 타입 중 하나"를 허용한다

let value: string | number;

 

- Intersection 타입 ( & ) : "두 타입 모두 가진" 타입이다

type Cup = { size: string };
type Brand = { brandName: string };
type BrandCup = Cup & Brand;

 

- Literal 타입 : 정해진 값만 사용 가능하게 제한한다

type CoffeeSize = "small" | "medium" | "large";

 

 

❗️any (비추천)❗️

any 타입은 타입 검사를 우회하므로 지양한다.

let anyVal: any = 10;
console.log(typeof anyVal); // number

anyVal = "hello";
console.log(typeof anyVal); // string

아마 최악의 버튼이 될지도 ..

 

React에서 TypeScript 사용 예시 모음

1️⃣ Props 타입 지정

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

function User({ name, age }: UserProps) {
  return <div>{name} - {age}</div>;
}

 

 

2️⃣ useState 타입 지정

const [count, setCount] = useState<number>(0);

interface User { name: string; email: string; }
const [user, setUser] = useState<User | null>(null);

 

 

3️⃣ 이벤트 타입 지정

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {};
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {};

 

 

4️⃣ children 타입 지정

interface CardProps {
  children: React.ReactNode;
}

function Card({ children }: CardProps) {
  return <div>{children}</div>;
}

 

 

 

5️⃣ API 응답 타입

interface Todo {
  id: number;
  title: string;
}

const [todos, setTodos] = useState<Todo[]>([]);

 

 

6️⃣ useRef 타입 지정

const inputRef = useRef<HTMLInputElement>(null);

 

위처럼 TypeScript를 사용하여 타입을 지정할 수 있다.

 

 

 

---

Vite란?

Vite는 프론트엔드 개발 환경을 위해 만들어진 빌드 도구(Build Tool)로, 기존 번들러(Webpack 등) 보다 훨씬 빠른 개발 속도를 제공하는 것을 목표로 한다.

React, Vue, Svelte 등 다양한 프레임워크에서 사용한다.

 

 

---

회고

프로젝트를 진행하면서 React + Vite + TypeScript 조합을 사용해 봐서 코드 작성법은 알고 있었으나, 개발에 급급해 왜 사용하는지도 모르고 사용했던 부끄러운 기억이 있다.

 

타입 지정할 때도 첫 프로젝트에서는 컴포넌트가 워낙 많다 보니 import 해서 사용하기보다는 컴포넌트 내에 interface props로 작성해서 바로 사용하다 보니, 비슷한 변수명을 가진 변수들끼리 다른 타입을 가지고 있던 둥 골치 아팠던 적이 있었다.

 

이를 계기로 두 번째 프로젝트에서는 타입 명시를 잘하려고 노력했으나, 솔직히 개념 자체를 깊이 공부하지를 않았어서 얼레벌레 사용했던 것 같다.

 

그러나 이제는 TypeScript가 왜 필요한지, 어떻게 작동하는지에 대해 배우고 TIL을 정리하면서 추가적으로 공식 문서를 보면서 작성했기 때문에 이번 돌아오는 프로젝트에서는 타.신 (타입스크립트 신)이 되려고 노력할 것이다.