TypeScript 설치부터 실행까지
5038 단어 npmWindows10TypeScriptNode.js
목적
세세한 설정은 나중에 하고 우선 TypeScript를 인스톨 해 실행한다.
환경
windows10
node.js v12.13.0
npm v6.12.0
typescript v3.9.5
이번에는 node.js를 사용하여 TypeScript를 설치하기 때문에 먼저 node.js를 설치합니다.
node.js (공식 사이트) -> htps : // 그래서 js. 오 rg / 그럼 /
TypeScript 설치 준비
TypeScript 프로젝트를 만들고 싶은 디렉토리를 초기화한다.
명령 프롬프트npm init
초기화시에 여러가지 설정을 들을 수 있지만 모두 디폴트로 OK이므로, Enter 연타.
초기화가 완료되면 package.json가 생성됩니다.
TS_Project
└─ package.json
TypeScript 설치
그런 다음 package.json과 동일한 디렉토리에서 다음 명령을 실행합니다.
npm install typescript
그러면 package.json 내에 typescript가 추가되어 있는 것을 확인할 수 있다.
package.json "dependencies": {
"typescript": "^3.9.5"
}
지금까지 TypeScript 설치가 종료되었습니다.
폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ package-lock.json
└─ package.json
다음부터는 TypeScript의 파일을 작성해, 컴파일, 실행까지를 실시한다.
TypeScript 파일 만들기
TypeScript(이하 TS) 파일을 작성(이번은 app.ts)한다.
이번에는 콘솔에 문자를 출력하는 간단한 것.
app.tsconsole.log('Hello TypeScript');
html 파일에 <script> 로 읽어들입니다 (이번은 index.html).
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.ts" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
여기서 주의해 주었으면 하는 것은 <script> 로 읽어들이는 파일은 app.ts 는 아니고 app.js 가 된다고 하는 곳.
이것은 TS 파일은 컴파일러 후 JS 파일로 출력됩니다. html 파일은 그 JS 파일을 사용하기 위함이다.
이 시점에서의 폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
보시다시피 현재 app.js 파일이 없습니다.
TypeScript 컴파일
app.ts 가 있는 디렉토리에서 다음 명령을 실행합니다.
명령 프롬프트npx tsc app.ts
※npx는 npm 버전 5.2.0 이상에서 사용할 수 있는 명령
컴파일이 끝나면 app.js 파일이 생성됩니다.
방금전의 html 파일을 실행해 콘솔을 열면 「Hello TypeScript」가 표시되고 있다.
최종 폴더 구성은 아래.
TS_Project
├─ node_modules
├─ app.js
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
이상이 TypeScript의 인스톨->컴파일->실행의 흐름이 된다.
지금까지 우선은 당초의 목적은 달성할 수 있었다.
다음부터는 좀 더 세세하게 설정을 해 나간다.
TypeScript 프로젝트 설정
지금까지의 순서로는 TS파일이 복수 존재하는 경우, 각 파일을 지정해 컴파일해 가게 되어 현실적이지 않다.
프로젝트가 커짐에 따라 TypeScript의 세부 설정이 필요합니다.
따라서 TS 프로젝트를 설정하고 싶은 디렉토리에서 다음 명령을 실행하여 초기화합니다.
명령 프롬프트npx tsc --init
초기화가 끝나면 tsconfig.json가 생성됩니다.
앞으로는 이 파일이 있는 폴더+서브폴더는 TS에 의해 관리되게 된다.
덧붙여서 tsconfig.json에는 TS파일이 어떻게 컴파일되는지 등을 컨트롤하는 설정이 기재되어 있다.
이렇게하면 컴파일 타임에 파일을 지정하지 않고 프로젝트에있는 모든 TS 파일이 컴파일됩니다 (node_modules의 파일 제외).
명령 프롬프트npx tsc
tsconfig.json 의 내용에 대해서는 이쪽도 참고에.
초기화 직후 tsconfig.json을 번역해 보았습니다.
Reference
이 문제에 관하여(TypeScript 설치부터 실행까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
windows10
node.js v12.13.0
npm v6.12.0
typescript v3.9.5
이번에는 node.js를 사용하여 TypeScript를 설치하기 때문에 먼저 node.js를 설치합니다.
node.js (공식 사이트) -> htps : // 그래서 js. 오 rg / 그럼 /
TypeScript 설치 준비
TypeScript 프로젝트를 만들고 싶은 디렉토리를 초기화한다.
명령 프롬프트npm init
초기화시에 여러가지 설정을 들을 수 있지만 모두 디폴트로 OK이므로, Enter 연타.
초기화가 완료되면 package.json가 생성됩니다.
TS_Project
└─ package.json
TypeScript 설치
그런 다음 package.json과 동일한 디렉토리에서 다음 명령을 실행합니다.
npm install typescript
그러면 package.json 내에 typescript가 추가되어 있는 것을 확인할 수 있다.
package.json "dependencies": {
"typescript": "^3.9.5"
}
지금까지 TypeScript 설치가 종료되었습니다.
폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ package-lock.json
└─ package.json
다음부터는 TypeScript의 파일을 작성해, 컴파일, 실행까지를 실시한다.
TypeScript 파일 만들기
TypeScript(이하 TS) 파일을 작성(이번은 app.ts)한다.
이번에는 콘솔에 문자를 출력하는 간단한 것.
app.tsconsole.log('Hello TypeScript');
html 파일에 <script> 로 읽어들입니다 (이번은 index.html).
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.ts" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
여기서 주의해 주었으면 하는 것은 <script> 로 읽어들이는 파일은 app.ts 는 아니고 app.js 가 된다고 하는 곳.
이것은 TS 파일은 컴파일러 후 JS 파일로 출력됩니다. html 파일은 그 JS 파일을 사용하기 위함이다.
이 시점에서의 폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
보시다시피 현재 app.js 파일이 없습니다.
TypeScript 컴파일
app.ts 가 있는 디렉토리에서 다음 명령을 실행합니다.
명령 프롬프트npx tsc app.ts
※npx는 npm 버전 5.2.0 이상에서 사용할 수 있는 명령
컴파일이 끝나면 app.js 파일이 생성됩니다.
방금전의 html 파일을 실행해 콘솔을 열면 「Hello TypeScript」가 표시되고 있다.
최종 폴더 구성은 아래.
TS_Project
├─ node_modules
├─ app.js
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
이상이 TypeScript의 인스톨->컴파일->실행의 흐름이 된다.
지금까지 우선은 당초의 목적은 달성할 수 있었다.
다음부터는 좀 더 세세하게 설정을 해 나간다.
TypeScript 프로젝트 설정
지금까지의 순서로는 TS파일이 복수 존재하는 경우, 각 파일을 지정해 컴파일해 가게 되어 현실적이지 않다.
프로젝트가 커짐에 따라 TypeScript의 세부 설정이 필요합니다.
따라서 TS 프로젝트를 설정하고 싶은 디렉토리에서 다음 명령을 실행하여 초기화합니다.
명령 프롬프트npx tsc --init
초기화가 끝나면 tsconfig.json가 생성됩니다.
앞으로는 이 파일이 있는 폴더+서브폴더는 TS에 의해 관리되게 된다.
덧붙여서 tsconfig.json에는 TS파일이 어떻게 컴파일되는지 등을 컨트롤하는 설정이 기재되어 있다.
이렇게하면 컴파일 타임에 파일을 지정하지 않고 프로젝트에있는 모든 TS 파일이 컴파일됩니다 (node_modules의 파일 제외).
명령 프롬프트npx tsc
tsconfig.json 의 내용에 대해서는 이쪽도 참고에.
초기화 직후 tsconfig.json을 번역해 보았습니다.
Reference
이 문제에 관하여(TypeScript 설치부터 실행까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm init
TS_Project
└─ package.json
그런 다음 package.json과 동일한 디렉토리에서 다음 명령을 실행합니다.
npm install typescript
그러면 package.json 내에 typescript가 추가되어 있는 것을 확인할 수 있다.
package.json
"dependencies": {
"typescript": "^3.9.5"
}
지금까지 TypeScript 설치가 종료되었습니다.
폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ package-lock.json
└─ package.json
다음부터는 TypeScript의 파일을 작성해, 컴파일, 실행까지를 실시한다.
TypeScript 파일 만들기
TypeScript(이하 TS) 파일을 작성(이번은 app.ts)한다.
이번에는 콘솔에 문자를 출력하는 간단한 것.
app.tsconsole.log('Hello TypeScript');
html 파일에 <script> 로 읽어들입니다 (이번은 index.html).
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.ts" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
여기서 주의해 주었으면 하는 것은 <script> 로 읽어들이는 파일은 app.ts 는 아니고 app.js 가 된다고 하는 곳.
이것은 TS 파일은 컴파일러 후 JS 파일로 출력됩니다. html 파일은 그 JS 파일을 사용하기 위함이다.
이 시점에서의 폴더 구성은 다음과 같다.
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
보시다시피 현재 app.js 파일이 없습니다.
TypeScript 컴파일
app.ts 가 있는 디렉토리에서 다음 명령을 실행합니다.
명령 프롬프트npx tsc app.ts
※npx는 npm 버전 5.2.0 이상에서 사용할 수 있는 명령
컴파일이 끝나면 app.js 파일이 생성됩니다.
방금전의 html 파일을 실행해 콘솔을 열면 「Hello TypeScript」가 표시되고 있다.
최종 폴더 구성은 아래.
TS_Project
├─ node_modules
├─ app.js
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
이상이 TypeScript의 인스톨->컴파일->실행의 흐름이 된다.
지금까지 우선은 당초의 목적은 달성할 수 있었다.
다음부터는 좀 더 세세하게 설정을 해 나간다.
TypeScript 프로젝트 설정
지금까지의 순서로는 TS파일이 복수 존재하는 경우, 각 파일을 지정해 컴파일해 가게 되어 현실적이지 않다.
프로젝트가 커짐에 따라 TypeScript의 세부 설정이 필요합니다.
따라서 TS 프로젝트를 설정하고 싶은 디렉토리에서 다음 명령을 실행하여 초기화합니다.
명령 프롬프트npx tsc --init
초기화가 끝나면 tsconfig.json가 생성됩니다.
앞으로는 이 파일이 있는 폴더+서브폴더는 TS에 의해 관리되게 된다.
덧붙여서 tsconfig.json에는 TS파일이 어떻게 컴파일되는지 등을 컨트롤하는 설정이 기재되어 있다.
이렇게하면 컴파일 타임에 파일을 지정하지 않고 프로젝트에있는 모든 TS 파일이 컴파일됩니다 (node_modules의 파일 제외).
명령 프롬프트npx tsc
tsconfig.json 의 내용에 대해서는 이쪽도 참고에.
초기화 직후 tsconfig.json을 번역해 보았습니다.
Reference
이 문제에 관하여(TypeScript 설치부터 실행까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
console.log('Hello TypeScript');
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./app.ts" defer></script> <!-- 追加！！ -->
<title>初めてのTypeScript</title>
</head>
<body>
</body>
</html>
TS_Project
├─ node_modules
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
app.ts 가 있는 디렉토리에서 다음 명령을 실행합니다.명령 프롬프트
npx tsc app.ts
※npx는 npm 버전 5.2.0 이상에서 사용할 수 있는 명령
컴파일이 끝나면
app.js 파일이 생성됩니다.방금전의 html 파일을 실행해 콘솔을 열면 「Hello TypeScript」가 표시되고 있다.
최종 폴더 구성은 아래.
TS_Project
├─ node_modules
├─ app.js
├─ app.ts
├─ index.html
├─ package-lock.json
└─ package.json
이상이 TypeScript의 인스톨->컴파일->실행의 흐름이 된다.
지금까지 우선은 당초의 목적은 달성할 수 있었다.
다음부터는 좀 더 세세하게 설정을 해 나간다.
TypeScript 프로젝트 설정
지금까지의 순서로는 TS파일이 복수 존재하는 경우, 각 파일을 지정해 컴파일해 가게 되어 현실적이지 않다.
프로젝트가 커짐에 따라 TypeScript의 세부 설정이 필요합니다.
따라서 TS 프로젝트를 설정하고 싶은 디렉토리에서 다음 명령을 실행하여 초기화합니다.
명령 프롬프트npx tsc --init
초기화가 끝나면 tsconfig.json가 생성됩니다.
앞으로는 이 파일이 있는 폴더+서브폴더는 TS에 의해 관리되게 된다.
덧붙여서 tsconfig.json에는 TS파일이 어떻게 컴파일되는지 등을 컨트롤하는 설정이 기재되어 있다.
이렇게하면 컴파일 타임에 파일을 지정하지 않고 프로젝트에있는 모든 TS 파일이 컴파일됩니다 (node_modules의 파일 제외).
명령 프롬프트npx tsc
tsconfig.json 의 내용에 대해서는 이쪽도 참고에.
초기화 직후 tsconfig.json을 번역해 보았습니다.
Reference
이 문제에 관하여(TypeScript 설치부터 실행까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npx tsc --init
npx tsc
Reference
이 문제에 관하여(TypeScript 설치부터 실행까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eiji-noguchi/items/8c1d3741ac9f2857b230텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
