never型はTypeScriptに存在する型のひとつで、「存在しない値の型」として説明されることが多いものです。 この説明は正しいのですが、誤解されることがあると感じました。そこで、今回はnever型に関する誤解を解くための記事を用意しました。ぜひこの記事を読んで、never型について正しく理解しているかチェックしてみてください。 never型とは never型は、上述の通り、「存在しない値の型」です。言い換えれば「never型の値は存在しない」ということです。こんな簡潔な説明ですが、never型は奥深い性質を持っています。 まず、「never型の値は存在しない」というのがどういうことか理解しましょう。これは、どんな値もnever型には代入できない（never型の値ではない）ということです。このように、never型の変数には、何を代入しようとしても全てエラーになります。
ROSCA株式会社さん主催のイベント フロントからバックエンドまで、TypeScriptでシームレスな開発エクスペリエンスを で発表させていただいた際に使用したスライドです。
Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ
今日ではインターネットなしでは生活できないのと同様に、TypeScriptなしではフロントエンドの開発ができない世の中になっています。 そんなTypeScriptに囲まれた生活をしていると度々extendsを見ることになるでしょう。 今回はこのextendsの理解を深めるために記事を書きました。 Genericsのおさらい まずはじめに本記事ではGenericsを用いたコードが出てきますので、おさらいします。 以下は最もシンプルなGenericsを用いた記法です。 type A<T> = T const moji:A<string> = 'moji'; const suji:A<number> = 123;
ESLint にも TypeScript にも「ルールを設定してみたけど、いざ運用するとなるとエラー出ちゃった。これ動作確認して欲しいのにデプロイが CI に弾かれちゃう。うーん、ごまかしちゃえ(てへぺろ)」って時などに使えるハッチが存在しています。ファイル単位・ブロック単位・行単位でそれぞれいろいろな方法があるのでそれらをまとめます。 TypeScript word 単位で無視する ご存知の通り as や any が使えます。 行単位で無視する @ts-ignore で抑制できます。 TS2.6 からの機能でSuppress errors in .ts files using ’// @ts-ignore’ commentsによると、 TypeScript 2.6 support suppressing errors in .js files using // @ts-ignore co
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
はじめに create-react-app（以下、cra）めちゃくちゃ便利ですよね。 また、TypeScriptでもサクッとテンプレートを作成できるのがグッドです。 で、craでwebpackの設定いじりたいなーって時に私は「craco」というライブラリを使います。 今回はこのcracoを使って、上記のaliasの設定をしていきます。（厳密にはwebpackに定義するわけではないのですが...） 普通にaliasを設定する まず、cracoをVanillaなJSテンプレートで使う場合の、webpackのalias設定は下記のような感じです。 const path = require("path"); module.exports = { mode: process.env.REACT_APP_ENVIROMENT, output: { path: __dirname }, // webpa
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで const idols = { hosimiya: {name: '星宮いちご', type: 'cute', brand: 'Angely Sugar'}, kirija: {name: '霧矢あおい', type: 'cool', brand: 'FUTURING GIRL'}, shibuki: {name: '紫吹蘭', type: 'sexy', brand: 'SPICY AGEHA'}, }; Object.keys(idols).map((key) => { const data = idols[key
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScript 非同期処理 Promise と Fetch Promise や async 関数（async/await）で型注釈する方法や TypeScript を使用して fetch を利用する方法などについての解説のような覚書です。 JavaScript の Promise（概要） JavaScript の Promise は非同期処理を扱うための Promise オブジェクトとその仕組みのことです。Promise を使うことで非同期処理をその仕様に従って統一された書き方で扱うことができます。 以下は JavaScript の Promise の概要です。 コンストラクタ Promise は new と コンストラクタ関数 Promise() で promise オブジェクトのインスタンスを作成して利用することができます。 コンストラクタ Promise() は引数に reso
PromiseはES2015から追加された機能で、非同期処理を見通しよく書くことができます。ES2017で導入されたasync/awaitを使うことでPromiseで書いたコードをさらに見通しよく書くことができます。 Promiseがなかった時代のこと次の３つのAPIがあるとしてこれらで得た結果を表示する処理を考えてみます。 API1: リクエストを送り、結果を受け取るAPI2: API1の結果を使ってリクエストを送り、結果を受け取るAPI3: API2の結果を使ってリクエストを送り、結果を受け取るAPI1, API2, API3の通信をする関数request1(), request2(), request3()は次のようになります。各関数のsetTimeout()はAPI通信をしている部分の遅延を意味している程度に考えてください。
型の安全性とコードの共通化の両立は難しいものです。あらゆる型で同じコードを使おうとすると、型の安全性が犠牲になります。逆に、型の安全性を重視しようとすると、同じようなコードを量産する必要が出てコードの共通化が達成しづらくなります。こうした問題を解決するために導入された言語機能がジェネリクスです。ジェネリクスを用いると、型の安全性とコードの共通化を両立することができます。 ジェネリクスが解決する問題ジェネリクスが具体的にどのような問題を解決するのか見ていきましょう。ここに、chooseRandomlyString()という普通の関数があります。この関数は、2つの文字列を引数に受け取り、五分五分の確率で第1引数か第2引数の値を抽選して返します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
