728x90
반응형
macOS에서 Typescript개발환경 구축하기 with NPM
TypeScript개발 환경 구축 방법에는 두가지 방법이 있는데 하나는 Visual Studio를 이용하는 것이고 다른 하나는 npm 패키지관리자를 이용하는 것이다.
NodeJS설치
npm을 이용하기에 앞서 NodeJS를 설치해야한다.
NodeJS를 설치하고나서 terminal을 실행해 node명령어를 이용하여 nodeJS가 제대로 설치 되었는지 확인한다.
lucidmaj7@Wonheeui-MacBookPro ~ % node --version
v12.16.0
lucidmaj7@Wonheeui-MacBookPro ~ %npm도 정상적으로 실행 되는지 확인한다.
lucidmaj7@Wonheeui-MacBookPro ~ % npm
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, fund, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami
npm <command> -h quick help on <command>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
/Users/lucidmaj7/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm@6.13.4 /usr/local/lib/node_modules/npm
lucidmaj7@Wonheeui-MacBookPro ~ %실행이 잘된거 같다.
NPM을 이용하여 Typescript설치하기
아래 명령어를 통하여 typescript를 설치 할 수 있다.
npm install -g typescript하지만.. 설치가 안된다.ㅎ
권한이 없다는 메시지가 출력된다. 권한을 상승하기위해 sudo를 같이 쳐주자.
sudo npm install -g typescript정상적으로 설치 됨을 볼 수 있다.
Typescript예제 테스트
Typescript 예제를 테스트해 보자.
적절한 곳에 ts파일을 만들고 아래 Typescript코드를 입력한다.
function sayHello(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = sayHello(user);tcs명령어를 이용하여 입력한 typescript코드를 빌드해본다.
% tsc test.ts그럼 test.js파일이 생성된 것을 볼 수 있다.
이제 html파일에서 이를 불러와서 웹페이지에서 실행 해 보자.
<!DOCTYPE html>
<html>
<head><title>TypeScript sayHello</title></head>
<body>
<script src="test.js"></script>
</body>
</html>브라우저에서 열어보면 정상적으로 아래와 같이 출력된다.
이렇게 간단하게 Typescript개발환경을 macOS에서 구축해 보았다.
참고
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
728x90
반응형
'개발' 카테고리의 다른 글
| GIT 리모트 레포지토리 변경하기 (0) | 2020.04.22 |
|---|---|
| TCP 세그먼트란? (0) | 2020.03.12 |
| 자바스크립트(javascript) 난독화 사이트 (0) | 2019.11.21 |
| [web개발] 티스토리 블로그 스킨 CSS 다크모드 지원하기 (6) | 2019.11.20 |
| php 스크립트 파라미터 처리 (argc, argv) (0) | 2019.11.07 |
댓글