Summary nextjs+typescript環境にjestをインストールする機会があったので、設定した手順をメモしておく。 install npm install @nuxtjs/dotenv npm install --save-dev jest @types/jest ts-jest setting package.jsonファイルに下記の記述を追記する "scri…

prisma複数データベースの接続方法 追加分のデータベースの接続情報を指定したschemaServiceB.prismaファイルを作成する schema.prismaファイル(既存) generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = env("S…

ユースケース図 DDD サンプルコード class Blog { static _id: number = 1; id: number | null; categoryId: number | null; title: string | null; text: string | null; postDate: Date | null; constructor(categoryId?: number, title?: string, text?: …

Options APIの場合 components/test.vueファイルを作成して下記のように記述する <template> <div> Name: {{ fullName }} Message: {{ message }} </div> </template> <script lang="ts"> import Vue, { PropOptions } from 'vue' interface User { firstName: string lastName: string } export default Vue.ex…

参考ページ 下記のサイトを参考に設定する typescript.nuxtjs.org typescriptの設定 インストール # npm i @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime nuxt.config.jsファイルのbuildModulesを下記のように修正する buildModules: [ ['@n…

はじめに 前回発生したエラーを解消できたので、今回はTypeScriptでfunctional componentを作成してみる。 px-wing.hatenablog.com コード App.tsx 下記コードでTypeScriptを利用している箇所はReact.FCの部分のみです。 React.FC はReact.FunctionComponent…

はじめに TypescriptとVue3の環境を作成したので、Typescriptのclassを利用して簡単なコンポーネントを作成する [Vue v3] @ComponentデコレータとVue基本クラス @Component名前がに変更され@Optionsます。 @Options オプションを宣言しない場合はオプション…

docker-compose.yaml version: '3' services: nodejs: build: . volumes: - .:/srv/front/src/app ports: - "8080:8080" tty: true Dockerfile FROM node:lts-alpine3.12 WORKDIR /srv/front/src/app RUN apk update && \ npm install -g npm @vue/cli CMD […

はじめに TypeScriptとES6にクラスが導入されたことにより、クラスやクラスメンバーの注釈や変更をサポートするために追加の機能を必要とする特定のシナリオが存在するようになりました。デコレーターは、クラス宣言とメンバーの注釈とメタプログラミング構…

はじめに interfaceに対してジェネリックスを利用する interface Database<T> { uuid: string data: T[] } const database: Database<string> = { uuid: 'dadfdas34543523425fsadfsafsadfasf', data: ['hoge'] } console.log(database) const database2: Database<number> = { u</number></string></t>…

はじめに 前回までTypeScriptのAdvaiceTypeのことを調べたので、引き続きジェネリックスの調べる px-wing.hatenablog.com ジェネリックス メンバ間で意味のある型制約を提供することです。 安全性と柔軟性を組み合わせているので便利 typescript-jp.gitbook.…

Nullish Coalescing TypeScriptの3.7.0から利用出来る機能 undefined またはnullの場合だけ、指定した値が設定される const userDate = downloadedDate.user ?? 'dummy-date' || の違いは、この場合、0や空文字の場合も指定された値が設定される const userD…

はじめに 前回の記事の続き px-wing.hatenablog.com 型アサーション 推論、分析された型は、任意の方法で上書きできます 純粋にコンパイラよりもその型をより良く理解していることだけでなく、後で推測するべきではないことをコンパイラに伝えています。 下…

はじめに 久しぶりにTypescriptの勉強を再開する タイプをモデル化するためのより高度な方法をいくつか調べてみた。 前回の記事 下記の記事の続編 px-wing.hatenablog.com px-wing.hatenablog.com px-wing.hatenablog.com Advanced Types https://www.typesc…

はじめに 前回のTypeScriptのinterfaceの勉強の続き px-wing.hatenablog.com readonly修飾子 implementsしているClass側ではreadonlyは無視することが出来る。 interface Personal { readonly name: string; age: number; greeting(message: string): void; …

Interface TypeScriptの主要な原則の1つは、型チェックが値の形に焦点を当てることです。これは、「ダックタイピング」または「構造サブタイピング」と呼ばれることもあります。 TypeScriptでは、インターフェイスはこれらの型に名前を付ける役割を果たし、…

はじめに TypeScriptでClassを勉強した続きを行う。前回の内容は下記となります。 px-wing.hatenablog.com readonly修飾子 class内・外両方からも書き込みができない。 ただしconstructorの内部では変更が可能である constructor(public readonly name: stri…

オブジェクト指向プログラミング(OOP) 現実世界の物に見立ててプログラミングする 実装者にとってわかりやすくロジックを分割する Class オブジェクトの設計図 Classから生成されたオブジェクトはインスタンスと呼ぶ typescriptではClassも型になる ex) // C…

TypeScriptコンパイル watchモード ファイル修正時に動的にコンパイルしてくれるコマンド tsc index.ts --watch or tsc index.ts --watch 複数のファイルを指定する場合 tsc index.ts test.ts --watch tsc--initコマンド -- tsconfig.jsonファイルを作成する…

TypeScriptとは JavaScriptにコンパイルされる静的型システムがついたJavaScriptの上位集合 TypeScriptがJSに変換される際に静的型システム（型検査）が実行される 'use strict' モード ⇒strict モードでは、JavaScript でエラーではないが落とし穴になる一…