안녕하세요!
최근 Javascript를 공부하면서 Typescript에 대해 알게 되어서 아주 조금 공부를 해보았는데요!
공부한 내용을 좀 적어보도록 하겠습니답
Typescript는 뭐지? Javascript처럼 언어인건가?
Typescript는 Microsoft에서 2012년에 개발한 오픈소스 프래그래밍 언어입니다.
그럼 이제 생기는 궁금점이 Typescript가 Javascript처럼 프로그래밍 언어인거는 알겠는데 그럼 둘의 차이점은 무엇인지 아니겠어요?
Typescript와 Javascript의 관계
Typescript는 Javascript의 superset입니다. 즉, 쉽게말해서 Typescript는 Javascript에 기반을 두고 있으며, Javascript의 모든 기능을 포함하면서 그 이상의 추가적인 기능을 제공하고 있다는 것이죠.
그러면서 또또 궁금해지는 것이 Javascript가 있는데 왜 TypeScript라는 것을 만들어서 복잡스럽고 마음을 심란하게 하냐! 라는 생각이 들더라구요. 뭔가 Javascript에 문제가 있나?라는 생각이 들기도 하구요..!
TypeScript의 장점(Javascript의 문제점)
일단 JavaScript는 동적 타입 언어입니다. 동적 타입이라는게 도대체 무엇이냐?!?!
동적 타입 검사는 런타임(코드를 실행시켰을 때)때 변수들의 타입이 결정되는 것을 의미합니다. 즉, Javascript는 코드를 실행시키고 나서 변수들의 타입이 결정되다 보니 코드를 작성할 때는 몰랐던 오류들이 런타임 이후에 나타날 수 있게 되는 것이죠.
하지만 TypeScript는 컴파일러가 코드 실행 전 컴파일 단계에서 타입 오류를 검사하게 되는데요.
이것이 바로 TypeScript의 정적 타입 검사입니다.
한번 예시를 들어보도록 할께요
JavaScript에서는 add 함수의 매개변수 타입을 검사하지 않습니다. 때문에 add함수의 인수에 문자열이나 숫자를 전달해도 런타임 오류 없이 함수가 잘 실행되는 것을 보실 수 있죠! 하지만 만약 우리가 원했던 값이 15라고 가정하면 "510"이라는 결과는 버그가 되는 거나 마찬가지인거죠..
// 동적 타입 검사
function add(a, b) {
return a + b;
}
console.log(add(5, 10)); // 15
console.log(add("5", "10")); // "510"
그럼 TypeScript의 경우는 어떨까요? TypeScript에서는 아래처럼 add의 매개변수의 타입이 무엇인지 명시할 수 있습니다. 아래 예시에는 매개변수의 타입이 숫자여야 한다고 명시되어 있기 때문에 두 번째 console.log 구문에서 문자열 인수를 전달하면 컴파일 오류가 발생합니다. 이 오류는 빌드 시점에 발생하므로, 실행 전에 오류를 찾고 수정할 수 있게 되는 것이죱!
// 정적 타입 검사
function add(a: number, b: number): number // Js에서는 지원하지 않는 문법 {
return a + b;
}
console.log(add(5, 10)); // 15
console.log(add("5", "10")); // 컴파일 오류: 인수의 타입이 'number'이어야 합니다.
저는 처음에 이 예시를 보고.. 아니, JavaScript에서도 타입 명시 해주면 되잖아~~ 라고 생각했었는데욥...ㅎㅎㅎ
JavaScript에서는 매개변수의 타입을 지정할 수 있는 타입 어노테이션 문법을 지원하지 않는다고 합니다! 물론 TypeScript에서 타입 명시가 필수는 아닙니다. 타입을 명시하지 않아도 TypeScript 컴파일러가 알아서 타입을 추론할 수 있기도 하고, 타입 추론이 불가능한 경우에는 any타입을 할당하여, 타입검사를 피할 수 있기도 합니다.
하지만 코드의 오류를 코드를 실행시키고 나서 알게되는 것과 실행전에 알게되는 것을 비교해 보았을 때 고민도 필요없이 TypeScript를 선택할 수 밖에 없는것이죠!
TypeScript는 정적 타입 검사외에도 다양한 기능들을 제공하고 있습니다!
TypeScript의 특징
- 정적 타입 검사 : TypeScript는 정적 타입 지정을 제공하여 변수, 매개변수, 객체 속성의 타입을 미리 지정할 수 있도록 합니다.
- 객체 지향 프로그래밍 : TypeScript는 클래스, 인터페이스, 제네릭, 추상클래스등과 같은 객체 지향 프로그래밍 기능을 제공합니다.
- 다운 레벨 컴파일링 : TypeScript는 ES3, ES5, ES6 등의 이전 JavaScript 버전으로 코드를 컴파일할 수 있으며, 이는 브라우저 호환성을 보장합니다.
- 에러 검출 : TypeScript의 타입 체커는 코드 작성 시점에 오류를 식별하므로 런타임 오류의 가능성을 줄입니다.
이외에도 TypeScript의 문법이나 기능이 궁금하시다면 아래 공식문서를 참고해주시기 바랍니다! 근데 공식문서가 좀 지루하기 때문에 그냥 바로 부딪혀보시는 거를 전 추천할래요@
https://www.typescriptlang.org/ko/docs/handbook/intro.html
Handbook - The TypeScript Handbook
Your first step to learn TypeScript
www.typescriptlang.org
그럼 이제 타입 검사를 해주는 TypeScript 컴파일러를 어떻게 하면 사용할 수 있는지 궁금해지잖아요!
TypeScript 컴파일러(tsc)
TypeScirpt 컴파일러를 사용하기 위해 npm으로 먼저 설치를 해줍니다.
npm install -g typescript그리고 hello.ts라는 파일에 아래 코드를 작성해봅니다요.
// 세상을 맞이하세요.
console.log("Hello world!");작성하면 이렇게 hello.ts 파일이 생긴것이 보이시죠?
이제 터미널에서 hello.ts가 있는 폴더로 가서 아래 명령어를 입력해줘 볼께여
tsc hello.ts
위 명령어를 입력해주고 나면 터미널에는 아무런 변화가 없어 보이지만 사실 엄청난 변화가 생겼답니다! 바로바로!!!
아래 사진처럼 hello.js라는 파일이 생겨난 것을 보실 수 있어요! hello.js가 바로 TypeScript 컴파일러(tsc)가 hello.ts파일을 JavaScript파일로 컴파일해준 결과물인 것이죠!
만약 이 컴파일 과정에서 오류가 발생하면 커맨드 라인에 오류를 알려주게 되는 것입니다.
제가 공부한 내용은 여기까지 인데욥! 이제 실전에서 TypeScript를 써보면서 자세한 부분들을 익혀나가야 할 것 같아요 ㅎㅎ (괜히 머쓱..)
저 열심히 할거니까 말리지 말아주세요!!
안녕히계세요~!