{"id":817,"date":"2020-07-23T23:28:35","date_gmt":"2020-07-23T14:28:35","guid":{"rendered":"https:\/\/www.typea.info\/blog\/?p=817"},"modified":"2020-10-30T23:56:58","modified_gmt":"2020-10-30T14:56:58","slug":"typescript_node_environment","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2020\/07\/23\/typescript_node_environment\/","title":{"rendered":"\u30ed\u30fc\u30ab\u30eb\u306bTypeScript\u306e\u52d5\u4f5c\u78ba\u8a8d\u74b0\u5883\u3092Node.js\u3067\u4f5c\u6210\u3057\u305f\u30e1\u30e2"},"content":{"rendered":"

<\/a>\"\"<\/p>\n

TypeScript\u306e\u52d5\u4f5c\u78ba\u8a8d\u3092\u7c21\u5358\u306b\u3059\u308b\u306a\u3089\u3001TypeScript Playground<\/a> \u3092\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u4f7f\u3046\u306e\u304c\u7c21\u5358<\/p>\n

\"typescript_playground\"<\/a><\/p>\n

\u3067\u306f\u3042\u308b\u3093\u3060\u3051\u308c\u3069\u3001\u8efd\u304f\u30ed\u30fc\u30ab\u30eb\u3067\u3082\u52d5\u304b\u3057\u305f\u3044\u306e\u3067\u8a2d\u5b9a\u3057\u305f\u306e\u3060\u304c\u3001\u3061\u3087\u3063\u3068\u9762\u5012\u3060\u3063\u305f\u306e\u3067\u30e1\u30e2\u3002<\/p>\n

\u00a0<\/p>\n

Node.js<\/a> \u3068 TypeScript<\/a> \u306f\u8a2d\u5b9a\u3057\u3066\u304a\u304f\u3002<\/p>\n

\u00a0<\/p>\n

1.TypeScript\u3068Node.js\u306e\u74b0\u5883\u4f5c\u6210<\/h2>\n

1.1 npm package.json \u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210<\/h3>\n

\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea(\u4eca\u56de\u306fsample)\u3092\u4f5c\u6210\u3057\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3001package.json\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u308b<\/p>\n

$ npm init -y\nWrote to \/Users\/hirotoyagi\/Workspaces\/Node\/sample\/package.json:<\/pre>\n
{
\n \u201cname\u201d: \u201csample\u201d,
\n \u201cversion\u201d: \u201c1.0.0\u201d,
\n \u201cdescription\u201d: \u201c\u201d,
\n \u201cmain\u201d: \u201cindex.js\u201d,
\n \u201cscripts\u201d: {
\n \u201ctest\u201d: \u201cecho “Error: no test specified” && exit 1\u201d
\n },
\n \u201ckeywords\u201d: [],
\n \u201cauthor\u201d: \u201c\u201d,
\n \u201clicense\u201d: \u201cISC\u201d
\n}<\/p>\n
1.2 TypeScript\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n
TypeScript \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001tsc \u30b3\u30f3\u30d1\u30a4\u30e9\u304c\u547c\u3073\u51fa\u305b\u308b\u304b\u78ba\u8a8d<\/p>\n
$ npm install \u2013save-dev typescript\n$ node_modules\/.bin\/tsc \u2013version\nVersion 3.9.7<\/pre>\n
1.3 package.json \u3092\u7de8\u96c6\u3057\u3066TypeScript\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3067\u304d\u308b\u3088\u3046\u306b<\/h3>\n
\u201cscripts\u201d: {\n \u201cbuild\u201d: \u201ctsc\u201d,\n \u201cwatch\u201d: \u201ctsc \u2013watch\u201d\n },<\/pre>\n
1.4 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092TypeScript\u306b\u521d\u671f\u5316\u3059\u308b<\/h3>\n
tsconfig.json \u304c\u4f5c\u6210\u3055\u308c\u308b<\/p>\n
$ node_modules\/.bin\/tsc \u2013init\nmessage TS6071: Successfully created a tsconfig.json file.<\/pre>\n
1.5 Node.jp\u306e\u578b\u5b9a\u7fa9\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
$ npm install \u2013save @types\/node<\/pre>\n
1.6 \u3044\u3063\u305f\u3093TypeScript\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066Node.js\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f<\/h3>\n
(1) app.ts \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u4ee5\u4e0b\u3092\u8a18\u8ff0<\/h3>\n
console.log(\u201ctest\u201d);<\/pre>\n
(2) \u30d3\u30eb\u30c9<\/h3>\n
TypeScript\u3092Node.js\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<\/p>\n
$ npm run build<\/pre>\n
app.js \u304c\u751f\u6210\u3055\u308c\u308b\u3002<\/pre>\n
(3) \u5b9f\u884c<\/h3>\n
\u4ee5\u4e0b\u3067\u3001Node.js\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u5b9f\u884c\u3059\u308b<\/p>\n
$ node app<\/pre>\n
\u00a0<\/pre>\n
2.\u30d6\u30e9\u30a6\u30b6\u3067\u52d5\u304b\u3059\u6e96\u5099<\/h2>\n
2.1 Http Server\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
$ npm\u3000install -g http-server<\/pre>\n
2.2 TypeScript\u306e\u8a2d\u5b9a<\/h3>\n
tsconfig.json<\/p>\n