TypeScript: 기초 of 기초

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라고 한다. 

 

type Alias

 

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

 

interface

 

 

 

poiemaweb.com/typescript-introduction

TypeScript - Intro & Install | PoiemaWeb

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

우아한 테크러닝 React&Typescript 1회차