Javascript VS Typescript

🧐 Typescript 란?

자바스크립트 대용품 같은 언어로, 자바스크립트 문법을 그대로 이용하지만 타입을 지정하여 쓸 수 있는 일종의 자바스크립트 업그레이드 버전이라 할 수 있다.

JavascriptTypescript

.js 확장자	.ts 확장자
동적타입 언어	정적타입 언어
인터프리터 언어	컴파일 언어
독립적으로 사용 가능	자바스크립트에 의존적임
좀 더 유연함	좀 더 엄격함
작고 간단한 프로젝트에 적합함	복잡한 프로젝트, 협업에 적합함

🫨 동적타입 언어

👉🏽 예측불가능, 직관적이지 않음, 너무 관대함

1 + true;

function multiply( a, b ) {
	return a * b;
}

multiply();
muliply(’hi’, true);

👉🏽  즉, 개발자의 실수로부터 보호하지 못한다!

👉🏽  너무 관대하고 자유로워서 이런것들을 다 허용해서 실행시켜주려 하기 때문에 런타임 에러로 이어질 수 있다.

👉🏽  이는 프로덕션에서 실행중일 때 유저가 제품을 사용할 때 발생하기 때문에 큰 문제점임.

👉🏽  이러한 개발자의 실수를 실행 전에 알려주는 것이 바로 타입스크립트 (실제로 자바스크립트 버그 중 15%를 타입스크립트의 사용으로 미리 예방할 수 있다는 연구결과가 있다고 함)

🙂 정적타입 언어

1. 동적타입 언어에서 허용해주었던 개발자의 실수를 사전에 알려주고, 오류사항을 수정하지 않을 경우 실행조차 되지 않으며, 마치 IDE의 부가기능처럼 친절히 안내도 해준다.

1 + true; // 👉🏽 error

function multiply( a, b ) {
	return a * b;
}

multiply(); // 👉🏽 error
muliply(’hi’, true); // 👉🏽 error

1. 타입종류

📘 TypeScript 한글 문서

🫥 자바스크립트로의 컴파일

크로스브라우징(브라우저 호환성) 문제 해결

모든 브라우저의 지원을 걱정해야하는 프론트엔드 개발자 입장에서는 ES6+문법을 써도 될지 고민이 많은데,

타입스크립트는 컴파일과정에서 ES6+문법을 ES5(또는 ES3)로 바꿔주기 때문에 Babel의 도움 없이 크로스 브라우징 문제를 해결할 수 있다.

😠 엄격한 타입 스크립트

1. 매번 타입을 지정해줘야 하는 번거로움

원시타입일 경우 비교적 간단하나, object 타입이 되면 object의 길이가 길고 object 내부 타입이 다양할 수록 매번 타입을 따로 결정 하기가 번거롭고, 작성해야하는 코드의 양이 많아진다.

type Person = { // Type Aliases
	name: string,
	nation: string,
	job: '프론트엔드 엔지니어' | '백엔드 엔지니어',
	age: number,
	hobby: string,
	language: string[],
	skill: string[],
	address: Record<string, string>
}

const 하영: Person = {
	name: '하영',
	nation: '한국',
	job: '프론트엔드 엔지니어',
	age: 30,
	hobby: '키보드 커스텀',
	language: ['한국어', '일본어'],
	skill: ['HTML', 'CSS', 'JavaScript', 'TypeScript', 'react', 'nextJs'],
	address: {
	  city: '부산',
	  street: '수영로',
	  zipCode: '12345'
	}
};

2. 더 나은 개발자 경험

자바스크립트로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값 혹은 리턴 값이 무엇인지 알기 위해 여러 파일들을 살펴봐야했던 경험이 있을 것이다.

하지만 타입스크립트를 제대로 사용함으로써 얻을 수 있는 가장 큰 장점 중 하나는 변수명 뿐 아니라 해당 데이터의 ‘type’까지 알 수 있다는 것이다.

그래서 프로젝트가 복잡할 수록 작성해야할 코드는 늘어날지언정 오히려 시간적인 측면에서도 효율적이고 코드를 보다 직관적으로 만들어주며, 개발자는 로직과 같은 큰 구조들에만 집중할 수 있게 해준다.

또, Object의 속성값 하나하나를 기억할 필요없이 IDE가 리스트업 해주는 등의 자동완성 기능은 개발자 입장에서 훨씬 편해진다.

 

📍타입스크립트의 현주소

---

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

때문에 규모가 작은 프로젝트에서는 여전히 타입스크립트의 도입을 망설이고 있지만, 아래 그래프에서 보면 알 수있듯 많은 개발자들이 타입스크립트를 좋아하거나 관심을 가지고 있고, 앞으로 더 많이 사용될 것으로 보여 프론트엔드 개발에 있어서는 타입스크립트에 대한 공부가 필수가 된 것 같다.

 

https://survey.stackoverflow.co/2022#most-popular-technologies-language-prof