TypeScriptでReact + Redux + Expressのベストプラクティス - Qiita
こんにちは、Morishing362と申します。 UI/UXエンジニアをしております。普段はTypeScript/Flutter/Rust/C++などを触っています。仕事以外でツールを作る機会があり、Reactでやってみたく、その際にベストプラクティスを作ってみたので晒します。ベースは公式チュートリアルに則って少しアレンジしました。 各フレームワークの役割 React: フロントエンドフレームワーク Redux: Reactの状態管理 Express： HTTPサーバーフレームワーク 目標のアプリ 左側に比較的簡単な状態管理のカウンター機能、右側にデータベースを使った非同期処理を伴うユーザー追加機能を持つ、なんの意味もないアプリです。 環境 Yarn: 1.22.5 node: 14系 SQLite3クライアント: 3.31.1 npmやYarnのインストール手順は世の中にたくさんあるので
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
なんで JavaScript ではなく TypeScript を使うのか?
この記事の目標 「最終的に JavaScript になるのに、なんでわざわざ TypeScript を使うべきなのか? JavaScript で良くない?」 という質問に答えられるようになる なぜ TypeScript を使うべきなのか? いきなり結論を書きます。 A. 実行時エラーの少ない JavaScript を使いたいから TypeScript で書かれたコードはコンパイルが通らないと JavaScript に変換できません。そのため、生成される JavaScript コードは必ずコンパイルに成功したものです。コレが TypeScript を使っていて一番嬉しいポイントです。 まあ、いきなり結論を書いてもよく分からないと思います。順に話していきます。 型エラーとはなにか TypeScript でコンパイルを通すには、コード上の型エラーを無くす必要があります。 型エラーとは、型システム
【React×TypeScript】コンポーネントをPropsとして渡す方法
ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpropsを受け取り、propsからコンポーネントを取り出す。 ※関数コンポーネントを作る際、引数にpropsを({child1, child2})などと記述することが多いが、(props)とする必要がある（多分レンダリングの関係でそうなってる）。 コードで見る Childrenというコンポーネントがchild1とchild2というprops名でコンポーネントを受け取ると仮定。 import React from 'react' type Props = { child1: JSX.Element // ポイント１(React.ReactNode などでもOK） child2: JSX.Element } export default Children
Prettierでコード整形を自動化しよう | TypeScript入門『サバイバルTypeScript』
このチュートリアルでは、コードフォーマッターの「Prettier」を使いTypeScriptのコードフォーマットを自動化することを学びます。 本章で学べること本章ではPrettierを導入してコード整形を自動化することを目標に次のことを学びます。 Prettierの導入方法Prettierの実行方法整形ルールの設定方法PrettierとはPrettierはコードのフォーマットを自動整形するツールです。Prettierがサポートしている形式は幅広く次の形式をサポートしています。 また、プラグインを利用することでPHPなどの他の言語のフォーマットを行うこともできます。 JavaScriptTypeScriptJSXFlowJSONHTMLVueAngularEmberCssLessSCSSstyled-componentsstyled-jsxGraphQLMarkdownMDXYAMLSv
TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント
Type CheckingallowUnreachableCode, allowUnusedLabels, alwaysStrict, exactOptionalPropertyTypes, noFallthroughCasesInSwitch, noImplicitAny, noImplicitOverride, noImplicitReturns, noImplicitThis, noPropertyAccessFromIndexSignature, noUncheckedIndexedAccess, noUnusedLocals, noUnusedParameters, strict, strictBindCallApply, strictFunctionTypes, strictNullChecks, strictPropertyInitialization and useUnkn
GitHub - kysely-org/kysely: A type-safe typescript SQL query builder
Kysely (pronounce “Key-Seh-Lee”) is a type-safe and autocompletion-friendly TypeScript SQL query builder. Inspired by Knex.js. Mainly developed for Node.js but also runs on all other JavaScript environments like Deno, Bun, Cloudflare Workers and web browsers. Kysely makes sure you only refer to tables and columns that are visible to the part of the query you're writing. The result type only has th
TypeScript で既にある型から一部を nullable にする型を作る - Qiita
type Article = {id: string, value: number} type ArticleDraft = {id: string | null, value: number} ORM などで一度保存するまでidが振られない、みたいな時によくある型ですね。 これは簡単な例ですが、フィールドが多くなると同じような型を２つ書くのが面倒くさいし、何よりバグを仕込みそうなので、今回はなんとかして Article 型から ArtcileDraft 型を最小限の手数で生成したい、と思います。 案1: Draft を先に定義して、 extends して絞り込む interface ArticleDraft {id: null | string, value: number} interface Article extends ArticleDraft { id: string }
【TypeScript】JestでインポートしたモジュールがCannot find moduleとなるエラー - suzu6の技術ブログ
TypeScriptのjestで用意したテストで、自作のモジュールをインポートしようとするとCannot find moduleとなってしまう。 例として次のテストを実行してみる。 import LoginService from "@/app/Services/LoginService"; import auth from "@/Domain/Repositories/AuthRepository"; describe("LoginService", () => { it("LoginSuccess", () => { // ... expect(result).toBe('success'); }); }); @/はtsconfig.jsonで定義してある。エディタ（VSCode）のIDEではパスが通っているようでエラーは出ない。 実行した結果がこちら。 テストを実行したときだけパスが
日時を文字列で持つ案 (Dateのことは忘れる)
TypeScript の日時を表現する Date 型は貧弱で使いにくい。 日時の処理はライブラリを使うことになりがち。 個人的には、Date オブジェクトの存在を無視して、日時を文字列で持つのがよいと思っている。 Date は何か MDN の Date のページを参照。 Date オブジェクトは単に「ある1点の時刻」を表している。タイムゾーンやロケールなどの情報は持っていない。 Date はなぜダメか 例えば次のようなクエリに対する操作が用意されていない。 特定の形式で文字列に変換する (yyyy-MM-dd や yyyy/MM/dd HH:mm など) 時刻成分を切り落として、1日の始まりの時点を得る 同じ月の最後の日付に変換する etc. 日時を文字列で持つ Date のメソッドはどうせ使わないので、インスタンス化する必要はない。 代わりに luxon の DateTime オブジェク
TypeScript の型生成における OpenAPI Generator のハマりどころ - READYFOR Tech Blog
こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ？」「あの人、最近はどんなことに取り組んでいるんだろう？」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知（組織やプロダクトの方針等）や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog
Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する 2022.07.02 [Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。 Zod は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれ
2ality – JavaScript and more
In this blog post, we examine the ECMAScript proposal “Set methods for JavaScript” by Michał Wadas, Sathya Gunasekara and Kevin Gibbons. It introduces new methods for Sets. In this blog post, we look at the ECMAScript proposal “Iterator helpers” by Gus Caplan, Michael Ficarra, Adam Vandolder, Jason Orendorff, Kevin Gibbons, and Yulia Startsev. It introduces utility methods for working with iterabl
銀の弾丸ではないTypeScriptを、何故使うべきなのか - Qiita
<まず簡単に> TypeScript とは TypeScript は、JavaScript でも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語である。 JavaScript の上位互換であり、JavaScript の文法のまま型などの様々な恩恵を受けることができる。 トランスパイル 1 することで JavaScript に変換され、これまで通りのブラウザや既存の環境でも動作させることができる。 <技術革新の影に政治的対立> TypeScript の登場背景 ちょっと長い、TypeScriptの登場背景 JavaScript がニーズに応じて進化していれば、TypeScript は必要なかった そもそも JavaScript は、1990 年代に HTML の補助的な言語として誕生した。 大規模なアプリケーションを作るための言語とは見なされていなかったが
Documentation - JSX
JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript. Basic usage In order to use JSX you must do two t
【TypeScript】.ts拡張子と.tsx拡張子 - Qiita
JSXを含むファイル 型アサーションの記法として value as type と <type>value の2通りあるが、後者は .tsx には書けない （ <> はJSXタグのマーカーであるため） Reactを使うプロジェクト内のTypeScriptファイルは全て.tsxではダメなのか 結論 .ts と .tsx は明示的に分けるべき 理由 拡張子で明示的にしておくことで、「このファイルにJSXを書くべきではない」ことを表すことができるため （UIコンポーネントのファイルか、ロジックを書くファイルか）
TypeScript の型定義からコードを自動生成するツールを作った - Qiita
はじめに プログラマーなら誰しも、YAML や JSON、XML、Excel ファイル、あるいは独自の DSL などで書いた定義ファイルからコードを自動生成するツールを使用した経験があると思います。 でも、JSON、XML を手で書いていくのはつらい。独自 DSL は覚えるのがつらい。YAML も凝ったことやろうとするとカスタムタグとかいろいろ用意したりしないといけなくて、独自 DSL 化してつらい。Excel ファイルは…… ということで、みんな大好き TypeScript の表現力豊かな記法でそういった定義ファイルが書けて、コードを自動生成できたら幸せなんじゃないだろうかと思い、年末あたりに時間をかけて typhen というツールを作ってみました。 今回はそのご紹介です。 使い方 たとえば、typings/definitions.d.ts に下記のようなインターフェイスがあって、そこか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to use TypeScript's async/await and fetch with parameters?
[discussion] Specify TypeScript types for custom scalars · Issue #1248 · nestjs/graphql