Javascript 와 Typescript 문법 차이

JavaScript와 TypeScript 문법의 가장 큰 차이는 '타입 명시' 입니다. 

 

TypeScript는 JavaScript가 실행되기 전에 코드의 오류를 더 잘 찾을 수 있도록 '어떤 종류의 데이터'가 사용될지 미리 알려주는 문법들을 추가했습니다.

쉽고 간단하게 주요 차이점을 설명해 드릴게요!

---

---

1. 변수와 상수에 '타입'을 명시하는 문법

---

JavaScript: 

 

변수를 선언할 때, 이 변수가 숫자 데이터를 가질지, 문자열 데이터를 가질지 등을 미리 정해두지 않습니다. 

어떤 값이든 자유롭게 넣을 수 있습니다.

let 이름 = "김철수";  // 문자열 할당
let 나이 = 30;      // 숫자 할당
// 나중에 `이름 = 123;` 처럼 숫자를 넣어도 문법적으로는 문제가 없습니다.

---

TypeScript: 

 

변수명 뒤에 : (콜론)과 함께 타입을 명시하여, 이 변수에는 정해진 타입의 값만 올 수 있다고 미리 알려줍니다.

let 이름: string = "김철수";  // 이 변수에는 '문자열(string)'만 올 수 있다고 명시
let 나이: number = 30;      // 이 변수에는 '숫자(number)'만 올 수 있다고 명시

// 이름 = 123; // (X) TypeScript는 여기서 '오류'를 알려줍니다. (숫자를 문자열 변수에 넣을 수 없음)

차이점: 

TypeScript는 개발자가 의도하지 않은 다른 타입의 값이 들어오는 것을 코드를 실행하기 전에 미리 막아줍니다.

---

---

2. 함수의 '입력(매개변수)'과 '출력(반환 값)'에 타입 명시하는 문법

---

JavaScript:

 

함수가 어떤 종류의 값을 입력받고, 어떤 종류의 값을 반환할지 명시하지 않습니다.

function 더하기(a, b) {
  return a + b;
}

// 더하기(10, "20");  // (X) 숫자 10과 문자열 "20"을 더하면 1020 이 됩니다. (원하던 결과가 아닐 수 있음)

---

TypeScript: 

 

함수의 매개변수 옆에 :와 타입을, 함수 괄호 뒤에 : 타입으로 반환 값의 타입을 명시합니다.

function 더하기(a: number, b: number): number { // a와 b는 '숫자(number)'여야 하고, 반환 값도 '숫자(number)'여야 한다고 명시
  return a + b;
}

// 더하기(10, "20"); // (X) TypeScript는 여기서 '오류'를 알려줍니다. (매개변수 b는 숫자여야 하는데 문자열이 왔다고 경고)

 

차이점: 

함수가 어떻게 사용되어야 하는지 명확하게 정의하여, 잘못된 타입의 데이터를 입력하는 실수를 방지하고 예측 가능한 코드를 만듭니다.

---

---

객체의 '모양(구조)'을 미리 정의하는 문법 (인터페이스/타입 별칭)

---

JavaScript:

객체가 어떤 속성들을 가져야 하는지 미리 정의하는 특별한 문법이 없습니다.

const 사용자1 = {
  이름: "이영희",
  나이: 25
};

// 사용자2에 '나이' 속성이 없어도 JavaScript는 기본적으로 허용합니다.
const 사용자2 = {
  이름: "박찬호"
};

---

TypeScript: 

 

interface나 type이라는 키워드를 사용해서, 특정 객체가 어떤 속성(이름, 타입 등)을 반드시 가져야 하는지 '설계도'처럼 미리 정의할 수 있습니다.

interface 사용자정보 { // '사용자정보'라는 객체는 '이름(문자열)'과 '나이(숫자)' 속성을 반드시 가져야 한다고 정의
  이름: string;
  나이: number;
}

const 사용자1: 사용자정보 = {
  이름: "이영희",
  나이: 25
};

// const 사용자2: 사용자정보 = { // (X) TypeScript는 여기서 '오류'를 알려줍니다: '나이' 속성이 누락됨
//   이름: "박찬호"
// };

 

차이점: 

객체를 만들 때 정해진 규칙을 따르도록 강제하여, 객체를 잘못 사용하는 것으로 인한 오류를 줄이고 코드의 일관성을 유지합니다.

---

---

요약: 

 

JavaScript는 자유롭고 유연하게 코드를 작성하지만, TypeScript는 여기에 '타입'이라는 개념을 도입하여 코드를 더 체계적이고 안정적으로 만드는 문법들이 추가되었습니다. 

이 타입 문법 덕분에 코드가 실행되기 전에 많은 오류를 미리 잡을 수 있고, 코드를 이해하기도 더 쉬워집니다.

---