1. 타입스크립트란 ?

목차

• Typescript 간단 소개
• Typescript vs Javascript 비교
• 왜 Typescript을 사용해야하나?

---

TypeScript is JavaScript with syntax for types.

JavaScript With Syntax For Types.

어려워 할 필요없다.

편의를 위해 자바스크립트에 타입이 추가되었을 뿐

SuperSet: JS의 모든 기능을 포함하고 있다.

---

Typescript vs Javascript

Type

Typescript는 정적 타입

Javascript는 동적 타입

타입이란 ?

• 위에서는 자료형을 의미함!

예시

• Javascript : 별다른 문제 없이 값이 할당된다.

let num = 3;
num = '삼';

동적 : 움직인다.

Javascript는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능하다.

• Typescript : 아래 사진과 같이 오류가 난다.

let num = 3;
num = '삼';

처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러가 난다.

Time

Typescript는 변수의 타입이 컴파일타임에 결정된다

Javascript는 변수의 타입이 런타임에 결정된다

컴파일타임? 런타임?

• 컴파일 타임 (compile time) : 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정
• 런타임 : 프로그램이 실행되는 과정

IDE(VS Code)에서는 컴파일 타임에서 에러가 날 상황을 빨간줄로 미리 알려준다.

따라서 Javascript는 여러분의 react 프로젝트를 실행하기전 어떤 오류가 있을 지 알 수 없으나, Typescript는 에러가 날 상황을 미리 여러분의 IDE(vscode)가 알려준다.

---

Typescript를 왜 쓸까?

	장점	단점
Typescript	1. Microsoft에서 만들었고 꾸준히 업데이트한다 2. 생태계가 크다 3. Microsoft에서 개발한 vscode와 잘 맞는다 4. 여러분이 사용하는 대부분의 lib에서 타입 정의 파일을 제공한다 5. 유지보수가 JS보다 유리하다	1. Javascript에 비해 어렵다
Javascript	1. 다른 언어에 비해 쉽다 2. 적은 양의 코딩을 할 때 쉽고 빠르게 가능	1. 런타임 시 오류가 검출 2. 프로젝트 사이즈가 커지면 유지보수가 어렵다

생산성(유지보수)가 왜 유리할까?

const person = {
  name: 'js',
  gender: 'man',
};

console.log(person.age);

• 에러 발생
  • 정적 타입 언어인 TS는 IDE에서 person의 타입을 알기에 에러를 발생시킨다.
  • 동적 타입 언어인 JS는 IDE에서 알 수 없다.
• 자동 완성