[typescript] タグが付いた質問

TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。

絞り込み
並べ替え
タグ付けされた
0
1 回答
93 閲覧数

node_moduleライブラリのjsファイルでimport,export等が使用されている場合にbrowserifyする方法

browserify APIを利用してTypeScriptで書かれたコードをJavaScriptに変換し、それらのコードを一つにまとめる処理を書いています。 以下が問題が発生するコードです。 (async () => { let code = await (() => { const browserifyObject = browserify(); ...
Cronus's user avatar
  • 35
0
1 回答
99 閲覧数

rails側に保存した音声ファイルをReact側のwavesurferで使用したい。

解決したいこと rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。 環境 ・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。 ・...
senseIY's user avatar
  • 41
1
3 回答
346 閲覧数

valueの型を指定したオブジェクトからkeyof typeofでkeyのユニオン型を作る

valueの型を指定したオブジェクトがあります。 export type SingleTextEditorParamList = { title: string; value: string | undefined; onSubmit: (text: string) => Promise<void>; note?: React.ReactNode; }; ...
Masamoto Miyata's user avatar
0
1 回答
274 閲覧数

ParameterMissingエラーを解決したい

解決したいこと railsのパラメータのエラーを直したいです。 発生している問題・エラー ActionController::ParameterMissing: param is missing or the value is empty: learning_material from /usr/local/bundle/gems/actionpack-7.0.3.1/lib/...
senseIY's user avatar
  • 41
0
1 回答
103 閲覧数

関数の戻り値に対する型付けについて

TypeScript初心者です。 とあるプロジェクトの、他の方が作成したコードを見ながら型定義について勉強をしているのですが、関数の戻り値に対して以下の画像のように「Function」という型付けをしている箇所がありました(状況説明のため簡略化したコードになります) 戻り値の型として指定した「Function」というのはいったん何を意味しているのでしょうか? プロジェクト内に、「...
km_h2r34's user avatar
2
1 回答
169 閲覧数

Promise の配列に対して、それを早い順で resolve する async generator に変換したい

今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。 // 例 const ...
Yuki Inoue's user avatar
  • 1.7万
1
1 回答
654 閲覧数

typescriptでform要素を取得したい

実現したいこと valueの取得 発生している問題・エラーメッセージ プロパティ 'value' は型 'Element' に存在しません。 該当のソースコード document.querySelector("#id").value 試したこと 補足情報(FW/ツールのバージョンなど) typescript:4.7.4 tsc:4.6.4 esnext
石のトンネル's user avatar
1
1 回答
263 閲覧数

HTML要素の textContent に `?.` 演算子で代入できない

実現したいこと TypeScriptで、HTML要素を取得して操作したい 発生している問題・エラーメッセージ 代入式の左辺には、省略可能なプロパティ アクセスを指定できません。 該当のソースコード const pref = document.getElementById("prefectures"); pref?.textContent = "hello world&...
石のトンネル's user avatar
1
1 回答
58 閲覧数

定義された型の変数を読み取り専用にしたい

例えば,以下のような Options という型を定義します。 interface Options { "encoding": string, "initValue"?: any } 変数 options を用意するとき変数中身の編集については型の入力補完を継承しつつ,最終的には読み取り専用として変数を宣言したいです。 ...
Cronus's user avatar
  • 35
2
2 回答
798 閲覧数

@types/reactとreactのversionが違うと問題でしょうか

create react appで作られたversion 16のreact applicationにtypescriptを追加しています。 @types/reactと@types/react-domのversionについて、最新のv.18をインストールしたのですが、本体とversionが異なることが問題となるか教えていただきたいです。
TK''s user avatar
  • 213
2
1 回答
97 閲覧数

Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。

学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。 // --snip-- export abstract class Piece { position: ...
user53251's user avatar
1
1 回答
153 閲覧数

TypeScirpt の for...of 文で [Symbol.iterator]() が必要と言われる

概要 forof文を書こうと思ったら、[Symbol.iterator]() が必要だと怒られた。 const test = [ { code: 0, name: "北海道" }, { code: 1, name: "東京都" }, { code: 2, name: "大阪府" }, ]; function ...
石のトンネル's user avatar
1
0 回答
98 閲覧数

cordova.plugins.barcodeScanner.scan()は非同期処理でしょうか?

cordova cli ver.10.0.0, Angular2で開発しています。 cordova.plugins.barcodeScanner.scan 処理を以下のソースを実装して実行してみると、以下の順番でメッセージが表示されています。 ・readCodeCtrl start ・Scan Result : ・scan success! CodeScannerCtrl ...
Hermione's user avatar
1
1 回答
121 閲覧数

変数の内容によって特定の変数の型を決定する方法

TypeScriptにおいて,ある文字列変数の内容によって特定の変数の型(testとします)を自動的に設定されるようにしたいです。 具体的な例を挙げると, const type = "basic_string<char, char_traits<char>, allocator<char> >"; のとき,変数 test の型は ...
Cronus's user avatar
  • 35
2
0 回答
204 閲覧数

関数の戻り値を受けた変数が型推論されない

以下のコードで、関数の戻り値が Promise<Foo> なので await した foo の型は Foo になると思ったのですが any になってエラーが出ます。なぜですか。 コード type Foo = { bar: string | undefined; }; const getFooPromise = async (prevBar?: string | undefined)...
ymk's user avatar
  • 21
0
1 回答
300 閲覧数

AngularでjsonデータをforEachを使って値を取得

Angular(バージョン7) 以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。 component.tsでhoge items: { "price": 200, "count": 5 }, { "...
lara0504's user avatar
1
2 回答
266 閲覧数

TypeScriptで引数のかっこが3つある関数

引数の括弧が3つある下記のような関数を見かけたのですが、これはどのような時に使用されるのでしょうか。 なぜ通常の const hoge =(h1, h2) => {} という書き方との違いはなんでしょうか。 何も出力されないです。 const hoge = (h1) => (h2) => () => { console.log(h1); console....
wataru's user avatar
  • 1,123
0
1 回答
74 閲覧数

Vue Routerでネストされた型をPickしたい

vue-routerのRoute型からmatchedのmetaのみを取り出したいです。 具体的には次のようにmatchedまでは取り出せましたが、metaのみを取り出す書き方がわからずエラーが出てしまっています。 解消方法を教えていただけると助かります。 const to: Pick<Route, 'fullPath' | 'path' | 'matched'> = { ...
user51995's user avatar
4
1 回答
224 閲覧数

typescriptで指定した文字列のどれかを返す関数を定義したい

typescriptで書いています。あるアプリケーションでサポートする言語(locale)が限定されていて、システムがそれ以外のlocaleを返したらデフォルトのlocaleにフォールバックするための関数を書きたいです。 /* currentLocaleがSupportedLocaleだったら */はどう書けばいいのでしょうか? type SupportedLocale = 'ja' | 'en';...
Masamoto Miyata's user avatar
2
1 回答
395 閲覧数

ルックアップ型と可変長引数の組み合わせで型推論がうまく行かない

困りごとから先に書くと、下記コードの return fn(...args); の部分でエラーが発生し、それがどうやっても取れません。原因は何でしょうか? const table = { add: (a: number, b: number) => a + b, square: (a: number) => a * a, } as const; type Table = ...
kumikomiya's user avatar
0
1 回答
323 閲覧数

Vue.js + Nuxt.js + TypeScript アプリケーションでlayoutで呼び出しているコンポーネントの変数をpagesから操作したい

表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。 やりたいことの要点としては、 ・...
tomo's user avatar
  • 1
2
2 回答
595 閲覧数

オブジェクトの型付けの際にプロパティ名にワイルドカードのようなものを使用できるか

以下のような感じでプロパティ名にワイルドカードをつけて型付けをする方法はあるのでしょうか。 ※以下のコードはエラーがでます type Image = { url*: string;  [key: string]: string; } const images: Image[] = [{ url123: ["path/to/a", "path/to/b&...
tom yam's user avatar
  • 39
0
1 回答
142 閲覧数

stripeのpaymentIntent.statusに上手く型が当てられない。

stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。 型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか? エラー内容 (parameter) paymentIntent: any Argument of type '({ paymentIntent }: PaymentIntent) => void' is not assignable ...
wataru's user avatar
  • 1,123
0
1 回答
173 閲覧数

@stripe/react-stripe-jsで特定の文字列を渡しているが、ストリングリテラルでエラーになる

stripeのサンプルコードをTypeScript化しようとしているのですが、なぜかストリングリテラルが当たる場所でちゃんと文字列を渡しているのにエラーを起こします。 エラー内容 - options の箇所で出てきます。 Optional Elements configuration options. Once the stripe prop has been set, these options ...
wataru's user avatar
  • 1,123
0
1 回答
209 閲覧数

リテラル型の型宣言において、動的に値を生成する時のベストプラティクス

お世話になります。 TypeScriptでリテラル型を用いる時、値を動的生成する場合のベストプラティクスをお聞きしたいです。 type valueType = 'foo_1' | 'foo_2'; const prefix = ( value: string ): string => { const prefix = 'foo'; return `${prefix}_${...
user51174's user avatar
0
1 回答
341 閲覧数

オブジェクトに対してマップ処理する関数を型付けしたい

以下のような、オブジェクトにマップ処理する関数があります。 const objectMap = (obj, fun) => Object.fromEntries(Object.entries(obj).map(fun)); objectMap({a: 2, b: 4}, ([key, val]) => [key, val * 2]) // {a: 4, b: 8} ...
tom yam's user avatar
  • 39
0
1 回答
573 閲覧数

React,TypeScriptでuseContextを使いたいがエラーを解決できない

現在、firebaseを使ったwebアプリを開発中です。React、TypeScriptを使っています。 ユーザーの認証情報を保持するためのcontextを書いていてエラーが発生しています。 自力で一からフロントエンドのアプリを作るのは初めてで、解決できずに困っています。 authcontext.ts import { VFC, createContext, useContext, ...
uyugineer's user avatar
2
2 回答
181 閲覧数

2つのnullableなプロパティが同時にnullにならない場合の型定義

TypeScriptの型定義に関する質問です。 ここに両者ともnullableなプロパティを持ったクラスがあったとします。 class Example { foo: string | null; bar: string | null; } このクラスでは、foo と bar が同時に null になることはなく、また逆に同時に string 型になることはあるとします。 ...
GrapeColor's user avatar
2
0 回答
98 閲覧数

ジェネリクスのクラスを引数に取るとき、デフォルト引数を取る方法を教えてください。

ジェネリクスを new するには {new(): T} すればよいということを、以下のドキュメントで知りました。 https://github.com/Microsoft/TypeScript/wiki/FAQ#why-cant-i-write-typeof-t-new-t-or-instanceof-t-in-my-generic-function しかし、ジェネリクスのクラスを引数に取るとき、...
Ln-north's user avatar
2
0 回答
72 閲覧数

NestJS(TypeORM)でsyncronizeされてしまう

こんにちは。TypeORMを使用してNestJSで開発してます。 DB接続~開発まで問題なく繋がってはいるのですが。 この度、table(Entity)の即時反映を止め、Migrationで変更を管理しようとしています。本家ページを見るとsynchronize:trueに設定しているとEntityが変わったらBindingされDBにも即時適用されるとの事でこちらをfalseにしてみました。 ただ、...
船越譲's user avatar
1
2 回答
181 閲覧数

TypescriptのUnion型はC言語などと同じく共用体ですか?

先日TypeScriptのUnion型からC言語の共用体の動作が納得できたという会話がありました。 TypescriptのUnion型は TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。 https://book.yyts.org/reference/values-types-variables/union であり、 C言語のUnion型が ...
olivedesert's user avatar
0
1 回答
529 閲覧数

react-router-domのuseLocation()でprotocolとhostを取得する方法

react-router-domのuseLocation()でprotocolとhostを取得する方法はありますか? useLocation()ではなく、window.location.protocol、window.location.hostとするしかないのでしょうか? import { memo, VFC, useEffect } from "react"; import {...
shimmy0619's user avatar
2
1 回答
2,237 閲覧数

typescriptで循環import(WARNING in Circular dependency detected)を解決するには?

例えば下記のようなシンプルな循環参照があります。 DepartmentSearchDialogComponent.ts import UserSearchDialogComponent from './user-search-dialog.component'; export class DepartmentSearchDialogComponent { // ... } ...
takemori_kondo's user avatar
0
1 回答
1,552 閲覧数

MUIのDatePickerの言語を日本語にする方法は?

MUIのDatePickerの言語を日本語にする方法はありますでしょうか? 下記のようなコードを書いたところ、ブラウザにTypeError: Cannot read properties of undefined (reading 'date')というエラーが表示されました。 locale="ja"を削除するとDatePickerは表示されますが、英語表示となります。 /* ...
shimmy0619's user avatar
0
1 回答
113 閲覧数

デバッグ中のAngularを、コンソールから操作したい

例えばVueは、以下のようにして変数を書き換えて動作を確認できます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="./...
takemori_kondo's user avatar
0
1 回答
442 閲覧数

React TypeScriptにおいて、複数のコンポーネントをまとめる方法は?

使用する際に、ComponentAll.Component1のように強制するにはどのような宣言方法を行えばよいのでしょうか? component1.tsx const Component1 = () => ( <input type="email"> ) export default Component1; component2.tsx const ...
piyopiyo's user avatar
1
0 回答
130 閲覧数

tscがtsconfig.jsonを使用してくれない。 [重複]

TypeScriptでSymbolを使ったコードを書いたのですがtscがtsconfig.jsonに基づいてコンパイルしてくれないためにエラーが発生してしまいます。 以下がTypeScriptのコードです。 main.ts let symbol = Symbol(); ここで、tsc main.tsコマンドをコマンドラインに入力すると、 error TS2585: 'Symbol' only ...
duffy's user avatar
  • 23
0
1 回答
117 閲覧数

Angularチュートリアル(tour of heroes)において、クエリ文字列の用途と働きがわからない。

名前検索をするに当たり、このクエリ文字列は、どういう機能が働いているのでしょうか。 this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`) 以下の画像中の、ここのクエリ文字列の意味が分からないです。
A.Y's user avatar
  • 1
0
1 回答
319 閲覧数

stripe.jsのサンプルコードをTypeScript化したいが、型の当て方が分からない。

react-stripe-js 自体はTypeScriptに対応しているというのをドキュメントで見たのですが、どのようにインストールした型を当てていけば良いか分からないです。 CardElementComponent とimportとして使用するみたいな記事をみて const handleChange = async (event: CardElementComponent) => { ...
wataru's user avatar
  • 1,123
1
1 回答
331 閲覧数

Angular12でng2-chartsのチャート再更新が行われない

前提・実現したいこと Angular12を用いたWebアプリケーションを作ろうとしています。 外部APIをたたいて得られたデータをng2-chartsによりチャートにします。 再びAPIをたたたとき、先ほどのチャートを新しく得られたデータによって再描画したいと考えています。 発生している問題 はじめてAPIをたたいた結果によるチャートの描画を行うことはできています。 ...
Hiiro Shimura's user avatar
2
1 回答
204 閲覧数

aws-sdk-js で定義されている型が正しいか分からない

AWSのS3クライアントモジュールにて、下記関数があるのですが、この書き方だとerrが確実にcallbackに入ってくるので、err?: Errorとなっているべきではないか、 と考えてしまいます。 upload(params: S3.Types.PutObjectRequest, options?: ManagedUpload.ManagedUploadOptions, ...
user47314's user avatar
1
1 回答
3,470 閲覧数

TypeScriptでtsconfigが読み込まれない。

下記の記事を参考に tsconfug.json のコメントアウトを外したのですが、エラーが取れないです。 error TS1192: Module '"fs"' has no default export. エラーを取ろうとしてtsconfig.jsonの設定をしていたのですが、設定してもエラーが取れないので、読み込まれていない事に気付きました。 ...
wataru's user avatar
  • 1,123
1
0 回答
875 閲覧数

javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象

Reactを用いて以下のようなコンポーネントを作成しました。 文字が入力された際、それが数字であるなら半角化して反映します。 全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。 const InptArea:FC=()=>...
A.takagi's user avatar
0
1 回答
93 閲覧数

Angular-Scullyのプラグインでコンフィグオブジェクトを反映させる方法について

AngularとScullyモジュールを使って静的サイトとしてブログを立ち上げようとしています。 アーカイブページの自動生成をプラグインとして実装しましたが、setConfig関数の使い方が悪いのか、うまくいきません。 プラグインにプラグイン自体のスクリプト以外からコンフィグを設定する方法について 何か見当違いな部分があるのだと思いますが全く解決に至っていません。 確認すべきこと、...
ぽんじゅ Ponju's user avatar
0
0 回答
258 閲覧数

Next.jsに追加したgoogle analyticsの gtag.jsをTypeScriptにして型を導入したい。

下記のブログを参考にNext.jsで作成したブログにgoogle analyticsを導入したのですが、gtag.jsをTypeScriptに変換する所で躓いています。 Next.jsでGoogle Analyticsを使えるようにする google analyticsの型を @types/google.analytics npm install --save @types/google....
wataru's user avatar
  • 1,123
0
1 回答
239 閲覧数

Next.jsのブログkatexで書かれた数式を表示したい。

mdファイルを取り扱うのに remark を使用しているので remark-math というものをドキュメントに沿ってインストールしたんですが、今で import でモジュールを取り込んできたのに require で読み込んでいてNext.jsではこのようなモジュールの取り込み方は出来るのでしょうか? 一応ドキュメント通り require で試してみたのですが、エラーが出ます。 ...
wataru's user avatar
  • 1,123
0
0 回答
636 閲覧数

Jestでモジュールの一部をモックする

Jestを使ったテストの実装で困っています。 a.ts export const f1 = () => 'f1'; export const f2 = () => f1(); a.spec.ts import * as a from './a' it('f1をstubしたい', () => { const f1Spy = jest.spyOn(a, 'f1')....
emoyila's user avatar
0
1 回答
1,568 閲覧数

TypeScript components内でmap()を使用するとエラーが出る。

<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか? //topicListには["javascript"...
wataru's user avatar
  • 1,123
0
2 回答
972 閲覧数

AngularのNgForOfのNgとは何の略でしょうか?

AngularのNgForOfのNgとは何の略でしょうか? NgForOf
shimmy0619's user avatar
0
1 回答
217 閲覧数

TypeScriptでアクセストークンを外部ファイル(token.ts)に記述してimportして読み込めるようにしたい。

Next.jsでブログを作成しているものです。Githubのパーソナルアクセストークンをコードにそのまま記述するとGithubにコードをあげる際に困るので、載せたくないアクセストークンを外部ファイルに記述してそれを .gitignoreで無視しようと思うのですが上手く行きません。 やった事 next.jsのルートフォルダにtoken.tsを作成してconst accessToken = &...
wataru's user avatar
  • 1,123