Vite | 次世代フロントエンドツールViteNext Generation Frontend Tooling Get ready for a development environment that can finally catch up with you.
型推論のTips集 - Qiita
始めに 自分が今までTypeScriptで型推論させるにあたって、中々いい方法が見つからず、他にいいやり方がないか模索して時間がかかってしまうケースがいくつかありました。 そこで今回は割と使うケースで解決するのに苦労したものについて、Tipsという形でまとめてみました。自分はこのやり方でやっていますが、他にいいやり方があれば是非コメントください！ 基本編と上級編に分けており、上級編の方が割と込み入ったことをやっているものになります。 基本編 Object.keysに型をつける Object.keysの返り値の型はstringで固定されているため、以下のように書くとtype errorになってしまいます。 const obj = { a: 10, b: 'text', c: true, }; Object.keys(obj).forEach((key) => { // key: string
よく分からなかったのでCommonJSとTypeScriptのES Modulesinteropについて調べてみた
TypeScriptでExpressをちょびちょび弄ってて、Expressをimportする際esModuleinterop関連のエラーに引っかかったので、ついでによく分からなかったCommonJSやesModuleinteropフラグについて自分なりに調べてまとめておきます。 具体的にはtsconfig.jsonを作成しないで node_modules/@types/express/index.d.ts:116:1 116 export = e; This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag. // このモジュールは 'export =' で宣言されており、'esModuleInt
どのようにTypeScriptを使うのか - uhyo/blog
現在、TypeScriptの重要性は、フロントエンド開発を中心としてますます増すばかりであります。それだけに、TypeScriptをどのように使うべきかという問題については多様な意見が見られます。 これまで筆者はTypeScriptの使い方に、特にコンパイラオプションの使い方について意見を散発的に発信してきましたが、このたび記事にまとめました。この記事では、特に次のような意見に対しての反対意見を述べます。 厳しいコンパイラオプションは型パズル愛好者のためのものであり、普通の人は細かいことを気にせず緩い設定でよい。熟練のJavaScript使いにはTypeScriptは必要ない。例え話最近はTypeScriptを補助輪に例えたりするのが流行っていますので、この記事でも例え話をしてみます。筆者の考えでは、TypeScriptというのは例えるならば料理人が使う包丁のようなものです。コンパイラオプ
TypeScriptのユニオン型で「あるかもしれない」プロパティを表現するときのTips - uhyo/blog
TypeScriptのユニオン型はとても強力な機能で、TypeScriptのコードベースでは広く利用されています。 例えば、次のようにすると「fooプロパティを持つオブジェクトまたはbarプロパティを持つオブジェクト」という型を表現できます。 type FooObj = { foo: string }; type BarObj = { bar: number }; type FooOrBar = FooObj | BarObj; const fooObj: FooOrBar = { foo: "uhyohyo" }; const barObj: FooOrBar = { bar: 1234 };無いかもしれないプロパティ上のFooOrBar型を持つオブジェクトは、fooプロパティを持つ（FooObj）かもしれないし持たない（BarObj）かもしれません。 これはbarも同じで、つまり「ある
TypeScript - Removing readonly modifier
In TypeScript, is it possible to remove the readonly modifier from a type? For example: type Writeable<T> = { [P in keyof T]: T[P] }; Usage: interface Foo { readonly bar: boolean; } let baz: Writeable<Foo>; baz.bar = true; Is it possible to add a modifier to the type to make all the properties writeable?
TypeScriptでWebサービス開発（Apollo Server/Prisma/Next.js etc...)
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
Typescriptのinterfaceの使い方 - Qiita
はじめに インターフェース自体をあまり理解できていない為使い所がわからなかった。 そのこで、調べたことをまとめてみました。 インターフェースとは 中身の実装を持たず、メンバーや型の定義だけ持つ。 （よくわからない説明になってしまいました） ◎基本的な使い方 implementsキーワードを使用して、インターフェースを実装します。 classの継承の時にextendsを使用するのと似てます。 インターフェースを実装している場合、インターフェースに存在するメンバーと同じ名前のメンバーが 必ず存在している必要があります。 interface MyInterface{ name:string } class MyClass implements MyInterface{ name:string;//このメンバーがない場合コンパイルエラーとなる。 }
TSでReactの環境構築中に出た "error Cannot use JSX unless the '--jsx' flag is provided." を解消する - Qiita
src/app.tsx:10:17 - error TS17004: Cannot use JSX unless the '--jsx' flag is provided. 10 const element = <h1>Hello, world</h1>; Typescriptを使ってReactの環境を作っているときに発生したエラーです。 結論：下記のいずれかで治ると思います 1.使用しているtypescriptのバージョンを4.1以上にする 2.tsconfig.json で compilerOptions.jsx = react-jsx とする 1.使用しているtypescriptのバージョンを4.1以上にする 詳細は「VScodeでTSを使うと出るCannot use JSX unless the '--jsx' flag is provided. ts(17004)を解決する。」な
TypeScript スプレッド構文で配列に変換しようとしたらエラーになった - かもメモ
TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。 Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. ₍ᐢ •̥ ̫ •̥ ᐢ₎ なんもわからん tsconfig の compilerOptions の target が es5 の時は downlevelIteration オプションと dom.iterable が必要 { "compilerOptions": { "target": "e
interfaceとtypeの違い、そして何を使うべきかについて
始め TSを初めて勉強したときに「typeよりinterfaceを使うように！」というブログをよく見ましたが、業務の時は全部typeで型を定義してました。あれ？と疑念に思ってましたので、記事でお話させていただきます。 1. 型の定義 TSで一番手っ取り早く型を定義できる方法は多分これだと思います。 let level: number = 15; level = 15 level = "十五" //Type 'string' is not assignable to type 'number' このように宣言時の変数に方の注釈をつけることを型アノテーション(Type Annotation)と言います。上の例だけ見たら特に問題なさそうに見えますが、コードが少しでも複雑になったら問題があります。
"型パズル"との付き合い方
まえおき❌ Compiler API、Language Service❌ 難解な型パズルを出題して型マウント取る話❌ 全TSerが型パズルするべきだ🙆♀️ 型パズルと聞いて身構える方に身近に感じてもらいたい どっちが思考コストが高いかHTTPメソッド // ちゃんと渡せばOK const httpMethod: string = 'GET' // 正しくない値を渡してもエラーになってくれない const httpMethod: string = 'hogehoge'type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE' // ... // ちゃんと渡せばOK const httpMethod: HTTPMethod = 'GET' // 正しくない値を渡すと型エラー const httpMethod: HTTPMeth
6日目：TypeScript の型システムについて | 立命館コンピュータクラブ
はじめまして、Kodai (Twitter @0918nobita) です。 普段は Web フロントエンドや言語処理系 (レキサ, パーサ, 型検査器) の開発について独学で勉強したり、そこで学んだことを活かして作品を制作したりしています。 型システム と TypeScript Web フロントエンドとは、要はブラウザ上で動作するアプリの開発を指しているので、必然的に JavaScript というプログラミング言語を扱うことになります。 …ただ、直に JavaScript を記述するのはいろいろな問題があります。 ブラウザ間の互換性の問題は今回は触れないとして、JavaScript という言語自体の問題を考えると、「型システム」の恩恵を受けられないことが挙げられます。 型システムとは、「プログラムの各部分を、それが計算する値の種類に沿って分類することによって、プログラムの振る舞いを保証す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transform
TypeScriptでobjectのkeysのunion stringsを型定義する - 秋山界面帳
TypeScript 練習問題集