ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお（^ω^ = ^ω^）

vue-tscコマンド何もわからん

TypeScript Vue Vite

まとめ

いきなりですが、解決していないので、まとめから。 解決しました。

  • 色々試したが vue-tsc --noEmit -p tsconfig.app.json の composite をコメントアウトすると型チェックが動いた
    • trueになっているとincrementalフラグがtrueになり、 vue-tsc コマンドはサポートしていないのでエラーになる
    • ただしくは vue-tsc --noEmit -p tsconfig.vitest.json --composite false でした
  • incrementalってなんだ（勉強中）
  • なんで tsconfig.json の references は読み込まれないのか → そういう設定ではなかった
    • 我々調査隊はAmazon（MSだけど）の深淵へと向かった（TypeScript読込中）

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    // "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.json

{
  "files": [],
  "include": [
    "./src/@types/**/*.ts",
  ],
  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

エラー

composite:true のままだとこうなる。

$ vue-tsc --noEmit -p tsconfig.vite-config.json
incremental mode is not yet supported

/usr/local/lib/node_modules/vue-tsc/node_modules/typescript/lib/tsc.js:100196
    function createIncrementalProgram(_a) { console.error('incremental mode is not yet supported'); throw 'incremental mode is not yet supported';
                                                                                                    ^
incremental mode is not yet supported
(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v17.5.0

github.com

その他

tsconfig.json を読み込むと何もしてくれない。なので、 references がちゃんと効いていないんじゃないかなと思っているマンです。

追記

packages.json よく見るとこんなになってました。

"typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",

なるほど・・・・？（そしてちゃんと意図した通りに動く）

すごい遠回りしてしまったorz

というわけでこれで動きます。

$ npm run typecheck

watchした場合はoptionつけてあげると

$ npm run typecheck -- -w

追記その2

いやちゃうぞと。そもそも、tsconfig.jsonは複数で管理して良いものなんじゃなかろうかと調べたらそんな感じだった。

qiita.com

なるほど。なので、baseがあってそれを継承する形式で複数あるのね。と理解しました。

が、そしたら references ってなんだろう？？？っていうところではてなになってる。

zenn.dev

www.typescriptlang.org

なるほど（わからん）

わかった。でかいプロジェクトを分けたいってなったとき、referencesを使えってことね。理解。

今頃気づいたけど、reference側のtsconfig.jsonと、参照しているjsonファイルがextendsしているtsconfig.jsonが同じファイルではなかった。ということは、別に参照するからといって、継承元のjsonファイルでtscを実行する必要はないのね。勘違い。。。

VSCodeでVite + Vue3 + TypeScriptの開発環境のセットアップ

TypeScript Vite Vue

Type Safeな世界がやっと見えてきた。。。

zenn.dev

すべては↑にかかれている（ありがとうございます）

実は先日試してたんだけど、そのときはなぜか再起動してもPluginが反映されていない挙動が発生しており？？？ってなっていましたが、今日うまく言ったよかった。

そしたら色々わかった。

なぜか InjectionKey をimportするとエラーがでてアプリが動かないのでなぜだーとかやってた件。

今回いれたPluginに注釈されたところ、InjectionKey は型なので、型としてimportしろと注意。なるほど。

before

import { InjectionKey, reactive, readonly } from "vue";

after

import type { InjectionKey } from "vue";
import { reactive, readonly } from "vue";

typeの読み込みの件

qiita.com

↑の記事参考にTODOリストっぽいアプリを開発してましたが、なぜか型定義したファイルをimportしようとするとエラーがでてしまい、アプリ自体がビルドできませんでした。。。

Pluginが表示する注釈確認すると、パスと type を変更＆付与してあげたらうまくいきました。（ ~/src/stores/main-nodes/{index.ts,types.ts} という構造で管理している）

before

import {
  Item,
  Marker
} from "@/stores/main-nodes";

after

import type {
  Item,
  Marker
} from "@/stores/main-nodes/types";

とりあえずなんかみえてきたぞ〜。あとはCIかcommitする前に型チェックするコマンドを実行するような仕組みを作りたい。（Viteは型チェックしてくれないとのこと）

Serverless Frameworkで.envファイルを読み込んで定義した環境変数を利用する

Serverless Framework TypeScript

かなり時間使ってしまってワロタ（涙）

環境変数使いたいだけなのになんでこんなに時間をかけてしまったのか。。。とりあえず僕の時間が消えたぶんだけきれいにまとめた手順が下記

~/src/functions/hello/handler.ts

// 省略
const hello: ValidatedEventAPIGatewayProxyEvent<typeof schema> = async (event) => {
  console.log(process.env.HOGE);
  // 省略

デフォで用意されるファイルに環境変数読み取れるか用意。

.envファイルも用意する。

HOGE="HOGEHOGE"

実行してみる。

sls invoke local -f hello  --path src/functions/hello/mock.json
Running "serverless" from node_modules

Error:
Serverless plugin "serverless-dotenv-plugin" not found. Make sure it's installed and listed in the "plugins" section of your serverless config file. Run "serverless plugin install -n serverless-dotenv-plugin" to install it.

はいエラーがでました。どうやら追加でモジュールが必要なようです。

$ npm install -D serverless-dotenv-plugin

もっかい実行してみる。

$ sls invoke local -f hello  --path src/functions/hello/mock.json
Running "serverless" from node_modules
DOTENV: Loading environment variables from .env:
     - HOGE
HOGEHOGE
{
    "statusCode": 200,
    "body": "{\"message\":\"Hello Frederic, welcome to the exciting Serverless world!\",\"event\":{\"headers\":{\"Content-Type\":\"application/json\"},\"body\":{\"name\":\"Frederic\"},\"rawBody\":\"{\\\"name\\\": \\\"Frederic\\\"}\"}}"
}

えくせれんと！！！！

ちなみに僕は何にハマっていたのかというと

$ sls invoke local -f hello  --path src/functions/hello/mock.json | jq .

この jq で死んでました。 parse error: Invalid numeric literal at line 2, column 0 です。そりゃそうだよね。jsonじゃないんだから。。。( ˘ω˘)ｽﾔｧ

Serverless Frameworkのaws-nodejs-typescriptでAPI KEYが設定されたAPIを用意する

Serverless Framework TypeScript

このフレームワーク楽しいな（API GatewayとLambdaの連携を一通り遊んだことがある人ならいじるのが楽しいと思う）

./serverless.ts に下記設定を追加します。

    apiGateway: {
      // 省略
      apiKeys: [
        { name: 'free-key', }
      ],
      usagePlan: {
        quota: {
          limit: 1000,
          period: 'MONTH'
        },
        throttle: {
          burstLimit: 200,
          rateLimit: 100
        }
      }
    },
    // 省略

あとは個別のAPI設定に利用できるように設定します。

~/src/functions/hello/index.ts

import schema from './schema';
import { handlerPath } from '@libs/handler-resolver';

export default {
  handler: `${handlerPath(__dirname)}/handler.main`,
  events: [
    {
      http: {
        method: 'post',
        path: 'hello',
        request: {
          schemas: {
            'application/json': schema,
          },
        },
        private: true
      },
    },
  ],
};

これでおｋ。あとはデプロイ成功するとkeyの確認ができます。

$ sls info --region us-west-2
Running "serverless" from node_modules
# ...
api keys:
  free-key: hogehogefugafuga
# ...