### 2分でつくるTypeScriptプロジェクトの砂場 VSCode編
[[📕tadashi-aikawa]]
<small style="color: grey;">
最終更新日: 2021-07-15
</small>
---
### 本日お話しすること
- [[VSCodeでサンプルTypeScriptプロジェクトを作成]]する方法
- スライドの内容とあわせてデモをします
---
### 想定するシチュエーション
- [[TypeScript]]のライブラリや文法に関する挙動を確かめたい
- 開発中のプロジェクト内で試すとtry&errorに時間がかかる
- とはいえ新しくサンプルプロジェクトを作るのは面倒
---
## 2分でできます
[[🦉Owlelia]]を試してみよう
---
### 前提条件
- [[Node.js]]がインストールされている
- [[VSCode]]がインストールされている
- [[Prettier - Code formatter]]がインストールされている
- [[Prettier拡張でTypeScriptコードをフォーマット (VSCode)|Prettier拡張でTypeScriptコードをフォーマット]]できるようになっている
---
### ターミナルからプロジェクト作成
###### ベースはコレ
```shell
mkdir typescript-sample
cd typescript-sample
npm init -y
npm i -D typescript ts-node tslib @types/node prettier
# tsconfigをいじりたければ
npx tsc --init
```
---
### [[🦉Owlelia]]のインストール
###### 動作確認したいライブラリを入れる
```shell
npm i owlelia
```
---
### [[VSCode]]を開く
```shell
code .
```
---
### launch.jsonを作成
###### `.vscode` ディレクトリ配下に `launch.json` を作る
```json:.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"runtimeArgs": ["-r", "ts-node/register"],
"args": ["${workspaceFolder}/index.ts"]
}
]
}
```
---
### ソースコードを書く
###### `index.ts` を書く。
```ts
import { DateTime } from "owlelia";
const tomorrow = DateTime.today().plusDays(1);
console.log(tomorrow.displayDateFull);
console.log(tomorrow.equals(DateTime.of("2021-07-15")));
```
---
### ファイル構成
![[Pasted image 20210714233959.png]]
---
### デバッグなしで実行
![[Pasted image 20210714234010.png]]
---
### デバッグありで実行
![[2021-07-14_23h41_13.mp4]]
---
### まとめ
- 2分で[[VSCodeでサンプルTypeScriptプロジェクトを作成]]した
- [[GitHub]]にテンプレプロジェクトを作っておくと1分切れるかも