TypeScriptの次バージョン5.5で、開発者が長い間求めていた挙動が手に入ります。 現状のTypeScript (執筆時点で5.4)では、ユーザー定義型ガードを使う際には型述語(用語は後ほど解説します)の記述が必要です。 function isNumber(value: number | string): value is number { return typeof value === 'number'; }
![TypeScript 5.5で型述語を推論できて最高。配列のfilterも型安全に](https://cdn-ak-scissors.b.st-hatena.com/image/square/593499525e4f34689b1899d2a041087b2197de68/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Nvs8gkS6--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATypeScript%2525205.5%2525E3%252581%2525A7%2525E5%25259E%25258B%2525E8%2525BF%2525B0%2525E8%2525AA%25259E%2525E3%252582%252592%2525E6%25258E%2525A8%2525E8%2525AB%252596%2525E3%252581%2525A7%2525E3%252581%25258D%2525E3%252581%2525A6%2525E6%25259C%252580%2525E9%2525AB%252598%2525E3%252580%252582%2525E9%252585%25258D%2525E5%252588%252597%2525E3%252581%2525AEfilter%2525E3%252582%252582%2525E5%25259E%25258B%2525E5%2525AE%252589%2525E5%252585%2525A8%2525E3%252581%2525AB%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3A%2525E9%2525B9%2525BF%2525E9%252587%25258E%252520%2525E5%2525A3%2525AE%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlOWMzMWRhODMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AUbie%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hwRUMxbUtjVjZsX01lT2R6N1Nsejk1SXR4WUZoYjB2LTNOdzNjV3c9czI1MC1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TypeScriptの次バージョン5.5で、開発者が長い間求めていた挙動が手に入ります。 現状のTypeScript (執筆時点で5.4)では、ユーザー定義型ガードを使う際には型述語(用語は後ほど解説します)の記述が必要です。 function isNumber(value: number | string): value is number { return typeof value === 'number'; }
typescript の標準設定では、Object.entries()の型は以下のように定義されています。 interface ObjectConstructor { entries<T>(o: { [s: string]: T } | ArrayLike<T>): [string, T][]; entries(o: {}): [string, any][]; } つまり、型をRecord<string, number | string>として定義した値を引数に渡した場合、返り値の型は[string, number | string][]になります。 const object: Record<string, number | string> = { one: 100, two: 'test', }; const entries = Object.entries(object); // 型は
JSConf JP 2021 で登壇した資料です #jsconfjp #jsconfjp_b Links: [Active Recordから考える次の10年を見据えた技術選定](https://speakerdeck.com/yasaichi/architecture-decision-for-the-next-10-years-at-pixta) [GraphQL を活用したスキーマ駆動開発の実践](https://speakerdeck.com/qsona/schema-driven-development-with-graphql) [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-pract
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ! 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ! フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ! ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
TypeScriptとドメイン駆動設計(DDD)を組み合わせ、APIを構築するハンズオンガイドです。この本では、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。
前置き 本スクラップでは、Reactプロジェクトにおいて、2023年現在におけるベストなtsconfig.jsonの設定を考えていく。 その際、参考にするのは、以下の3つである。 Next.js Vite サバイバルTypeScript 順に、それぞれ補足していく。 Next.js Next.js公式ドキュメントのcreate-tsconfigのページにある通り、空のtsconfig.jsonを作っておくと、Next.jsは勝手にtsconfigを生成してくれる。 実際に生成してみると、tsconfigが以下のようになった。 (使用バージョンはnext: 13.4.4) { "compilerOptions": { "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "stri
firestoreをTypescriptで使うときに、型つかないので少しはまともそうな方法を紹介する。長いので最後のまとめだけ読めばOK。 firestoreの問題点 get()すると全て{[key: string]: any}で返ってくる Dateが勝手に変換される firebaseとfirebase-adminで型が微妙に違うのでエラーでる 一つずつ対応策を書く。 1: getの返り値を型付けする これは自分でキャストする方法と、withConverterを使う方法がある。 キャストを使う interface User { uid: string; address: string; age: number; } const getUserDoc = (uid: string) => DB.doc(`user/${uid}`) as firebase.firestore.Document
Published on June 17, 2020 Stefan on Mastodon Reading time: 7 minutes More on TypeScript Note: Be very careful with this technique. Better checkout my new approach. TypeScript’s predefined types in lib.d.ts are usually very well-typed and give tons of information on how to use built-in functionality as well as providing you with extra-type safety. Until they don’t. Consider the following example w
こんにちは。皆さんはGraphQL Code Generatorを利用していますか? 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
【T3 Stack 入門】認証機能付き ToDo アプリを作成しよう(Next.js & tRPC & NextAuth & Prisma) Theo 氏によって提唱された技術スタック「T3 Stack」をご存知でしょうか。T3 Stack とは、simplicity(シンプルさ)、modularity(モジュール性)、full-stack type safety(フルスタックの型安全)を追求した思想です。 そしてこれらの思想を実現するために T3 Stack では次の六つの技術を採用しています。 ✅ Next.js ✅ tRPC ✅ NextAuth.js ✅ Prisma ✅ Tailwind CSS ✅ Typescript 今回は、これらの技術に加えて 🚀 Supabase 🚀 Vercel 🚀 Docker を使って ToDo アプリを作成します。 2023 年現在、最もモ
NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く
概要 microCMS、Next.js(TypeScript)を使ってブログサイトを作成した手順と、追加で実装した機能について、またその過程で学んだことの備忘録記事です。 基本的には公式のチュートリアル通りに進めていますが、TypeScriptの型付けや記事内のコードブロックのハイライトなど詰まった箇所もあったので、まとめておきたいと思います。 デプロイURL GitHub ※この記事ではスタイリングについては解説しません。 MaterialUIを主に使用してスタイリングを行っているので、詳しいコードはGitHubをご覧いただければと思います。 使用技術 Next.js 12.0.10 React 17.0.2 TypeScript 4.5.5 ESLint 8.8.0 prettier 2.5.1 全体の流れ microCMSの準備(アカウント作成・記事コンテンツのAPI作成) Next
概要 Storybook6.4からデフォルトでCSF3の書き方が使えるようになったので、自分なりに調べたことをまとめてみました。TypeScript + Reactで説明します。 公式の記事はこちら この記事の内容は以下のとおりです。 CSF2からCSF3の変更点 CSFの既知の問題と公式の対応状況 インタラクティブストーリーの書き方 CSF3で書いたストーリーをユニットテストに応用する方法 この記事の説明で使うコンポーネント 名前を入力してSubmitボタンを押すと、ボタンを押した時の入力テキストを下に表示するコンポーネントです。 import { VFC, useState } from 'react' export type Props = { title: string } const SimpleFrom: VFC<Props> = ({ title }) => { const
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く