TypeScript 실행환경 만들기
1. Node.js 인스톨
TypeScript 실행환경을 만들기 위해서는 맨 처음으로 Node.js를 인스톨 하여야 합니다.
npm(Node Package Manager)은 node.js를 인스톨 하면 함께 설치가 됩니다.
저는 안정성이 확보되어 있는 12.13.1 LTS 버젼으로 설치하였습니다.
node.js 를 인스톨 한 다음에 node -v 커맨드의 결과가 아래와 같은 것을 확인합니다.
v12.13.1
2. npm 확인
npm -v으로 npm이 설치된 것을 확인합니다.
6.12.1
3. TypeScript 인스톨
아래 커맨드로 npm install을 사용해서 TypeScript를 인스톨 합니다.
npm install -g typescript
tsc -v 으로 TypeScript가 설치된 것을 확인합니다.
Version 3.7.2
npm -g install 에 실패할 경우
npm install -g xxx 커맨드를 실행시에 아래와 같이 접속 오류의 에러가 발생할 경우에는 수동으로 npm의 default directory 를 설정해 주면 인스톨 실패 문제를 해결할 수 있습니다.
npm install -g typescript
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/admin/.npm/_logs/2019-12-01T13_25_29_384Z-debug.log
npm -g install 실패시의 해결 방법
1. npm 디폴트 디렉토리를 생성합니다.
mkdir ~/.npm-global
2. npm 의 설정이 새 디렉토리 패스를 사용하도록 설정합니다.
npm config set prefix '~/.npm-global'
3. .bash_profile에 export PATH=~/.npm-global/bin:$PATH 를 추가합니다.
echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
4. 수정한 .bash_profile 를 시스템 상에 적용시킵니다.
source ~/.bash_profile
※ 참고로 이 해결 방법은 Microsoft Windows에서는 적용되지 않습니다.
Resolving EACCES permissions errors when installing packages globally
4. TypeScript 작성 & 컴파일 해 보기
HelloWorld.ts 를 작성합니다.
var message: string = "Hello World!"
console.log(message)
HelloWorld.ts 를 컴파일 합니다.
tsc HelloWorld.ts
컴파일이 정상적으로 실행되면 HelloWorld.js 가 생성된 것을 확인할 수 있습니다.
아래 커맨드로 HelloWorld.js 를 실행 할 수 있습니다.
node HelloWorld.js
결과로서 Hello World! 가 표시되는 것을 확인할 수 있습니다.
TypeScript 와 컴파일 된 JavaScript 의 차이 확인
TypeScript 의 컴파일 전후의 차이를 확인할 겸, 아래 사이트의 예제 코드를 컴파일 해서 비교해 보았습니다.
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
gretter.ts
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
gretter.js
var Student = /** @class */ (function () {
function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
p.s. 환경 설정은 언제 해도 삽질 신선한 느낌을 주는 것 같습니다.
Pie's Tech Note
생계형 개발자의 메모장