1. Typescript 특징과 JS 대비 차이, '타입' - 노마드 코더 강의정리

JS챌린지 마치고 노마드코더의 Typescript 강의를 듣는다.

지난번엔 포기해서 두번째 듣는데, 이번은 성공하길🥰 Javascript와 이름도 비슷한데 특징과 장점을 정리해본다.

 

 "TypeScript 특징과 장점, JS와의 차이점과 '변수 정의'에 대해 정리한다."

 아래 내용은 노마드코더의 Typescript 강의 내용을 제가 나중에 찾아볼 때를 대비해 정리한 내용입니다.
 오늘 포스팅은 강의 #1.2 ~ 2.1 정리내용
 ㅇ 강의 원본 링크  -  https://nomadcoders.co/typescript-for-beginners/lectures/3664 

1. TypeScript?
타입스크립트(TS)는 자바스크립트(JS) 기반 언어로, JS가 가진 여러 문제를 해결하고 보완키 위한 언어. 더 나은 개발자 경험을 갖게 해준다.

노마더코더의 Typescript 강의는 아래 두가지 목적때문이라고 설명한다. 강의들을 분 있다면 참고해보시길.

  - 더 나은 개발 경험과 생산적 개발을 원하는 JS개발자를 위한 강의

  - Type에 익숙한 개발자를 위한 강의. Java 나 C# 같이 타입 안정성에 있어서 개발경험 향상시켜줌. 

Typescript 개발은 node.js만 설치되어 있으면 되지만,

TypeScript코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환 가능하다.

VS Code나 TS도 MS에서 만든 거라 IDE로 함께하면 생산성이 향상된다.(같은 MS에서 개발된것이라 궁합이 좋다)

 

타입스크립트 만들어진 이유?

이름이 모든걸 설명한다. 타입안전성 때문! TS는 JS에 비해 실행 후 발생하는 런타임에러를 감소시킨다. 

JS는 매우 유연한 언어로, true/false, boolean, number, string 같은 type은 존재하지만 에러를 잘 보여주지 않는 언어다.

개발자들한테는 실행 후에 오류가 발생하니 오히려 안좋은데, 아래와 같이 이상한 문법도 정상처리됨.

 

형이 다른 배열과 boolean간 덧셈이 에러없이 가능한 화면.

개발자 의도가 잘못되었을텐데, string으로 전환된 결과이다. 

 

function divide(a,b) 도 마찬가지로

a,b 라는 number 형식 변수 두개를 받아야 정상적인 결과가 나온다.

 

하지만 좌측 이미지의 맨 하단 처럼,

string 형식 변수 한개만 입력해도

JS선 별다른 오류가 나오지 않는 상황이다. 

 

 

 

JS는 위처럼 실행시 데이터 조건 제한을 두지 않아, 실제 에러여도 개발자는 어떤 문제인지 영문을 모르게 됨.

아래처럼 JS는 코드를 실행한 후에 발생하는 오류가 아니라, 실행전부터 잘못됐다고 알려주는 오류가 표기되어야 개발 생산성이 향상된다. Typescript 는 컴파일 이후 javascript로 변환되고, TS에 오류있다면 JS로 컴파일 되지 않는다.

☞ 이것이 타입스크립트를 사용하려는 이유!

 

2. 타입스크립트는 어떻게 생겼고 어떻게 작동할까?

코드 실행하면 나오는 에러는 '런타임에러'이지만, JS는 사용자, 유저에게 런타임에러를 보이는게 단점.

이상적으로, 코드 실행전에 오류를 확인하고 싶기 때문에 Typescript를 사용하는 것. 

 

Typescript는 strongly typed(강타입) 프로그래밍 언어.

C#, Java, Go, Rust 같은 언어를 배웠었다면 프로그래밍 언어라 할 때 컴파일러를 떠올린다.

이런건 컴파일 후 어셈블리나 바이트코드가되나, TS는 코드가 JS로 변환된다. 

변환하는 이유는 브라우저는 TS가 아닌 JS를 이해하기 때문. 

Node.js는 TS 와 JS 양쪽 다 이해 가능하나, TS는 개발자가 실수하지 않도록 보호해줌

어떻게? TS코드는 JS코드로 컴파일 변환되기 전 에러가 발생함. 

TS코드를 JS코드로 변환할때, 에러 발생할것이라 판단하면 변환하지 않는다. (변환 후 발생하는건 런타임오류)

 

2.1 Implicit Types vs Explicit Types ? TS 변수

JS에선 변수 type 정하지 않아도 되지만 TS에선 정해야 한다. (JAVA 같은 언어에선 변수의 Type 꼭 알려줘야함)

TS는 데이터와 변수 타입을 명시적 작성해도 되고, JS처럼 변수만 생성해도 된다.

변수 타입을 지정하지 않더라도 TS는 JS코드로 변환할때 알아서 타입 추론하기 때문에 결국은 타입이 모두 정해진다.

아래 이미지들은 변수 타입을 지정하지 않아도 결국 타입은 명시적으로 정의되는 상황이다.

TS에서 변수 타입 정의하는 방법. 우측처럼 해도 되긴 함

let c = [ ] 처럼 define 하게 되면 any라는 타입으로 자동지정되는 특징이 있다.  

오늘은 여기서 끝. 계속-

---

https://awess0me.tistory.com/22

Typescript 타입 : 선택적변수, alias, tuple, any, readonly, void, unknown, never - 노마드 코더 강의정리2