프론트엔드Explorer

TypeScript는 왜 사용할까?

버그를 줄일 수 있기 때문에 유지보수가 쉬워지고, 이는 곧 질 좋은 코드이니까! 

TypeScript는 JavaScript의 Superset!

TypeScript는 완전히 새로운 언어가 아니다. 

JavaScript를 기반으로 한 언어라는 뜻. 

TypeScript는 JavaScript 코드를 보다 쉽게, 강력하게 작성하도록 도와주는 좀 더 나은 버전의 JavaScript이다. 

TypeScript의 특징: 타입 표기

JavaScript와는 달리, 변수를 정의할 때 데이터 타입을 지정할 수 있다. 

타입을 표기하면 코드가 좀 더 예측 가능하며, 디버깅하기가 쉽다. 

아래 코드를 보면, 왜 타입을 표기하는 것이 좋은지 알 수 있다. 

// JavaScript
function add(a, b){
	return a + b; 
}

console.log(add('3', '5')); // 결과는 35, 어떤 에러 메시지도 출력하지 않음


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

console.log(add('3', '5')); // 컴파일 에러 메시지 출력

JavaScript로 작성된 코드는 argument가 string이라도 어떤 에러 메시지도 출력하지 않고,

string을 합쳐버린다. 

반면, TypeScript는 parameter의 type이 number이기 때문에, 

argument에 string을 넣은 경우, 컴파일 에러 메시지를 출력한다. 

*컴파일 에러는 무엇일까?

말그대로, 컴파일 시 나타나는 에러이다. 

컴파일은 어떤 언어의 코드를 다른 언어로 바꿔주는 변환 과정이다. 

TypeScript는 JavaScript 환경에서 실행될 수 없다. 

왜냐하면, JavaScript가 실행될 수 있는 브라우저가 TypeScript 코드를 이해하지 못하기 때문이다. 

그래서 TypeScript로 작성된 코드는 JavaScript로 컴파일 되어야 한다. 

즉, TypeScript는 프로그래밍 언어이자, TypeScript를 JavaScript로 바꿔주는 컴파일러이다!

이 포스팅은 아래 링크를 참고하여 작성했습니다.

https://www.youtube.com/watch?v=VJ8rvsw2j5w&t=211s

TypeScript는 왜 만들어졌나?

JavaScript는 C나 Java와 같은 C-family 언어와는 구별되는 특성이 있다. 

- Prototype-based Object Oriented Language 

- Scope와 this 

- 동적 타입(dynamic typed) 언어 or 느슨한 타입(loosely typed) 언어 

이와 같은 특성은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며, 코드가 복잡해질 수 있고, 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다. 특히 규모가 큰 프로젝트에서는 주의하여야 한다. 

이런 Javascript의 태생적 문제를 극복하고자 AltJS(JavaScript의 대체 언어)가 등장하였다. 

TypeScript 또한 JavaScript의 대체 언어의 하나로, JavaScript(ES5)의 Superset(상위확장)이다.

TypeScript는 ES5의 Superset이므로 기존의 Javascript(ES5) 문법을 그대로 사용할 수 있다. 또, ES6의 새로운 기능을 사용하기 위해 Babel 같은 별도의 transpiler를 사용하지 않아도, ES6의 새로운 기능을 기존의 JavaScript 엔진(현재 브라우저 or Node.js)에서 실행할 수 있다.   

TypeScript 기초 of 기초

TypeScript와 JavaScript의 차이 

- TypeScript는 JavaScript와 달리 Type을 적는다. 

- JavaScript는 약타입 언어, TypeScript는 강타입 언어 

타입은 왜 적을까? 

- 코드가 조금 길어지더라도 명시적인 코드가 더 좋아서  

- 타입이 있으면, 코드를 읽을 때 이해하기가 더 쉬워서 

- TypeScript는 transpile 때 오류를 찾을 수 있어서 

암묵적 타입 vs 명시적 타입 

타입을 지정해주지 않으면, 알아서 타입을 추론해 타입을 대입한다. 하지만, JavaScript와는 달리 다른 타입을 같은 변수에 대입하려고 하면 오류가 발생한다. 이것은 명시적으로 작성한 변수에서도 마찬가지다. 

명시적으로 작성하기 

예전 JavaScript 개발자들은 암묵적인 코드를 많이 작성했다. 하지만 그런 방식은 코드를 이해하기 힘들게 만든다. 그래서 요즘에는 아래와 같이 arguments를 사용해서 함수를 작성한다고 한다. (*spread operator를 사용하는 이유는 arguments가 몇 개인지 딱 정해지지 않기 때문이다.) 

function bar(...args){
  console.log(args[0], args[1]);
  return 0; 
}
bar(10, 20); 

기본적인 타입

- 변수 뒤에 선언된 number는 숫자 전체를 나타내는 타입

- 조금 더 범위를 좁히고 명확하게 타입을 나타내는 방법은 line 6처럼 'type Age'와 같이 타입을 선언하는 것 

- Age는 나이라는 타입을 나타낸다. 나이는 숫자여야 하기 때문에 'type Age = number'로 선언함 

TS compile

- TypeScript는 컴파일해서 JavaScript 파일이 된다. 프로그램은 컴파일된 JavaScript 파일이 실행되어 돌아간다. 

- 타입은 TypeScript에서 JavaScript로 컴파일될 때 사용된다. 컴파일 된 JavaScript는 우리가 아는 JavaScript와 똑같다. 즉, 그곳에는 타입이 없다. 

- TypeScript에서 컴파일 된 JavaScript가 실행될 때 작동되는 것도 있다. 

객체 타입

객체의 타입을 선언할 때는 아래 코드처럼 표현하고자 하는 객체와 동일 구조를 가진 타입을 선언하면 된다. 이러한 방식을 type Alias라고 한다. 

객체의 타입을 선언하는 방법은 하나가 더 있다. interface는 아래 코드처럼 type 대신 interface를 사용해 선언할 수 있다.

poiemaweb.com/typescript-introduction

velog.io/@wooder2050/%EC%9A%B0%EC%95%84%ED%95%9C-%ED%85%8C%ED%81%AC%EB%9F%AC%EB%8B%9D-ReactTypescript-1%ED%9A%8C%EC%B0%A8