TypeScriptのextendsってなんなん？
今日ではインターネットなしでは生活できないのと同様に、TypeScriptなしではフロントエンドの開発ができない世の中になっています。 そんなTypeScriptに囲まれた生活をしていると度々extendsを見ることになるでしょう。 今回はこのextendsの理解を深めるために記事を書きました。 Genericsのおさらい まずはじめに本記事ではGenericsを用いたコードが出てきますので、おさらいします。 以下は最もシンプルなGenericsを用いた記法です。 type A<T> = T const moji:A<string> = 'moji'; const suji:A<number> = 123;
TypeScript と ESLint における検査エラーを無視したい時のおまじないまとめ
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
typeとinterfaceって結局どう使い分ければ良いの？
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
2024年9月 俺の eslint.config.js
はじめに 「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】webpackのaliasをTypeScriptでも有効にする方法は
はじめに 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
export {}; が使われるTypeScript特有の事情
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 を Object.keys() を使ったループの型エラーにハマる - かもメモ
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の型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScriptの変数の末尾の"!"(エクスクラメーション/感嘆符)の意味 - Qiita
具体的に言うと、TypeScriptで"foo"という変数に対して"foo!"と記述した時の意味。 この"!"の呼び方は、Non-null assertion operator。 プログラマがコンパイラに対して、この変数はundefinedやnullになることはありません、と教える記述。 不正確だが、型<T>があるとして、型<T | undefined | null>を型<T>に静的にcastしていると考えると分かりやすい。 変換前の型は、型<T | undefined>でも型<T | null>でもOK。 以下、コードによる説明。 private func(): string { let foo = external_func(); // 戻り値の型はstring | undefinedとする // return foo; NG。戻り値の型がstringに対してstring | unde
TypeScript 非同期処理 Promise や Fetch の使い方
TypeScript 非同期処理 Promise と Fetch Promise や async 関数（async/await）で型注釈する方法や TypeScript を使用して fetch を利用する方法などについての解説のような覚書です。 JavaScript の Promise（概要） JavaScript の Promise は非同期処理を扱うための Promise オブジェクトとその仕組みのことです。Promise を使うことで非同期処理をその仕様に従って統一された書き方で扱うことができます。 以下は JavaScript の Promise の概要です。 コンストラクタ Promise は new と コンストラクタ関数 Promise() で promise オブジェクトのインスタンスを作成して利用することができます。 コンストラクタ Promise() は引数に reso
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
Promise<T> | TypeScript入門『サバイバルTypeScript』
PromiseはES2015から追加された機能で、非同期処理を見通しよく書くことができます。ES2017で導入されたasync/awaitを使うことでPromiseで書いたコードをさらに見通しよく書くことができます。 Promiseがなかった時代のこと次の３つのAPIがあるとしてこれらで得た結果を表示する処理を考えてみます。 API1: リクエストを送り、結果を受け取るAPI2: API1の結果を使ってリクエストを送り、結果を受け取るAPI3: API2の結果を使ってリクエストを送り、結果を受け取るAPI1, API2, API3の通信をする関数request1(), request2(), request3()は次のようになります。各関数のsetTimeout()はAPI通信をしている部分の遅延を意味している程度に考えてください。
ジェネリクス (generics) | TypeScript入門『サバイバルTypeScript』
型の安全性とコードの共通化の両立は難しいものです。あらゆる型で同じコードを使おうとすると、型の安全性が犠牲になります。逆に、型の安全性を重視しようとすると、同じようなコードを量産する必要が出てコードの共通化が達成しづらくなります。こうした問題を解決するために導入された言語機能がジェネリクスです。ジェネリクスを用いると、型の安全性とコードの共通化を両立することができます。 ジェネリクスが解決する問題ジェネリクスが具体的にどのような問題を解決するのか見ていきましょう。ここに、chooseRandomlyString()という普通の関数があります。この関数は、2つの文字列を引数に受け取り、五分五分の確率で第1引数か第2引数の値を抽選して返します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript入門 2024
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏