Javascript vs Typescript

namyeji·2022년 12월 22일
0

Javascript와 Typescript의 차이점은 무엇일까요?

사실 크게 다르지는 않지만 가장 큰 다른점이 있습니다.
바로 타입을 지정한다는 점입니다.
이게 타입스크립트를 처음 공부하면서 가장 까다로웠던 점인거같습니다.
타입이 뭐냐? 하면 우리가 흔히 문자열은 string타입이다. 에 타입입니다.
타입은 여러개가 있습니다.
아래서 설명하고 일단 둘의 장점을 보겠습니다.

javascript
장점: 코드 작성이 유연하다. 빠른 코딩이 가능하다.

typescript
장점: 컴파일 시 에러를 잡을수 있다. IDE와 결합성이 좋다. 코드 가독성이 좋다.

뭘 사용하는게 좋을까요?

이건 사람마다 주관적이라고 하지만 타입스크립트를 사용하는 회사들이 점점 많아지고있습니다. 이유는 컴파일로 많은 에러를 사전예방할수 있고, 가독성이 좋아 중간에 합류한 팀원이 빠르게 코드를 이해할수 있죠. 장기적으로 타입스크립트를 더 많이 사용하게 되지 않을까 생각합니다.

타입의 종류

  1. 문자/숫자/불린(primitive) 타입
const getPrimitive = (arg1: string, arg2: number, arg3: boolean): [boolean, number, string] => {
  return [arg3, arg2, arg1];
};

const result = getPrimitive("철수", 123, true);
  1. any 타입 => 그냥 자바스크립트랑 같음
    const getAny = (arg1: any, arg2: any, arg3: any): [any, any, any] => {
    console.log(arg1 + 1000);
    return [arg3, arg2, arg1];
    };

const result = getAny("철수", 123, true);

  1. unknown 타입
    const getUnknown = (arg1: unknown, arg2: unknown, arg3: unknown): [unknown, unknown, unknown] => {
    if (typeof arg1 === "number") console.log(arg1 + 1000);
    return [arg3, arg2, arg1];
    };

const result = getUnknown("철수", 123, true);

  1. generic 타입 - 1
    function getGeneric<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
    return [arg3, arg2, arg1];
    }

const result = getGeneric("철수", 123, true);

  1. generic 타입 - 2
    function getGeneric2<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
    return [arg3, arg2, arg1];
    }

const result = getGeneric2("철수", 123, true);

  1. generic 타입 - 3
    function getGeneric3<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
    return [arg3, arg2, arg1];
    }

const result = getGeneric3("철수", 123, true);

  1. generic 타입 - 4
    const getGeneric4 = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
    return [arg3, arg2, arg1];
    };

const result = getGeneric4<string, number, boolean>("철수", 123, true);

<T>,<U>,<V>타입은 conditional type(조건부타입)입니다. 제네릭과 함께 사용될 때 조건부 타입은 더 편리하게 타입을 정할 수 있습니다.

profile
총총

0개의 댓글