D-62
🔍 TypeScript란?
TypeScript는 JavaScript에 타입을 부여한 언어로 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어다. 시간이 흐르고 웹 애플리케이션의 상호작용이 증가하면서 JavaScript 코드 양이 늘어났다. 또한 JavaScript는 타입의 명시성이 부족한 단점이 있다.
let add = (a, b) => {
return a + b;
}
add(5, "7")위 예시는 문자열과 숫자를 더할 경우 JavaScript는 숫자 타입 인수를 강제적으로 타입변환해 문자열로 만드는데 이 과정에서 예상치 못한 결과를 가져온다. 이러한 문제를 보완하기 위해 TypeScipt가 등장했다.
📌 TypeScript의 장점
TypeScript는 정적타입 검사 기능을 제공해 코드의 가독성과 유지 보수성을 높여준다. 이 TypeScript는 ES6 문법을 포함한 최신 JavaScript 문법을 지원한다.
const add = (a: number, b: number): number => {
return a + b;
};앞서 다룬 코드를 TypeScript 형태로 변환했다. a와 b는 number 타입으로 정의되었으며, 함수의 반환 타입은 number로 지정했다.
이렇게 TypeScript를 사용해 가독성을 높이고 타입을 명시해 다른 개발자가 코드를 이해하고 수정하기 쉬워지며 런타임 에러를 방지해 유지보수성도 높아진다.
🔍 TypeScript의 타입
JavaScript로 작성된 코드를 TypeScript로 포팅하는 과정이다.
📌 JavaScript
/* 작성 후 터미널에
node src/index.ts
를 입력하시면 확인할 수 있습니다.
*/
/* boolean형 */
let isDone = false;
let isShow = true;
console.log(isDone);
console.log(isShow);
/* 숫자형 */
let num1 = 7;
let num2 = 0.6878;
console.log(num1);
console.log(num2);
/* 문자형 */
let str = 'hello';
console.log(str);
/* 숫자형 배열의 타입을 정하는 2가지 방법 */
let list1 = [1, 2, 3];
let list2 = [1, 2, 3];
console.log(list1);
console.log(list2);
/* 문자형 배열의 타입을 정하는 2가지 방법 */
let list3 = ['banana', 'apple', 'mango'];
let list4 = ['banana', 'apple', 'mango'];
console.log(list3);
console.log(list4);
/* 튜플 */
let list5 = [1, 'banana', true];
console.log(list5);
/* 객체형 타입을 정하는 2가지 방법 */
let obj = {};
let obj2 = {
name: 'kimcoding',
age: 20,
isDeveloper: true,
};
console.log(obj);
console.log(obj2);
📌 TypeScript
/* 작성 후 터미널에
node src/index.ts
를 입력하시면 확인할 수 있습니다.
*/
/* boolean형 */
let isDone: boolean = false;
let isShow: boolean = true;
console.log(isDone);
console.log(isShow);
/* 숫자형 */
let num1: number = 7;
let num2: number = 0.6878;
console.log(num1);
console.log(num2);
/* 문자형 */
let str = 'hello';
console.log(str);
/* 숫자형 배열의 타입을 정하는 2가지 방법 */
let list1: Array<number> = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];
console.log(list1);
console.log(list2);
/* 문자형 배열의 타입을 정하는 2가지 방법 */
let list3: string[] = ['banana', 'apple', 'mango'];
let list4: string[] = ['banana', 'apple', 'mango'];
console.log(list3);
console.log(list4);
/* 튜플 */
let list5: [number, string, boolean] = [1, 'banana', true];
console.log(list5);
/* 객체형 타입을 정하는 2가지 방법 */
let obj: object = {};
let obj2: object = {
name: 'kimcoding',
age: 20,
isDeveloper: true,
};
console.log(obj);
console.log(obj2);
📚
최근 많은 기업들의 채용 정보를 보면 대다수가 TypeScript를 우대하는 것을 보고 JavaScript와 어떤 차이점이 있는지 몰랐었다. TypeScript를 이용하면 관련 에러는 적어지고 대규모 프로젝트를 리펙토링하거나 다른 개발자가 코드를 볼 때 유지보수가 쉬워지고 이해하기 쉽다는 장점으로 충분히 가치가 있다 생각했다. TypeScript에 대해 더 배우고 기록해야겠다.
