node typescript tutorial
1.0.0
Githubから来ますか？このチュートリアルのより良い視聴体験は、以下のサイトで入手できます：https：//pokedpeter.dev
このチュートリアルでは、以下のグッズを使用して、Barebonesノード（JavaScript）プロジェクトをゼロから構築する方法を示します。
前提条件：
Barebonesノードプロジェクトを設定しましょう
ノードプロジェクトを作成します。すべてのプロンプトオプションをスキップできます。
mkdir project
cd project
npm init package.jsonというファイルは、選択したオプションを使用してセットアップされます。インターフェイスオプションをスキップして、 npm init -yを実行することでデフォルトを使用することができます
{
"name" : " project " ,
"version" : " 1.0.0 " ,
"description" : " " ,
"main" : " index.js " ,
"scripts" : {
"test" : " echo " Error: no test specified " && exit 1 "
},
"author" : " " ,
"license" : " ISC "
}メイン実行可能なスクリプトは自動的に作成されません。それを作成します。
touch index.jsテストのために、 index.jsに基本的なものを入れます。
console . log ( 'Hello World' ) ;CLIからテストしてください：
node index.js
コンソール出力を提供します。
Hello World
JavaScriptには、標準的なライブラリが組み込まれていません。推奨されるアプローチは、NPMパッケージをインストールすることです。例を試してみましょう。便利なユーティリティの人気ライブラリであるLodashをインストールします。
npm install lodash
これが出力です：
added 1 package, and audited 4 packages in 987ms
found 0 vulnerabilities
Lodashが挿入されたので、アプリで使用できるようになりました。 index.jsをもう一度開き、一致するように更新します。
const _ = require('lodash);
console.log(_.snakeCase('Hello World'));
それを実行すると、次の出力が表示されます。
hello_world
package.jsonファイルをもう一度表示し、Lodashエントリの新しいdependenciesセクションに注意してください。
"dependencies" : {
"lodash" : " ^4.17.21 "
}ヒント
CLIからファイルの内容をすばやく表示するには、 cat package.jsonを入力してください
プロジェクトファイルを表示し、 node_modulesフォルダーが作成されていることに注意してください。
$ ls -l
index.js
node_modules
package-lock.json
package.jsonこのフォルダーは、依存関係が保存される場所です。それらをチェックしてみましょう：
$ ls node_modules
@types lodash typescriptBarebonesノードプロジェクトにタイプスクリプトを追加しましょう。
開発者の依存として、タイプスクリプト依存関係をインストールします。すべてのタイプスクリプトの依存関係は開発中にのみ必要なので、私たちはします--save-dev
npm install --save-dev typescriptノードのタイプスクリプトタイプ定義をインストール：
npm install --save-dev @types/nodeヒント
複数のパッケージを1回の行で組み合わせて、1回のパッケージをインストールします： npm install --save-dev typescript @types/node
package.jsonの依存関係をご覧ください。関連する部分は次のとおりです。
{
"devDependencies" : {
"@types/node" : " ^20.4.9 " ,
"typescript" : " ^5.1.6 "
}
}プロジェクト内のどこでも次のコマンドを実行してタイプスクリプトを初期化します。
npx tsc --initこれにより、デフォルト設定を備えたtsconfig.jsonファイルが作成されます。
Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
package.jsonを介してインストールされているローカルにインストールされたバイナリを実行するnpxを使用します。
警告
一部のインストールガイドでは、TypeScriptをグローバルにsudo npm install -g typescriptすることをお勧めします。ローカルバージョンをインストールすることをお勧めします（つまり、プロジェクトフォルダー内）
グローバルバージョンは、プロジェクト用にインストールされているローカルバージョンとは異なる場合があります。 tscを実行すると、グローバルバージョンを直接使用します。 tscプロジェクトのNPMの一部として実行されると、ローカルバージョンを使用します。
tsconfig.jsonでデフォルトで設定されたいくつかのオプションがあります。コメントされたオプションがたくさんあります - 以下に示されていません。
{
"compilerOptions" : {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
"target" : " es5 " , /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module" : " commonjs " , /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
/* Strict Type-Checking Options */
"strict" : true , /* Enable all strict type-checking options. */
/* Module Resolution Options */
"esModuleInterop" : true , /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Advanced Options */
"skipLibCheck" : true , /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames" : true /* Disallow inconsistently-cased references to the same file. */
}
}デフォルトへの推奨調整の一部：
"target" : " es2015 " , // I'd recommend es2015 at a minimum. es5 is ancient.
"outDir" : " build " , // Keep our compiled javascript in the build directory
"rootDir" : " src " , // Keep our source code in a separate directory
"noImplicitAny" : true , // We're using Typescript yeah? And not adding Typescript to an existing project. Enforce good habits from the start.
"lib" : [ " es2020 " ], // Setting this excludes DOM typings as we are using Node. Otherwise you'll run into errors declaring variables like 'name' targetに関して。通常、新しいバージョンのノードは、新しいECMA機能をサポートします。以下のウェブサイトは、ノードの各バージョンで利用可能なECMA機能を確認するための優れたリソースです。
https://node.green/
index.jsはもう必要ありません：
rm index.jsプロジェクトソースコードを設定します。
mkdir src
cd src
touch index.ts index.tsに基本的なものを追加してテストします。
console . log ( 'Hello typescript!' ) ;Barebonesプロジェクトをコンパイルします。
npx tsc JavaScriptとしてのコンパイルされた出力は、 /buildディレクトリにあります。 src/index.tsをミラーリングするindex.jsが含まれます
index.jsの内容：
"use strict" ;
console . log ( 'Hello World!' ) ;これで、TypeScriptを使用してJavaScriptプロジェクトを構築する準備ができました！
最近まで、TSLINTはboto-to-typscriptコードリナーでしたが、プロジェクトがEslintに統合されたため、現在は非推奨になっています。これが公式のホームページです：
Webサイト：
https://eslint.org
githubサイト：
https://github.com/typescript-eslint/typescript-eslint
ESLINTをインストールする（もちろん開発として）
npm install --save-dev eslintEslintのinitコマンドを使用して、Lint構成をセットアップしましょう。
npx eslint --initプロンプトに従ってください。ノードを使用しているため、ブラウザのサポートは必要ありません。依存型タイプスクリプトプラグインをインストールするかどうかを尋ねます。先に進んでそれをしてください。
✔ How would you like to use ESLint ? · problems
✔ What type of modules does your project use ? · esm
✔ Which framework does your project use ? · none
✔ Does your project use TypeScript ? · No / Yes
✔ Where does your code run ? · node
✔ What format do you want your config file to be in ? · JSON
The config that you ' ve selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /your/project以下のLINT構成の詳細：
https://eslint.org/docs/user-guide/configuring
上記のオプションを使用して、.eslintrc.jsonファイルは次のようになります。
{
"env" : {
"es2020" : true ,
"node" : true
},
"extends" : [
" eslint:recommended " ,
" plugin:@typescript-eslint/recommended "
],
"parser" : " @typescript-eslint/parser " ,
"parserOptions" : {
"ecmaVersion" : 11 ,
"sourceType" : " module "
},
"plugins" : [
" @typescript-eslint "
],
"rules" : {
}
}ESLINT INITプロセス中の質問の1つがこれでした。
? How would you like to use ESLint ? …
To check syntax only
▸ To check syntax and find problems
To check syntax, find problems, and enforce code style最後のオプションは、コードスタイルをさらに実施します。そのオプションを選択すると、フォローアップの質問は次のとおりです。
? How would you like to define a style for your project ? …
▸ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)人気のあるスタイルガイドを使用することを選択した場合、次の選択肢から選択できます。
? Which style guide do you want to follow ? …
▸ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo上記のスタイルのガイドを調査し、あなたの好みと一致するものと一緒に行くことをお勧めします。
次に、Plaintテキストで別の構成ファイルを作成して、糸くずからファイルとディレクトリを除外できるようにします。
touch .eslintignore次の内容をファイルに追加します。
node_modules
build
コンパイルされたJavaScriptコードに並ぶことは望ましくありません。
デフォルトでは、標準ルールが有効になっています。リストのチェック型アイテムを参照してください。
https://eslint.org/docs/rules/
たとえば、 no-extra-semiルールを破ってみましょう。
index.tsのラインの最後に半コロンを追加してみて、リントチェックを実行してエラーを確認してください。
console . log ( 'Hello typescript' ) ; ;その後：
npx eslint src結果：
1:34 error Unnecessary semicolon @typescript-eslint/no-extra-semi
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
警告
Airbnbオプションをインストールするとき、ESLINTが.tsファイル拡張子を渡す必要があることに気付きました。
npx eslint src --ext .ts package.jsonでこのスクリプトを作成して、便利に呼び出すことができます。
"scripts" : {
...
"lint" : " eslint src --ext .ts "
},NPM <V7でのみ適用されますが、NPMスクリプトを実行して問題が見つかった場合、ESLINT出力の下に次のNPMエラーメッセージが追加されることに注意してください。
> eslint src --ext .ts
/home/user/dev/test/src/index.ts
1:1 warning Unexpected console statement no-console
1:21 error Missing whitespace after semicolon semi-spacing
1:22 error Unnecessary semicolon no-extra-semi
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the ` --fix ` option.
npm ERR ! code ELIFECYCLE
npm ERR ! errno 1
npm ERR ! [email protected] lint: ` eslint src --ext .ts `
npm ERR ! Exit status 1
npm ERR !
npm ERR ! Failed at the [email protected] lint script.
npm ERR ! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR ! A complete log of this run can be found in:
npm ERR ! /home/user/.npm/_logs/2021-08-18T15_27_55_318Z-debug.logNPM V7でNPMエラーが表示されません（たとえば、ノード16.6.2を使用する場合）
各ルールは、3つの状態のいずれかになります。
| ルールモード | 説明 |
|---|---|
| 0または「オフ」 | ルールを無効にします |
| 1または「警告」 | 警告、リナーは失敗しません |
| 2または「エラー」 | エラー、リナーは失敗します |
Luring configファイルのルールオブジェクトへのキーとしてルールを追加できます。Slintrc.json：
{
"root" : true ,
"parser" : " @typescript-eslint/parser " ,
"plugins" : [ ... ],
"extends" : [ ... ],
"rules" : {
..your rules go here..
}
}eslint.orgでルールを見つける：
https://eslint.org/docs/rules/
「Comma-Dangle」という名前の文体ルールをテストしましょう。複数の行の配列が最後のアイテムにコンマが欠落している場合、ユーザーに警告したいと思います。
ルールを追加します：
"rules" : {
"comma-dangle" : [
" warn " , {
"arrays" : " always-multiline "
}
]
}ウェブサイトのルールの詳細を読んでください。多くのルールにはかなりのカスタマイズが許可されています。この例のすべてのシナリオで、ぶら下がっているコンマを包括的に強制したいと考えています。
次のコードでindex.tsを変更します。
const movies = [
'Lord of the Flies' ,
'Battle Royale'
] ;
movies . pop ( ) ;リナーを実行します：
npx eslint src今、私たちは次の警告を見る必要があります：
3:18 warning Missing trailing comma comma-dangle
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the ` --fix ` option.注Outputには、問題を修正するオプションがあります。 --fixオプションでリナーを実行してみてください：
npx eslint --fix src今回はリナーからの出力はありませんindex.tsチェックすると、ダングリングコンマが自動的に追加されていることがわかります。
const movies = [
'Lord of the Flies' ,
'Battle Royale' , // <-- dangling comma added
] ;
movies . pop ( ) ; きれいにコードをフォーマットします。これは、JSONやYAMLなどの構成に使用できるTypeScript、JavaScript、その他の形式など、多くの言語をサポートする意見のコードフォーマッタです。
https://prettier.io
または、Eslintに固執して、コードをスタイリスト的にフォーマットすることもできます。少数のオプションのいずれかを設定しない限り、コードを変更しないという点で、きれいなものが異なります。
モジュールをインストールします。
npm install --save-dev prettier構成ファイルを作成します。これにより、編集者や他のツールは、あなたがきれいに使用していることを知ることができます：
echo {} > .prettierrc.jsonほとんどの場合、コードの変換が含まれるため、構成ファイルにオプションを追加する必要はないでしょう。それをeslintに任せて、よりきれいにフォーマットに対処させてください。
無視ファイルを作成します。これにより、きれいなCLIと編集者は、フォーマットからどのファイルを除外するファイルを知ることができます。
touch .prettierignore次の行を.prettierignoreに追加します。
node_modules
build次のコマンドでよりきれいをテストします。フォーマットされたコードを出力するだけでは、何もオーバーライブしません。
npx prettier srcindex.tsへの最後の変更に基づいて、出力は次のとおりです。
const movies = [ "Lord of the Flies" , "Battle Royale" ] ;
movies . pop ( ) ;マルチラインアレイが単一の行にフォーマットされていることがわかります。
オプション--write ：を使用してコマンドを繰り返して、ファイルへの変更を記述します。
npx prettier --write srcこれにより、フォーマットされたファイルがリストされます。
src/index.ts 279msEslintとTheの両方がコードをフォーマットできることを考えると、いくつかの競合が発生することが予想されます。 Prettierは、ESLINT専用のルールを作成しました。これは、きれいな場合に不必要なまたは矛盾するルールを基本的に無効にします。
最初のものはeslint-config-prettierです：
https://github.com/prettier/eslint-config-prettier
この構成は、不要なすべてのルールまたはよりきれいなものと競合するすべてのルールをオフにします。次のコマンドでインストールします。
npm install --save-dev eslint-config-prettier次に、ESLINT Config、 .eslintrc.jsonのextendsセクションの最後の行に追加します。
{
"extends" : [
"eslint:recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"prettier" // <-- Add this
] ,
}任意のファイルで次のコマンドを実行して、EslintとTheの間に競合がないことを確認できます。
npx eslint-config-prettier src/index.tsすべてがうまくいけば、次のreponeを取得する必要があります。
No rules that are unnecessary or conflict with Prettier were found.次にインストールするのはeslint-plugin-prettierです。
https://github.com/prettier/eslint-plugin-prettier
ESLINTルールとしてよりきれいに実行され、個々のESLINTの問題として違いを報告します。次のコマンドでインストールします。
npm install --save-dev eslint-plugin-prettier次に、次のように.eslintrc.jsonファイルを更新します。
{
"plugins" : [ " prettier " ],
"rules" : {
"prettier/prettier" : " error "
}
}以下のプラグインを検索します。
ESLint -Dirk Baeumerによる
以下のプラグインを検索します。
Prettier - Code formatterきれいによる
Ctrl + Shift + Iを押してコードをフォーマットします。デフォルトのフォーマッタを選択するように求められます。デフォルトとしてきれいに選択します。
以下のプラグインを検索します。
Prettier ESLint -Rebecca Vestによる
これらのスクリプトは、TypeScriptプロジェクトに合わせて調整されています。 .tsファイルのみをチェックしています。
package.jsonのscriptsセクションに以下のコマンドを追加します。
"start:dev" : " nodemon " "lint" : " eslint --ext .ts src "
"lint-fix" : " eslint --fix --ext .ts src " "pretty" : " prettier --write 'src/**/*.ts' " カーブボールは、ノードにAPIを構築するためのマイクロフレームワークです。より人気のある前任者のKOAとは対照的に、TypeScriptをサポートしてゼロから構築されています。
https://curveballjs.org/
インストール：
npm install @curveball/core Webサイトからindex.tsに例をコピーします。変更するのはポート番号だけです。 2つの理由から。 1つは、ポート80がブロックされる場合があります。二。さまざまなポートで実行すると、複数のノードプロジェクトを同時に実行できるようになります。
import { Application } from '@curveball/core' ;
const app = new Application ( ) ;
app . use ( async ctx => {
ctx . response . type = 'text/plain' ;
ctx . response . body = 'hello world' ;
} ) ;
app . listen ( 9000 ) ;以前に作成したスクリプトを使用して、DEVモードでサーバーを起動します。
npm run start:devNodemonがリッスンして変更をファイルすると、次の出力が得られます。
> [email protected] start:dev /home/your_name/project
> nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter ` rs `
[nodemon] watching path(s): src/ ** / *
[nodemon] watching extensions: ts,jsコードを変更した後、サーバーコンソールの出力が職場でノデモンになるように見てください。また、Webページを更新して更新を確認します。
開発のためのコード変更後に自動リロードをセットアップします。 nodemonをインストールして、ファイルの変更とts-node監視して、コンパイルしてからnodeに渡すのではなく、タイプスクリプトコードを直接実行します。
npm install --save-dev ts-node nodemon nodemon.json configを追加します。これにより、ソースコードディレクトリ内の.tsおよび.jsファイルの変更を監視するようにnodemonを構成し、変更後にexecコマンドを実行します。
{
"watch" : [ " src " ],
"ext" : " .ts,.js " ,
"ignore" : [],
"exec" : " ts-node ./src/index.ts "
} package.json内にNPMスクリプトを追加して、開発のためにnodemonをキックオフします。
"start:dev" : " nodemon " npm run start:devを実行して、リロードプロセスを開始します。
dockerとlookupの指示をインストールし、sudoなしでdockerを実行する方法 - os /ディストリビューション固有のためにここでは省略されています。
サービスとして単一のノードコンテナを備えたdocker-compose.ymlファイルを作成します。
私たちのプロジェクトの名前は、サービスとコンテナの名前と同様に「プロジェクト」です。プロジェクトディレクトリをノードコンテナ内の /プロジェクトにマッピングするボリュームがあります。最後に、ポートがアプリケーションで露出したポートと一致するようにします。
以下の詳細：
https://docs.docker.com/compose/compose-file/
version : ' 3 '
services :
project :
build : .
container_name : project
volumes :
- .:/project
ports :
- " 9000 "次に、次の内容を持つDockerfileを作成します。
FROM node:12
WORKDIR /project
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm" , "run" , "start:dev" ]これにより、コンテナ内にプロジェクトディレクトリが設定され、ノードパッケージをインストールし、ネイティブファイルシステムからコンテンツをコピーし、DEVモードでカーブボールサーバーを起動します。
容器を持ち上げます：
docker-compose up次の出力が表示されます。
Creating network "project_default" with the default driver
Building project
Step 1/7 : FROM node:12
---> dfbb88cfffc8
Step 2/7 : WORKDIR /project
---> Running in 86fff3a3c90b
Removing intermediate container 86fff3a3c90b
---> 5912fd119492
Step 3/7 : COPY package.json .
---> 4fa4df04cc6b
Step 4/7 : RUN npm install
---> Running in 8b814e4d75d2
...
(Node package installation happens here)
...
Removing intermediate container 8b814e4d75d2
---> 3bfd2b1a83e4
Step 5/7 : COPY . .
---> f6971fdf7fb5
Step 6/7 : EXPOSE 9000
---> Running in 2ab0a152b0a6
Removing intermediate container 2ab0a152b0a6
---> 0e883b79c1b3
Step 7/7 : CMD ["npm", "run", "start:dev"]
---> Running in f64884ae2643
Removing intermediate container f64884ae2643
---> 1abb8edf6373
Successfully built 1abb8edf6373
Successfully tagged project_project:latest
WARNING: Image for service project was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating project ...
Creating project ... done
Attaching to project
project |
project | > [email protected] start:dev /project
project | > nodemon
project |
project | [nodemon] 2.0.4
project | [nodemon] to restart at any time, enter `rs`
project | [nodemon] watching path(s): src/**/*
project | [nodemon] watching extensions: ts,js
project | [nodemon] starting `ts-node ./src/index.ts`
CTRL-Cを使用してコンテナを停止できます。
docker-compose up -dを使用して、コンテナを取り外しモードで持ち上げます - それはブラックグラウンドで育てられ、コマンドラインを自由に使用し続けることができます。
ノードV12に基づいてコンテナを作成しています。コンテナ内の作業ディレクトリは/projectとして定義されています（プロジェクトコードがマッピングされる場所）
インストールされているノードのバージョンは、インストールされているOSとパッケージの最新情報によって異なります。
Dockerコンテナの外でノードを使用し、複数のノードプロジェクトで作業する場合、それぞれ異なるバージョンのノードを必要としてから、NVMをインストールします。
https://github.com/nvm-sh/nvm
このチュートリアルを作成してくれたことに感謝します。
