[초입문] 프로젝트에 Type Script 설치
12221 단어 TypeScript
요약
4
4
배경.
작업 중에 프론트 데스크를 살짝 만진 건 아직 잘 모르겠고, 자바스크립트는 정적 타입이 아니어서 대규모 개발에서 쉽지 않은 인상을 주기 때문에 스타일리시해서 동료들에게 추천받은 타입 스크립트를 시작하고 싶어요.
목표
Microsoft의 "Type Script in 5 minutes"텍스트가 있으므로 이것에 따라 ts 파일을 js로 만듭니다.
https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/TypeScript%20in%205%20minutes.md
컨디션
Node.js: v9.7.1(ndenv 관리)
npm: 5.6.0
명령하다
package.json 만들기
% cd ~/typescript-tutorial-qiita
% npm init
먼저 이름 이외의 것을 yes에 모두 기억해라.
package.json{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Toriyabot",
"license": "ISC"
}
typescript 설치
% npm install --save-dev typescript
package.json 11 "devDependencies": {
12 "typescript": "^2.8.1"
13 }
package.json의 devDependencies에 Type Script를 추가했습니다.
(참조) - save와 -save dev의 차이점 사용
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
tsconfig.json 설정
tsconfig.json이 있는 디렉토리는 TypeScript의 루트입니다.
공백에서 실행할 수 있습니다. (기본값으로 컴파일된 것 같습니다.)
설정 예
tsconfig.json{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true
},
"include": [
"src/**/*",
"*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
include, exclude가 컴파일에 포함되어 있지 않기 때문에 그런 뜻입니다.
당분간 프로젝트 노선에 맞는 ts파일을 제작하고 그것도 미리 지정한다.
tsconfig.json 정보
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
ts 파일
단지 한번 운행해 보았을 뿐이기 때문에, 템플릿으로 번역해 보았다
greeter.jsfunction greeter(person: string) {
return "Hello, " + person;
}
let user = "Toriyabot User";
document.body.innerHTML = greeter(user);
npm run tsc greeter.ts
npm ERR! file ~/project/typescript-tutorial-qiita/package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 182 while parsing near '...ied\" && exit 1",
npm ERR! },
npm ERR! "author": "Tori...'
npm ERR! File: ~/project/typescript-tutorial-qiita/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2018-04-09T14_48_33_273Z-debug.log
아이고, 패키지.제이슨의 기술이 부족합니다.
tsc 로그인
scripts에서.라고 덧붙였다.
tsc는 typescript compuiler의 약칭입니다.
package.json{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"tsc": "tsc"
},
"author": "Toriyabot",
"license": "ISC",
"devDependencies": {
"typescript": "^2.8.1"
}
}
% npm run tsc greeter.ts
> [email protected] tsc ~/project/typescript-tutorial-qiita
> tsc "greeter.ts"
% ls
greeter.js greeter.ts node_modules package-lock.json package.json
js 파일이 생성되었습니다.
greeter.jsfunction greeter(person) {
return "Hello, " + person;
}
var user = "Toriyabot User";
document.body.innerHTML = greeter(user);
성과물을 확인하다
greeter.html<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
예정대로 js가 역할을 발휘한 것 같습니다.
Node.js: v9.7.1(ndenv 관리)
npm: 5.6.0
명령하다
package.json 만들기
% cd ~/typescript-tutorial-qiita
% npm init
먼저 이름 이외의 것을 yes에 모두 기억해라.
package.json{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Toriyabot",
"license": "ISC"
}
typescript 설치
% npm install --save-dev typescript
package.json 11 "devDependencies": {
12 "typescript": "^2.8.1"
13 }
package.json의 devDependencies에 Type Script를 추가했습니다.
(참조) - save와 -save dev의 차이점 사용
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
tsconfig.json 설정
tsconfig.json이 있는 디렉토리는 TypeScript의 루트입니다.
공백에서 실행할 수 있습니다. (기본값으로 컴파일된 것 같습니다.)
설정 예
tsconfig.json{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true
},
"include": [
"src/**/*",
"*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
include, exclude가 컴파일에 포함되어 있지 않기 때문에 그런 뜻입니다.
당분간 프로젝트 노선에 맞는 ts파일을 제작하고 그것도 미리 지정한다.
tsconfig.json 정보
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
ts 파일
단지 한번 운행해 보았을 뿐이기 때문에, 템플릿으로 번역해 보았다
greeter.jsfunction greeter(person: string) {
return "Hello, " + person;
}
let user = "Toriyabot User";
document.body.innerHTML = greeter(user);
npm run tsc greeter.ts
npm ERR! file ~/project/typescript-tutorial-qiita/package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 182 while parsing near '...ied\" && exit 1",
npm ERR! },
npm ERR! "author": "Tori...'
npm ERR! File: ~/project/typescript-tutorial-qiita/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2018-04-09T14_48_33_273Z-debug.log
아이고, 패키지.제이슨의 기술이 부족합니다.
tsc 로그인
scripts에서.라고 덧붙였다.
tsc는 typescript compuiler의 약칭입니다.
package.json{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"tsc": "tsc"
},
"author": "Toriyabot",
"license": "ISC",
"devDependencies": {
"typescript": "^2.8.1"
}
}
% npm run tsc greeter.ts
> [email protected] tsc ~/project/typescript-tutorial-qiita
> tsc "greeter.ts"
% ls
greeter.js greeter.ts node_modules package-lock.json package.json
js 파일이 생성되었습니다.
greeter.jsfunction greeter(person) {
return "Hello, " + person;
}
var user = "Toriyabot User";
document.body.innerHTML = greeter(user);
성과물을 확인하다
greeter.html<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
예정대로 js가 역할을 발휘한 것 같습니다.
% cd ~/typescript-tutorial-qiita
% npm init
{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Toriyabot",
"license": "ISC"
}
% npm install --save-dev typescript
11 "devDependencies": {
12 "typescript": "^2.8.1"
13 }
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true
},
"include": [
"src/**/*",
"*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Toriyabot User";
document.body.innerHTML = greeter(user);
npm run tsc greeter.ts
npm ERR! file ~/project/typescript-tutorial-qiita/package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 182 while parsing near '...ied\" && exit 1",
npm ERR! },
npm ERR! "author": "Tori...'
npm ERR! File: ~/project/typescript-tutorial-qiita/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2018-04-09T14_48_33_273Z-debug.log
{
"name": "typescript-tutorial-qiita",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"tsc": "tsc"
},
"author": "Toriyabot",
"license": "ISC",
"devDependencies": {
"typescript": "^2.8.1"
}
}
% npm run tsc greeter.ts
> [email protected] tsc ~/project/typescript-tutorial-qiita
> tsc "greeter.ts"
% ls
greeter.js greeter.ts node_modules package-lock.json package.json
function greeter(person) {
return "Hello, " + person;
}
var user = "Toriyabot User";
document.body.innerHTML = greeter(user);
greeter.html
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
예정대로 js가 역할을 발휘한 것 같습니다.
Reference
이 문제에 관하여([초입문] 프로젝트에 Type Script 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/toricor_/items/6ef7f53c4e11aa5167e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
