令和5年に知っているべきTypeScriptのnamespaceの知識
TypeScriptにはnamespaceという構文が存在します。この構文はTypeScript初期からある独自構文の一つですが、現在では特殊な用途以外では使う理由が無いため、よく知らないという方も多いでしょう。 実際、一部のレアケースを除いてnamespaceを使う必要はありませんが、それでも知識としてあったほうが良いことが多少あります。この記事ではこの部分を解説します。 型に.でアクセスできるやつ TypeScriptを使っていると.を使って型にアクセスする機会があるでしょう。例えばReact.FCなどです。 実は、親.型名のように.を使って型にアクセスできるのは、namespaceの機能です。上のコードでのReactは単なる型や単なる変数ではなくnamespaceなのです。 試しに、Foo.BarがstringとなるようにFooを定義してみてください。これができる方法は2つしかありま
ウェブメディアの開発に最高かもしれない WACK Stack の紹介
WACK Stack というウェブメディア向けの開発スタックを考えてみました。まだ本番運用はできていませんが、PoC としてプロトタイプを作ってみたところ「いやこれ、マジでかなりいけるんじゃないか？」という感触を得たので紹介したいと思います。 WACK Stack とは、 WordPress Astro CDN Kysely のそれぞれの頭文字をとったもので、これらから構成されるスタックに名前を付けたものです。WordPress を CMS として使いながら、パフォーマンスとスケーラビリティに優れ、モダンなスタイルで高速に開発とリリースがしやすいウェブメディアのための構成として考えました。 前置き 弊社 KODANSHAtech の主な業務の1つにウェブメディアの開発があるのですが、そのときにWordPress を使うことが多いです。 WordPress を採用しておけば、すぐにほぼ完全に
『現場で使えるTypeScript 詳解実践ガイド』サポートサイト | マイナビブックス
このページは、 『現場で使えるTypeScript 詳解実践ガイド （ISBN978-4-8399-8427-4）』 のサポートページです。 紙版： 2024/3/22 初版第1刷発行 本書で使用するサンプルファイルについて 本書で使用するサンプルファイルは、以下よりダウンロード可能です。 ・サンプルファイル 訂正情報 現在のところ訂正情報はありません。
TypeScript 5.0 で追加された verbatimModuleSyntax とは何か？
// A: そのまま残る import { Foo } from "./foo"; // B: 識別子 `Foo` が削除される import {} from "./foo"; // C: import 文ごと完全に削除される どれになるかは、以下の状態の組み合わせ依存する（他にも条件あるかも）。 そのファイルでFooが値として参照されるか、型として参照されるか、参照されないか Fooがfoo.tsで値として定義されているか、型として定義されているか tsconfig のオプション設定 importsNotUsedAsValues: 値として参照されない import 文を残すかどうか preserveValueImports: 参照されない import 識別子が値なら残す isolatedModules: ファイル単位でトランスパイルする 上記は出力するモジュール形式が ESM の場合
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Remeda 〜TypeScriptユーティリティライブラリの結論〜
はじめに JS界隈のユーティリティライブラリといえば、Lodashが有名です。 しかし、Lodashはバンドルサイズが大きすぎるという問題があり、毛嫌いしている人も多いです。 そんななか、Twitterの一部界隈で注目を集めているユーティリティライブラリがRemedaです。 特徴 軽量 すべての関数をimportしてもたった5.3kBです。 さらに、ES Module形式が提供されているため、使っていない関数はビルド時にtree shakeで除外できます。 バンドルサイズが重要なフロントエンドのプロジェクトにも導入しやすいです。 pipe 関数が優秀 pipe関数が優秀で、TypeScriptの補完がバチバチに効きます。 (コードは公式ドキュメントより引用) ちなみにLodashの場合は以下のようなメソッドチェーンでパイプする都合上、すべての関数が読み込まれてしまって、バンドルサイズが激増
設定0行でNext.jsとNuxt.jsの内部リンクを型安全に取得できる最強ライブラリ「pathpida」
Qiita TypeScript Advent Calendar 2020 最終日の記事です。 TypeScript製の内部リンク取得ライブラリ「pathpida」 最近ちょっと話題になった frourio と aspida を開発したSolufaです。 Zenn初投稿を記念して、新作ライブラリ「pathpida」を紹介します。 と言っても完全な新作ではなく、初回リリースからもうすぐ1年が経ち月間DL数は1,000を超えています。自分が関わる案件だけで静かに検証を続け、ようやっと今週全面リニューアルして一般告知が出来るようになりました！ pathpidaはNext.jsとNuxt.jsそれぞれのルーティング規約に最適化しているので設定不要で型安全に使うことが出来ます。 どんな問題を解決するのか 以下のように/post/1 に遷移するLinkがあるとします。 import Link from
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
TypeScript 非nullアサーション演算子を使う - Qiita
記事の趣旨 TypeScriptには、値がnullでないことを示すための、非nullアサーション演算子(Non-Null Assertion Operator) ! という構文があります。 これが、便利ですがあまり知られていないような気がしたので（自分も最近知りました）、使用例や ? との違いをまとめました。 使用例 前提 例として、あるinput要素が存在することが保証されていて、その要素にフォーカスしたい場合を考えます。 この時以下のように書くと型エラーが発生します。 document.getElementById('input').focus() // エラー: オブジェクトは 'null' である可能性があります。 これは、 document.getElementById の戻り値が HTMLElement | null となるためです。 オプショナルチェイニングの注意点 要素が存
TypeScript の"is"と"in"を理解する - Qiita
TypeScript の構文の中でも、屈指のググラビリティの低さを誇る is と in を自分なりにまとめてみました。 is は TypeScript の型推論を補強する user-defined type guard（ユーザー定義型ガード） で使われます。 unknown 型や、any 型、Union 型の型の絞り込みを行えます。 使用例 例えば、unknown 型を引数に受け取る関数で、もし引数の型が string 型だったら文字列の長さを出力するという処理があるとします。 その場合は、以下のように型を絞り込む必要があります。 const example = (foo: unknown) => { if (typeof foo === "string") { console.log(foo.length); // fooはstringとして推論される } }; この一つの関数ならば良い
ドメイン駆動設計: TypeScriptでの値オブジェクトの書き方 - Qiita
自ブログからの引用です。 概要 ドメイン駆動設計で重要な要素となる値オブジェクトに関して、TypeScriptではclassでprimitiveが宣言できないなど言語特性的に工夫が必要な点があり長い間悩んできたのですが、最近になってようやく効果的なパターンが何種類か定まってきたので、本記事では下記のパターンに関して私が実践している値オブジェクトの書き方をご紹介させて頂きます。 アジェンダ プロパティが1つの値オブジェクト プロパティが2つ以上の値オブジェクト プロパティ間の組み合わせが存在する値オブジェクト 1. プロパティが1つの値オブジェクト SingleValueな値オブジェクトをTypeScriptで宣言する場合に皆さんはどの様にしますか？ 最も単純なパターンだとclassを利用する方法がありますが、以下の様な問題点があります。 例) class EmailAddress { va
zodとyupのinferを比較してみる
import { z } from "zod" const userSchema = z.object({ name: z.string(), age: z.number(), }) type User = z.infer<typeof userSchema> // type User = { // name: string; // age: number; // } import * as yup from "yup" const userSchema = yup.object({ name: yup.string().required(), age: yup.number().required(), }) type User = yup.InferType<typeof userSchema> // type User = { // name: string; // age: numb
JavaScript 特定のプロパティを削除した新しいオブジェクトを返したい - かもメモ
delete メソッドとかで Array.filter みたいな感じで、 state の中から特定のプロパティを削除して新しいオブジェクトを返したい。 1. Object.assign() で オブジェクトをコピーして delete JavaScript の delete 演算子は破壊的なので、 Object.assign() でオブジェクトをコピーしてから使えばOK。 const Tristar = { leader: '神崎美月', member1: '一ノ瀬かえで', member2: '紫吹蘭', }; const omitProperty = (obj) => (key) => { const clone = Object.assign(obj); delete clone[key]; return clone; } omitProperty(Tristar)('member2'
My new error...
2023 年度の僕のエラーハンドリング について書きたい。 昨日Safe Data Fetching in Modern JavaScriptを読んでいて、fetch に限った話ではないが一家言ある内容だったので書きたくなった。 おそらくやりすぎだとか非効率と言われる点はあると思うので、みんなの一家言も教えて欲しい。 対象は Typescript での サーバー開発想定だが、TS であればクライアント開発にもほとんどに当てはまる話だと思う。 例外のスローではなく Result 型を使う Result は失敗するかもしれないという文脈を与えてくれる型 エラーハンドリングの戦略として例外を投げるのではなく、Result 型を返すやり方がある。 Result 型というのは export type Result<T, E> = Ok<T> | Err<E>; export interface Ok
TypeScript 4.9のas const satisfiesが便利
今日開催の「TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線」で発表した資料です。 https://techfeed.io/events/techfeed-experts-night-11 Zennの記事はこちら https://ze…
【TypeScript】Utility Typesをまとめて理解する - Qiita
Utility Typesとは Utility Typesとはコード内で型変換を容易にする為にTypeScriptが提供する(便利な関数のような)型達です。 Partial<T> Partial<T>はTの全てのプロパティをOptional(任意)のプロパティにしてくれます。 下記のコードPersonでは１つも任意のプロパティが設定されていませんが、Partial<T>を使用する事で、変数taroではfirstNameのみを持つ事ができています。 interface Person { firstName: string lastName: string age: number } const taro: Partial<Person> = { firstName: 'Taro', } console.log(taro); //=> { firstName: 'Taro' } Require
TypeScript で type と interface どっち使うのか問題
はじめに あくまで一個人の意見なので絶対的な解ではないというのと、どっちをデフォルトに選んでも普通にアプリケーション開発してて困ることはほぼほぼないと思うので、そこまで気を揉むことでもない、ということだけ最初に述べておいて意見をしたためます。 TL;DR アプリケーション開発では基本的に type でおk Declaration merging したい時だけ interface ライブラリ開発のような使う側で拡張したい(Declaration merging したい)時は interface とりあえずチームでどっちをデフォルトにするかは統一しといた方が気持ちいい type と interface の違い 機能的にはそんなに大きな違いはなく、個人的に判断に関わるのは次の3つかなと思います。 interface では Declaration merging がされる。type ではされない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Discriminant property type guard not applied with bracket notation · Issue #10530 · microsoft/TypeScript
GitHub - mattpocock/ts-reset: A 'CSS reset' for TypeScript, improving types for common JavaScript API's
ts-custom-error