1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScriptで何か書くときの最初の設定メモ

Posted at

TypeScriptについてだと、設定( tsconfig.json とか)やコンパイル体制などが必要で、JavaScriptのように、単にエディタとかでJSファイル作ればそれでいい、とはならない(とはいえプロジェクトなら素のJSでもモノによってはNodejsの設定とか必要だが)
が、始める時に毎回いちいち書籍とか関連サイトとか巡ってコード引っ張ってきたりするのも面倒なので、ここにとりあえずこれ打ち込んでおけばOKのメモを記録しておきます

…本当なら自分の頭に記憶していくのが一番いいが、自分の記憶力は壊滅レベルなので

このあたりの手順については、既に書籍やWeb上に色々書いてあると思いますが、今回書く手順についてはオライリー・ジャパンの「プログラミングTypeScript」(ISBN-978-4-87311-904-5)の第2章及び付録Hを参考にしています

TL;DR

コマンドだけ抜き出しておく
このあたり叩き込んで、srcディレクトリにindex.jsとか作ってコード書けばそれだけでいいレベルのもの

環境の用意

npm init
npm i -D typescript
npx tsc --init
npm i D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
mkdir src

src下にindex.tsとか作って中身のコード書いてからコンパイル

.\node_modules .bin/tsc

ここまでできれば、あとは

node .\dist\index.js

とかすれば実行できる

#前提

自分が今やってる環境が

  • Windows10
  • VSCode

なので、その中でやる形になります
もちろんコマンド実行は WindowsPowerShell になります

#環境の用意

まずはプロジェクト作りたいディレクトリ下にて、プロジェクトのディレクトリを作成します(右クリックでもmkdirでもなんでもいい)
作成できたらPowerShellで、そのプロジェクトのディレクトリ下にcdとかで移動し、次のコマンドを実行します

npm init
npm i -D typescript
npx tsc --init
npm i D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

1行目でnpmを初期化します
設定に関して色々対話式で言われますが、面倒なので全部エンターキー押してデフォルト設定すればいです(なのでnpm init -yとかでもいい)
2行目でTypeScriptをインストールします
3行目でtsconfig.jsonを作成します
デフォルト設定で全部やってるので、特に何もなければこれでいいですが、JSファイルの出力先outDirが設定されておらずsrcディレクトリに出力されることになるので、よくある形だと(後からでもエディタなりなんなりで)distに設定しておくといいかもしれないです
4行目でリンターとしてESLintを設定しています

ここまでで、TSコード作成できる準備はだいたいできました
詳しい人から見ればtsconfig.jsonの設定とか色々まだあると思いますが、とりあえず動けばいいのを用意するのが目標なのでここまでで

#TypeScriptファイル作成

プロジェクトのディレクトリ下にsrcディレクトリを作り、その中にてきとーな名前つけたtsファイル(よくあるものだとindex.tsあたり)作って、中身のコードを書きます

#TypeScriptのコンパイルと完成したJSファイルの実行

すでにnode_moduleディレクトリ配下にTypeScriptコンパイラbin/tscができているので、それを実行します
PCのの設定で制限かかって実行できない場合は、先にSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Processあたりで実行ポリシーの制限を緩めておきましょう

.\node_modules .bin/tsc

(なんかうまく実行できなかったので、cdnode_modulesに入ってから.bin/tscコマンド実行して対応したりした)

ここまでくればほぼ完了で、distディレクトリ配下(tsconfig.json修正してなければsrc配下)にindex.tsからコンパイルされたindex.jsができてます
このファイル単体で動かしてテストしたい場合は以下のコマンドで実行してみましょう

node .\dist\index.js

実用で書くものとかだとこれだけでは不十分だと思いますが、とりあえず動けばいいもの、自分用メモということで、今回はこれまで

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?