npm install vue-tsc

//package.json

{
    "scripts":{
        "tsc": "vue-tsc --noEmit"
    }
}

npm install -D tailwindcss postcss autoprefixer

npm install -D prettier @vue/eslint-config-prettier \
  eslint eslint-plugin-vue @vue/eslint-config-typescript \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    extraFileExtensions: [".vue"]
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {}
};

interface Props {
  msg:string,
  aa?:string  //?を入れているとrequired:falseと同じ。入れていないとtrue
}
//ここではdefaultを含める記載方法で書いている
const props = withDefaults(defineProps<Props>(), {
  msg: "",
  aa:"hogehoge"
});



interface Emits {
  (e: "input", value: string): void;
  (e: "update", value: string): void;
}

const emit = defineEmits<Emits>();

const handleInput = ({ target }: { target: HTMLInputElement }) => {
  emit("input", target.value);
  emit("update", target.value);
};

//defineComponentを記載して、オブジェクト内の型検査が動くようになる
export default defineComponent({
    props: {
        msg:{
            type:String
        },
        aa:{
            type:String
        }
    }
    emits: [input, update],

    setup(){

    }
})

<script setup lang="ts">
interface Props {
    //v-modelで渡した時defaultでこのmodelValueという名前でわたるようになっているので、
    modelValue:string,
    type:string,
    label?:string,
    placeholder?:string
    disabled?: boolean,

}

interface Emits {
  (e: "update:modelValue", text: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  type:"",
  label:"",
  placeholder:""
});

const emit = defineEmits<Emits>();

const onInputText = (e: Event) => {
  const target = e.target as HTMLInputElement
  //update:modelValueという名前でemitする
  emit('update:modelValue', target.value)
}
</script>

<template>
    <label v-if='label!=""'
    class="block text-gray-700 text-lg text-left  font-bold mb-2"
    :for="label"
    >
    {{label}}
    </label>
    <input
    class="shadow
    appearance-none border rounded w-full py-2 px-3
    text-gray-700 leading-tight "
    :id="label"
    :value="modelValue"
    :placeholder="placeholder"
    :type="type"
    @input="onInputText"
    >
</template>


//親コンポーネント
<InputText v-model="text" type="text" placeholder="hoge" label="username" />

//v-modelを分解するといか。子コンポーネントでupdate:modelValueで発火させるようになっているので、変化あるごとに発火する。その渡り先としてtextが設定されるので、この構文は成立している。
<InputText :modelValue="text" @update:modelValue="text = $event"/>

<suspense>
  <template #default>
    <todo-list />
  </template>
</suspense>

npm install msw -D

npx msw init ./public --save

//mock.ts
import { setupWorker, rest } from "msw";

export const worker = setupWorker(
  //呼び出すAPIを記載する
  rest.get("https://jsonplaceholder.typicode.com/posts/", (_, res, ctx) => {
    return res(
      ctx.delay(3000),
      ctx.status(202, "Mocked status"),
      ctx.json([
        {
          userId: 1,
          id: 1,
          title: "mock response",
          completed: true
        }
      ])
    );
  })
);

//main.ts
import { worker } from "./mock";

//developmentのみmockのapiが起動するようにする。
if (process.env.NODE_ENV === "development") {
  worker.start();
}

npm install jest ts-jest babel-test @types/jest vue-jest @vue/test-utils

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.js$": "vue-jest"
  },
  moduleFileExtensions: ["vue", "js", "ts"] //testする対象のファイル
};