JavaScript VS TypeScript

Mason Choi·2024년 1월 5일

🐝 JavaScript VS TypeScript

근데 얘네가 뭐야?
Javascript : 클라이언트 측 스크립팅 언어

주로 웹 개발시에 사용

웹 페이지를 대화식으로 만드는 프로그래밍 언어

동적 타입 언어로 변수의 타입을 지정하지 않아도 된다.

유연성과 간편함 제공. But, Type error 가능성↑

Typescript : 객체 지향 컴파일 언어
→ Typescript는 MS에서 개발한 프로그래밍 언어, JavaScript의 확장된 버전.

JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음.

즉 TypeScript에서 JavaScript 코드를 그대로 사용할 수 있다.

정적 유형 검사 제공

명시적인 Type 지정 가능

Type Error를 사전에 방지할 수 있다

🐝 TypeScript는 정적 타입을 지원

Type의 안정성과 코드의 가독성 증가
- Type이 뭔데?
```
// Example.js
var a = 1;
var b = 2;

var c = a + b
```
```
// Example.ts
var a:number = 1;
var b:number = 2;

var c = a + b ;
```
  - TypeScript는 선언시에 자료형을 명시해주어야한다.
  - 명시하는 자료형 = Type
  - 이것이 JavaScript와 TypeScript의 가장 큰 차이점이다.
  - 하나의 예시를 더 들어보자
```
let foo: string = "hello" //타입스크립트
let foo = "hello" //자바스크립트

// 함수선언식 타입스크립트
function multiply1(x: number, y: number): number {
  return x * y;
}

//함수 선언식 자바스크립트
function multiply1(x, y) {
  return x * y;
}

// 함수표현식 타입스크립트
const multiply2 = (x: number, y: number): number => x * y;

// 함수표현식 자바스크립트
const multiply2 = (x, y) => x * y;

//boolean
let isBoolean: boolean = false;

//null
let isNull: null = null;

//undefined 
let isUndefined:undefined = undefined;

// array
let list: any[] = [1,2,"3",false]
let list2: number[] = [2,3,4]
let list3: Array<number> = [1,2,3]

//tuple
let tuple : [string, number]
tuple = ["hello",10]

//enum : 열거형은 숫자값 집합에 이름을 지정한 것
enum Color1 {Red,Green,Blue}
let c1: Color1 = Color1.Green
console.log(c1) //1

//any 타입추론을 할 수 없거나 타입 체크가 필요없는 변수에 사용
let isAny: any = 5
isAny ="string:
isAny = false

//void : 일반적으로 함수에 반환값이 없을 경우
function isUser():void {
	console.log("hello")
}

//never : 결코 발생하지 않은 값
function infiniteLoop(): never {
	while(true){}
}

// 출처: https://velog.io/@pluviabc1/
```
    - 그래서 Type이 있으면 뭐가 더 좋아 ?
      1. 런타임 에러 VS 컴파일 에러
        
        // Ex.js function ex(a,b) { var c = a+b; -> Runtime 에러 발생 return c; } var a = 1; var b = "aa"; console.log( "a+b=" + ex(a,b));
        
        //Ex.ts function ex(a:number,b:number):number { var c:number = a+b; return c; } var a = 1; var b = "aa"; -> Compile 에러 발생 console.log( "a+b=" + ex(a,b));
        
        다른 Type끼리의 연산을 통해
        
        js는 Runtime 에러
        
        ts는 compile 에러를 출력한다.
        
        여기서 ts는 type을 명시함으로써 컴파일 단에서 미리 선언될 수 없는 변수를 차단한다.
      2. 가독성
        
        //ex.js funtion ex(a,b) { var c = a+b; return c; } //ex.ts function ex(a:number, b:number):number { var c:number = a+b; return c; }
        
        이런 식으로 Type을 명시함으로써 어떤 자료형의 데이터가 들어오고 어떤 자료형의 데이터가 return 되는지 쉽게 파악할 수 있다.
        
        즉 이런 식으로 가독성이 좋은 코드를 작성할 수 있으며, Type 관련 에러 발생시 쉽게 찾아낼 수 있는 장점이 있다.
    - 그럼 무조건 TS 써야하나요 🤔
      - 그건 아니다. JS도 TS보다 좋은 점이 분명히 있다.
        
        유연성
        
        여기서 유연하다는 것은 좀 더 자유분방하고 쓰임새가 다양하다는 것.
        
        예시를 한 번 보자
        // ex.js var a = "string" ; var b = 2020 ; a = 1111 ; var c = a + b console.log("a+b=", c)
        
        이 코드를 작성했을 때 console.log는 무엇을 출력하게 될까 ?
        
        // ex.ts var a:string="string"; var b:number = 2020; a = 1111; var c:number = a + b; console.log("a+b=", c)
        
        여기서는 무엇을 출력하게 될까?
        
        정답은 js는 3131 을 출력하게 된다. ts는 error가 발생하게 된다.
        
        Js는 변수의 자료형을 바꿔가며 사용하는게 가능하나, ts는 불가능하다.
        
        Js로는 3줄짜리 코드가 ts에선 10줄이 되는 경우도 허다하다.
        
        이 단점은 이어지게 되는데
        
        생산성
        
        10줄짜리 코드를 3줄짜리 코드로 줄인다면 잘 짠 코드이지만, 3줄짜리 코드가 10줄이 되는 순간 귀찮아진다.
        
        특히 코드 작성에 더 많은 시간이 소요된다는 것이다.
    - 그럼 도대체 뭘 쓰란거지 ?
      - 어쩔 수 없이 주관이 들어갈 수 밖에 없는 선택이다.
      - JS를 쓰면서도 Error를 잘 찾아내고 가독성을 좋게 코드를 짜며 네이밍을 기똥차게 하는 사람들은 여전히 JS를 쓰면된다.
      - TS를 쓰면서도 유연성과 빠른 코딩을 제공하는 프로그래머들은 여전히 TS를 쓰면 된다.
      - 하지만 필자는 모든 프로젝트에서 TS를 사용하고 있다. 그 이유로는
        
        컴파일 에러 잡기가 쉽다.
        
        필자는 아직 초보이기 때문에 에러 찾느라 시간 다 쏟기 전에 코드 한 줄 더 봐야한다.
        
        any라는 자료형을 통해 유연성을 커버할 수 있다.
        
        any는 어떤 자료형이든 허용하는 자료형으로서 어느 정도 JS의 유연성을 TS에서도 커버할 수 있다.
        
        가독성이 좋기 때문에 팀원들이 내 코드를 보고 그나마 쉽게 이해할 수 있다.
        
        앞서 언급했듯이 아직 초보이기 때문에 코드가 엉망이거나 가독성이 떨어질 수 있으나 함께 협업하는 팀원들이 내 코드를 이해하기가 조금이나마 쉬워진다.
      - 그래서 우리보고도 쓰라고 ?
        
        아니다. 결국은 본인 자유다 !
        
        함께하는 팀원 및 팀장이 JS가 더 편하고 코드를 JS로 더 쌈뽕하게 짜서 더 멋진 협업을 펼칠수도 있고, 반대로 TS인 경우도 동일하다.
        
        개인적인 생각으로는 TS는 JS를 보완해서 만든 언어이다보니 좀 더 범용적으로 추후 사용될 수 있다고 본다.
        
        하지만 TS를 쓰기 전에 JS를 먼저 사용해서 어떤 식으로 작동하는지 파악을 한 후 TS를 학습해보는 것을 추천한다.
        
        JS가 없었으면 TS도 없었을테니까

Mason Choi

본립도생

이전 포스트

JavaScript VS TypeScript

🐝 JavaScript VS TypeScript

🐝 TypeScript는 정적 타입을 지원

리액트의 상태관리

0개의 댓글