RiderとTypeScript

###RiderとTypeScript

####前提条件
node.jsをインストール
npmをインストール
typeScriptをインストール

```
$ node --version
$ npm --version
$ tsc --version
```

####TypeScriptのプラグインをインストール
設定 - Marketplaceからインストールする
<img width="500" alt="Screenshot from 2021-06-03 14-44-47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/ab241681-42a7-c16d-b8e0-52b9c8833b10.png">
インストールすると実行構成にtypescriptの設定画面が現れる
<img width="200" alt="Screenshot from 2021-06-03 14-50-59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/e897e100-f48d-cedc-8874-d71750d50834.png">
####TypeScriptファイルとtsconfigファイルを作成する
exploerから右クリックでTypeScriptファイルとtsconfigファイルを作成する


```
add - tsconfig.json
```
<img width="300" alt="Screenshot from 2021-06-03 15-18-50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/1eaca1ec-3a44-b78c-e03b-0d28a2f4149c.png">
####package.jsonファイルを作成する
```
add - package.json
```
exploerから右クリックからpackage.jsonファイルを作成します

```
"private": true
```
 このファイルはパッケージのリポジトリであるnpmjs.orgにアップロードする際に必要な情報もすべて入ります。 仕事のコードやハンズオンのプロジェクトを間違って公開しないように(することもないと思いますが)、 "private": true を書き足す


####TypeScriptファイルとtsconfig.jsonパスを設定
TypeScriptファイルとtsconfig.jsonのファイルのパスを設定する
<img width="500" alt="Screenshot from 2021-06-03 14-52-11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/31954566-1f27-131c-179a-9ff759d065f3.png">
デフォルトでは相対パスになっています

https://qiita.com/ryokkkke/items/390647a7c26933940470#outdir

####TypeScript形式でプログラムを書く
TypeScriptファイルに記述する

```
function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";

console.log(greeter(user));
```

####TypeScriptファイルをコンパイル
エディタ上で右クリックするとコンパイルを実行するが表示される
この画面で右クリック - コンパイルを実行
<img width="400" alt="Screenshot from 2021-06-03 15-14-37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/ede8b8f4-cdb7-cd97-d7cf-28bdd60dd07d.png">
####JavaScriptが生成される
同じフォルダにJavaScriptが生成される
<img width="200" alt="Screenshot from 2021-06-03 15-14-37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/41898792-333f-4a78-9ba1-b8ce75187423.png">
####JavaScriptの実行環境を作ってから実行
node.jsベース　プラウザベースで実行環境を作ってから実行
<img width="500" alt="Screenshot from 2021-06-03 15-14-37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/83a6788e-d768-7262-f51f-25b49db6325f.png">
<img width="300" alt="Screenshot from 2021-06-03 15-14-37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2a613f84-ff9d-351c-97cd-8954b9545290.png">

####JavaScriptをそのまま実行
実行環境作らなくてもこの画面で右クリックからでも実行できます
<img width="300" alt="Screenshot from 2021-06-03 15-14-37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/1dd69b9a-217b-afbf-f575-f37ab8fb8ecd.png">

#####課題
書き出し先を変更する必要がある。tsconfigファイルで"outDir"で指定する

```
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "/home/"    
  },
  "exclude": [
    "node_modules"
  ]
}
```

https://pleiades.io/help/rider/Compiling_TypeScript_to_JavaScript.html

###TSファイルをそのまま実行する

コンパイルを自動化しTSファイルから実行できます

####ts-nodeをインストール
ts-nodeを入れます。 --save-dev をつけると、開発に必要だが、リリースにはいらないという意味になります。

```
npm install --save-dev ts-node
```

ts-nodeをインストールすることで、TSファイルでコンパイルしJSを生成しなくても実行できます


https://pleiades.io/help/idea/running-and-debugging-typescript.html#ws_ts_run_debug_server_side


[RiderとSelenium](https://qiita.com/tana_/items/905905414ec608804d6f)に続く