타입스크립트 자바스크립트 차이 - taibseukeulibteu jabaseukeulibteu chai

Javascript

- HTML 및 웹 개발에 가장 많이 사용되는 프로그래밍 언어

- 메모리 측면에서 가볍고, 크로스 플랫폼 개발을 지원하는 객체 기반 스크립팅 언어

- 웹 사이트의 클라이언트 쪽 동적 페이지를 만드는데 적합

- HTML 페이지에서 사용되고, 페이지가 로드될 때 자동으로 실행

- 일반 텍스트로 제공 및 실행

- 실행을 위한 별도의 준비나 컴파일이 필요하지 않음

특징

1. 서버 커뮤니케이션

- 페이지를 서버에 전송하기 전, 사용자 입력의 유효성을 검사하는 옵션 제공

2. 상호 작용

- 마우스 hover 시 나타나는 인터페이스 등

3. 낮은 reloading 속도

- 코드를 즉시 참조하므로 개발자가 업데이트한 사항을 페이지가 다시 로드될 때 까지 기다리지 않고 바로 볼 수 있음

4. 날짜와 시간

- 시간에 의존하는 provision of a greeting user를 제공

Javascript 사용 방법

1. HTML 파일에서 Javascript 코드를 사용하는 방법

2. script 태그(<script></script>) 내에서 호출할 수 있는 별도의 Javascript 파일 생성

Typescript

- 오픈 소스기반 객체 지향 프로그래밍 언어

- Javascript 파일로 컴파일됨

- 강력한 타입을 갖는 Javascript superset

- 브라우저에서 직접 실행되지 않음 (Javascript로 컴파일 필요)

- 확장자 : ts

- js 파일을 ts 파일로 변경해도 유효

※ ES6 버전의 Javascript는 Javascript임

특징

1. 기본 특징

- Elementary building block은 Javascript에서 사용되는 코딩 구조를 구현

- Typescript를 알기 전에 Javascript를 알아야 함

- 코드를 실행하려면 Javascript로 변환 필요

2. Portable

- Javascript가 문제없이 실행될 수 있는 환경에서 Typescript도 쉽게 실행 가능

- 많은 브라우저와 호환

- 특정 가상 머신이나 런타임 환경이 필요하지 않음

3. Transpiler

- Transpiler가 Typescript에서 오류 검사 기능을 제공

- 컴파일러에서 실제 스크립트를 실행하기 전에 코딩 오류에 집중 가능

- 코딩하는 동안 코드를 컴파일 하고, 컴파일 오류를 생성하기 때문에 가능

4. Type cheking

- 정적 타입 검사 가능

- 컴파일 타임에 완료됨

- 코드를 입력하는 동안 누구나 오류를 찾을 수 있으므로, 실제 코드가 실행될 때까지 기다릴 필요가 없음

5. DOM 관리

- DOM Typescript에서 요소를 추가/제거하는데 유용

Typescript 사용 방법

- ts 확장자를 가진 파일에 Typescript 코드 작성 가능

- 모든 코드 편집기에서 작성 가능

- Javascript 파일로 변환되면 HTML에 포함되어 모든 부라우저에 실행 가능

어느 것을 사용하는 것이 더 좋을까?

- Javascript는 비교적 작은 프로젝트에 적합하고, Typescript는 대규모 프로젝트에 적합

- Typescript는 객체지향 언어이므로 코드 재사용, 단순, 깨끗, 일관성 등 다양한 장점을 가짐

출처

- https://medium.com/@infinijith/javascript-vs-typescript-which-is-better-2020-updated-871866a3c68c

ice rabbit programming

타입스크립트란

자바스크립트가 가진 다른 C계열 언어들과의 차이는 크게 두 가지라고 개인적으로 생각한다. 첫 번째로는 비동기, 두 번째는 타입이다.

이 중에 동적 타입은, 자바스크립트만의 특징은 아니다. 파이썬과 같이 런타임에 정해지는 스크립트 언어도 존재한다. 어쨌거나 그런 이유로, 컴파일 언어와는 다르게 정적 타입으로 사전에 체크할 수가 없었고, 이를 해결하고 실행 전 단계에서 에러를 최대한 거르고자 여러가지 방법이 나왔다. 그 중 하나가 바로 타입스크립트이다.

타입스크립트는 자바스크립트의 상위호환(SuperSet)으로, 단순하게 생각하면 타입을 가진 자바스크립트의 느낌이다. 거기에 class, interface 등을 추가해서 자바나 C#과 같은 OOP 프로그래밍을 할 수 있다. 인터프리터 언어인 자바스크립트와는 다르게 컴파일 언어인데, 전통적인 C계열의 컴파일 언어와는 차이가 있어 트랜스파일 언어라고도 부른다.

동작 방식은 TS -> (컴파일(트랜스파일)) -> JS -> (실행) 과 같이 이루어지는데, TS가 JS로 변환될 때 helper 코드가 위아래로 추가되기 때문에, 절대적인 코드의 양 자체는 타입스크립트가 더 많다. 물론 개발자는 타입스크립트만 작성하고, 변환은 알아서 해 주므로 개발할 때 크게 문제되는 부분은 아니다.

ts config파일을 통해 JS 파일 변환 시의 설정(경로, 버전 등)을 할 수 있다. 자세한 정보는 https://json.schemastore.org/tsconfig에서 확인할 수 있다.

아래는 가장 보편적인 예시이다.

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum);

자바스크립트였다면 add에 어떤 타입이 들어가도 에러 검출을 하지 못 했겠지만, 타입스크립트에서는 add('a','b'); 와 같은 식으로 작성하면 타입이 맞지 않아 컴파일을 할 수 없다(C계열과 동일하게 IDE에서 빨간 줄이 나온다).

타입스크립트의 타입

우선 타입에 대해서 살펴보자면, 자바스크립트의 기본 자료형(null, Array, Boolean, Number 등)을 모두 포함하고, Any, Void, Never, Enum 등의 타입이 더 제공된다.

• Primitive type : 실제 값을 저장하는 자료형. 자바스크립트와 같고, 내장 함수도 사용할 수 있다(ex. name.toString()).
• literal : 변하지 않는 값. const와는 약간 다르고, 35와 같은 숫자 자체를 가리킨다.
• null & undefined : 아무 타입에나 들어갈 수 있고, 체크를 strict하게 설정하면 void나 본인들에게만 할당하게 설정할 수도 있다. 둘의 차이는 null은 사용할 준비는 되었으나 값이 할당되지 않음(객체 생성됨), undefined는 객체 자체가 존재하지 않는다. 없는 멤버에 접근할 때 undefined가 나오는 것을 볼 수 있다.
• Any : 말 그대로 어떤 타입이어도 상관없는 타입인데, 타입스크립트를 쓰는 의미가 퇴색된다. 예를들어
  function add (a: Any, b: Any) { ... 와 같다면 아무거나 들어가도 되는데, 이러면 자바스크립트를 그냥 쓰는 것과 차이가 없다.
• Symbol : 고유하고 수정불가능한 값으로, 접근 제어에 주로 사용한다.

변수 선언하기

자세한 내용은 지난 글을 참조하자.

• var : ES5까지 쓰던 변수 키워드로, 함수 스코프에서 유효하다. 재선언도 가능하고, 호이스팅도 가능하다.
• let, const : ES6부터 쓰는 변수 키워드로, 블록 스코프에서 유효하다. 재선언 불가, 호이스팅 불가.

결론적으로는 let과 const를 사용하는 편이 좋다.

추가적으로 let과 const의 차이에 대해서 보자면, let의 타입추론은 일반적 타입이 된다. 즉
let b = 'hi' // string
이렇게 추론이 되는 반면, const는 literal로 타입추론이 된다.
const d = 'hi' // type : 'hi'

그 외 타입에 관한 정보

• Type Assertion : 컴파일러에게 타입을 알려주는 것으로, 다른 컴파일 언어에서 사용하는 캐스팅과는 다르다. 캐스팅은 실제 데이터 구조를 바꾸는 것이고, Type Assertion은 단순히 컴파일러에게 알려주는 용도이다. 아래 두 가지 방법이 있다.
  1. 변수 as 강제타입
  2. <강제타입> 변수
• Type Alias : 타입의 별칭으로, type의 reference이다. C++에서의 변수 alias와 유사하다.
• Union Type : 여러 타입을 허용하는 것으로, Any의 하위호환으로 볼 수 있다. 단순한 개념이다.
  ex) let b: string | number; // string 및 number 타입 허용

Type Alias와 Union Type을 함께 사용하면, 다음과 같이도 사용할 수 있다.

type StringOrNumber = string | number; // Type Alias
let b: StringOrNumber; // Union Type by Type Alias