JS와 TS의 차이

JavaScript와 TypeScript

• TypeScript는 JavaScript 기반의 언어
• JavaScript는 클라이언트 측 스크립팅 언어 TypeScript는 객체 지향 컴파일 언어
• 객체 지향 프로그래밍 패러다임은 데이터 추상화에 중심
  - 객체와 클래스라는 두 주요 개념을 기반으로 함

JavaScript

• 웹 개발에 주로 사용됨
• 웹 페이지를 대화식으로 만드는 프로그래밍 언어
• 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행
• 클라이언트 측 스크립팅 언어
  - 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함
• 멀티 스레딩, 멀티 프로세싱 기능이 없음

TypeScript

• JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음
• TypeScript 컴파일러를 사용하여 ts(TypeScript)파일을 js(JavaScript) 파일로 변환, 쉽게 통합
• 정적 유형 검사 제공
• 클래스 기반 객체를 만들 수 있음
• 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있음

TypeScript 예시 코드

• 자바스크립트

function sum(a, b) {
  return a + b;
}
//정적 타입을 지원하지 않으므로 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않음

• 타입스크립트

function sum(a: number, b: number) {
  return a + b;
}
//정적 타입을 지원, 컴파일 단계에서 오류 포착 장점  => 코드의 가독성 높임

class Person {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello() {
    return "Hello, " + this.name;
  }
}

const person = new Person('Lee');

console.log(person.sayHello());

//위의 타입스크립트를 트랜스파일링하면 다음과 같이 자바스크립트 파일이 생성됨
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHello = function () {
        return "Hello, " + this.name;
    };
    return Person;
}());
var person = new Person('Lee');
console.log(person.sayHello());

• 정적 타입

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){}
}

기타

• 타입은 소문자, 대문자 구별
• 타입 선언을 생략하면 동적으로 타입이 결정 => 타입 추론
• 타입 선언 생략 + 값 할당 x => any 타입

var foo;

console.log(typeof foo);  // undefined

foo = null;
console.log(typeof foo);  // object

foo = {};
console.log(typeof foo);  // object

foo = 3;
console.log(typeof foo);  // number

foo = 3.14;
console.log(typeof foo);  // number

foo = "Hi there";
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

let foo; // let foo: any와 동치

foo = 'Hello';
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

 

JavaScript와 TypeScript 학습 (Learning JavaScript and TypeScript)

종종 "JavaScript 또는 TypeScript를 배워야 할까요?"와 같은 질문을 볼 수 있습니다.

정답은 JavaScript를 배우지 않고선 TypeScript를 배울 수 없다는 것입니다! TypeScript는 JavaScript와 구문과 런타임 특성을 공유하므로, JavaScript에서 배운 모든 것들은 동시에 TypeScript를 배울 때 도움이 될 것입니다.

프로그래머들을 위한 JavaScript 학습 자원이 많습니다; TypeScript를 작성할 때 그런 학습 자원을 무시해선 안됩니다. 예를 들어 javascript태그가 붙은 질문이 typescript태그가 붙은 질문보다 약 20배는 많지만, 모든 javascript질문은 TypeScript에도 적용할 수 있습니다.

만약 "TypeScript에서 리스트를 정렬하는 법"과 같은 것을 찾는 경우, 기억하세요: TypeScript는 컴파일-타임 타입 검사자가 있는 JavaScript의 런타임입니다. 리스트를 TypeScript에서 정렬하는 방법은 JavaScript에서 똑같은 방법으로 할 수 있습니다. 만약 TypeScript를 직접적으로 사용하는 자원을 찾았다면 그것도 좋지만, 런타임 작업을 실행하기 위한 일상적인 질문을 TypeScript 관련 답변에만 제한시킬 필요는 없습니다.

 

타입스크립트는 항상 좋기만할까? 

타입스크립트는 자바스크립트의 문법을 기반으로 한 슈퍼셋(superset)이기 때문에 컴파일러를 통해 자바스크립트로 컴파일되어 실행됩니다. 때문에 컴파일을 해주는 시간이 들기때문에 자바스크립트만 사용했을 때보다 속도에서 차이가 날 수 밖에 없습니다.

또한 자바스크립트의 장점이나 단점인 타입에 제한이 없다는 점을 보완한 것이 타입스크립트이기 때문에, 매번 타입을 따로 결정해주어야해 번거롭기도 하고 작성해야하는 코드의 양이 많아질 수 있습니다. 

이와 같은 이유로 아직 타입스크립트에 대한 비판도 있고 규모가 작은 프로젝트에서는 여전히 타입스크립트 도입을 망설이고 있습니다.