그럼 TypeScript를 실행하고 기본 워크플로우를 익혀보겠습니다. 첫 번째로 TypeScript을 작성할 파일을 생성해야 합니다. 온라인 편집기 TS Playground를 사용하시면 안 하셔도 됩니다. 로컬 환경에서 실행하시면 파일 생성이 꼭 필요합니다. 파일 확장자는 .ts여야 합니다
그럼 basics.ts라는 파일을 만들어 보겠습니다. 이름은 아무렇게나 하셔도 됩니다. .ts라는 확장자는 VS Code에 이 파일이 TypeScript라는 걸 알려줍니다.
.tsx 확장자도 있는데, 이 부분은 React를 다룰 때 알려드리겠습니다. 앞서 말했듯 React 부분은 강의에서 핵심 내용이 아닙니다. 간단히 말하면 .tsx는 TypeScript에 jsx 파일을 더하는 건데 TypeScript으로 jsx 구문을 쓸 수 있게 해줍니다. React고 jsx고 무슨 말인지 몰라도 괜찮습니다.
코드를 작성하는 다른 프로그래밍 언어들은 일반적으로 코드를 작성하고 코드를 실행해야지 작동 등을 확인할 수 있지만 TypeScript의 경우는 앞서 정적이라고 말한 것처럼 코드를 작성하면서도 편집기 내에서 확인할 수 있는 기능을 제공합니다
Math 메서드를 통해 한번 확인하겠습니다. 이제 TypeScript에 대해 시작하는 단계니까 할 수 있는 건 많지 않습니다. Math.round 메서드를 사용JavaScript에서 많이 사용하는 반올림 해주는 메서드로 복잡한 건 없습니다. round를 치자마자 바로 빨간색 선이 아래에 보이는데 마치 워드 파일에서 잘못된 맞춤법을 썼을 때랑 비슷합니다. TypeScript은 이렇게 문제가 생기면 바로 바로 알려줍니다.
여기 보면 인수가 하나 필요한데 없다고 알려줍니다. 정확히 X에 대한 인수가 없다고 말해줍니다. X는 숫자가 되어야 하는 것도 알려주겠습니다. 이 구문에 대해 배울 거지만 지금도 이런 경고를 보고 알 수 있습니다. TypeScript이 이런 기능을 기본적으로 제공해서 실행할 필요가 없고 터미널에서 아무 것도 하지 않아도 오류 메시지로 문제 해결 팁을 알려줍니다
알려주는 대로 숫자를 넣으면 오류가 사라집니다. 숫자가 아닌 hello 같은 걸 쓰니 다시 오류가 표시되니다. 문자열은 쓸 수 없다고 알려줍니다. '문자열 타입은 숫자 타입에 할당될 수 없다'라고 알려줍니다. JavaScript에서는 이런 오류가 표시되지 않습니다.
TypeScript의 대표적인 특징을 간단하게 보여드렸습니다. 간단한 예시이지만 TypeScript의 가장 큰 장점으로 실행이나 컴파일 없이 코드를 작성하면서 오류를 확인할 수 있습니다.
이제 두 번째로 코드 컴파일링에 관해 보겠습니다. console.log를 두 개 적어줍니다, HELLO와 GOODBYE를 써줍니다. 그리고 이런 숫자를 반올림하는 것도 console.log 해보겠습니다. 이제 이렇게 TypeScript 파일에 코드를 써봤는데 이를 JavaScript로 컴파일 하고자 합니다. TypeScript에 코드를 쓰고 이를 JavaScript로 컴파일해서 실행하는 게 TypeScript의 최종 목적입니다.
먼저 터미널을 엽니다. 터미널을 새로 열고 파일의 경로를 통해 실행해도 되지만 더 간단한 방법으로 합니다. VS Code의 통합 터미널에서 작업해서 하나의 화면에서 진행합니다. 이제 코드가 들어있는 basics.ts 파일이 보입니다. 설치한 tsc 명령어를 사용해서 쉽게 파일을 컴파일 할 수 있습니다.
tsc와 파일 이름을 써주면 됩니다. 이제 Enter 키를 눌러주고 조금 기다리면 basics.js라는 두 번째 파일이 생겼습니다. 지금 강의에서 쓰고 있는 코드는 TypeScipt에 국한된 게 아닙니다. 코드 안의 구문들은 일반 JavaScript 구문들입니다. 그래서 컴파일링을 해도 똑같이 보입니다.
이는 JavaScript에는 없는 구문 TypeScript 구문으로 .js에 바로 쓰면 오류가 발생합니다. 알림도 'TypeScript 구문을 JavaScript에 사용하려고 한다'라고 나옵니다. 무슨 오류인지 매우 구체적으로 알려줍니다.
JavaScript로 컴파일링되고 자동으로 구문이 바뀌어서 오류가 발생하지 않습니다. TypeScript 코드가 JavaScript 코드로 컴파일링된 것입니다. 이렇게 TypeScript에 관해 두 가지를 살펴보았습니다.
첫 번째는 코드를 작성하면서 오류를 확인하는 것입니다. 편집기에서 오류가 무엇인지 자세히 알려주었습니다. 두 번째로는 코드를 컴파일링해 보았습니다 코드가 길어지고 복잡해지면 컴파일링이 오래 걸릴 수도 있지만 하지만 중요한건 물 흐르듯 쉽게 된다는 것입니다. 정리하자면 TypeScript를 통해 코드 철자 등을 검사할 수 있고 TSC 명령어를 통해 JavaScript로 컴파일링도 가능합니다.
'SW > TypeScript' 카테고리의 다른 글
| TypeScript : 컴파일 방법, 예제, 개념 (0) | 2023.04.03 |
|---|---|
| TypeScript : 숫자와 불리언 타입 : 사용 방법, 개념, 예제 (0) | 2023.04.02 |
| TypeScript : PlayGround 사용 방법, 예제 (0) | 2023.03.31 |
| Type Script : 설치, 방법, 예제 (0) | 2023.03.30 |
| Type Script : 개요, 개념, 예제 (0) | 2023.03.29 |