[typescript] タグが付いた質問
TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。
59
未回答やベストアンサーなし質問
2
票
0
回答
47
閲覧数
nuxt2 tiptapを導入してビルド(yarn build)が出来ない: Cannot find name 'type'
概要
nuxt.jsを使ってLP作成のエディタを作成しようとtiptapというエディタのライブラリを入れたのですがビルド時(yarn build)にエラーになるので解消したい。
仕様技術、前提
vue2
nuxt2
typescript
導入ライブラリ
package.jsonの差分を記載(yarn addで追加)
"@tiptap/extension-color":...
2
票
1
回答
169
閲覧数
Promise の配列に対して、それを早い順で resolve する async generator に変換したい
今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。
// 例
const ...
2
票
1
回答
97
閲覧数
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。
学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。
// --snip--
export abstract class Piece {
position: ...
2
票
0
回答
205
閲覧数
関数の戻り値を受けた変数が型推論されない
以下のコードで、関数の戻り値が Promise<Foo> なので await した foo の型は Foo になると思ったのですが any になってエラーが出ます。なぜですか。
コード
type Foo = {
bar: string | undefined;
};
const getFooPromise = async (prevBar?: string | undefined)...
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
しかし、ジェネリクスのクラスを引数に取るとき、...
2
票
0
回答
72
閲覧数
NestJS(TypeORM)でsyncronizeされてしまう
こんにちは。TypeORMを使用してNestJSで開発してます。
DB接続~開発まで問題なく繋がってはいるのですが。
この度、table(Entity)の即時反映を止め、Migrationで変更を管理しようとしています。本家ページを見るとsynchronize:trueに設定しているとEntityが変わったらBindingされDBにも即時適用されるとの事でこちらをfalseにしてみました。
ただ、...
2
票
0
回答
93
閲覧数
vscodeのエクスプローラ表示で、任意のファイルの背景色だけを動的に変更する方法
下記関連ですが、
サイドバーのエクスプローラの背景色変更方法
vscodeのサイドバーのエクスプローラ上のソースツリーにて、
任意のファイルの背景色だけを動的に変更したいのですが、実現方法が分かりません。
typescriptのロジックイメージとしては、こんな感じです↓
エクスプローラ上のソースツリー内でファイルXXXを探索し、
ファイルが存在した場合、ファイルXXXの背景色表示だけを変更する。
...
1
票
1
回答
170
閲覧数
TypeScript をコンパイルして実行すると exports is not defined というエラーが出る
TSでGSAPを読み込んでコンパイルまでは上手くいくのですが、JSの時点で下記エラーが表示されます。
tsconfig.jsonの値はいろいろ変えてみたのですが、どうしてもうまくいきません。
何が問題なのでしょうか。どなたか教えて頂けないでしょうか。
エラーメッセージ:
Uncaught ReferenceError: exports is not defined
Object....
1
票
0
回答
56
閲覧数
Angular で配列を使った EChart の描画
Angularにて配列を使ったEChartの描画を試みました。
配列のデータはFireBaseのデータベースから取得してループ文で生成してます。
これは動きません。
datasetのsourceに直接値を書くと動くので、そこが問題だとわかってます。
配列の作り方に問題があるのでしょうか?
アドバイスいただけると幸いです。
直接値を書いたオブジェクトと、
...
1
票
0
回答
111
閲覧数
vue3を使用してamcharts5のグラフを切り替えたいです
vue3とamcharts5を不慣れなため思ったような挙動をしてくれなくて困っています。
やりたいことは、グラフをボタンで切り替えたいです。
具体手には、ボタンを二つ設置して、データ1がクリックされたら円グラフを描画、その後もう一つのデータ2をクリックしたら同じグラフを使用してデータだけ入れ替えて、再描画したいと考えていて、
コードを書きましたがエラーが出て動きません、...
1
票
0
回答
89
閲覧数
Vue-Routerで切り替えた画面の中にあるVue-Routerでの切替
Vue3にてVue-Routerを使用した画面遷移の実装を考えています。
具体的な.vueファイルや画面構成は以下の通りです。
App.vue: ルートvueファイル
Login.vue: ID/PWの入力欄、ログイン画面
Main.vue: ヘッダーとフッターのある画面
Service.vue: ユーザーが契約しているサービスを選択する画面
Menu.vue: ...
1
票
0
回答
269
閲覧数
Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない
前提
バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。
発生している問題・エラーメッセージ
$ docker-compose exec ...
1
票
1
回答
58
閲覧数
定義された型の変数を読み取り専用にしたい
例えば,以下のような Options という型を定義します。
interface Options {
"encoding": string,
"initValue"?: any
}
変数 options を用意するとき変数中身の編集については型の入力補完を継承しつつ,最終的には読み取り専用として変数を宣言したいです。
...
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 ...
1
票
0
回答
876
閲覧数
javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象
Reactを用いて以下のようなコンポーネントを作成しました。
文字が入力された際、それが数字であるなら半角化して反映します。
全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。
const InptArea:FC=()=>...
1
票
2
回答
517
閲覧数
interfaceをObject.keysで回して値を更新したい
javascriptからTypeScriptへの移行を行っています。
javascriptでは下記のようにobjectのkeyを用いて部分変更ができましたが
Typescriptでは型が怒られるため実現できていません。
Typescriptではどう逆立ちしても無理でしょうか?
巨大なobjectの一部を更新するロジックがかなり多いため、なんとか実現したいのですが。。。
javascript
...
1
票
0
回答
74
閲覧数
react typescript materialUIを使ったスタイルの当て方
環境
・reactとTypescriptを使っています
・デザインはmaterial UIを使っています。
・スタイルlはstyled-componentsで当てています。
わからないこと
Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。
しかし下記のようなエラーが出てしましました。
...
1
票
0
回答
496
閲覧数
Vuex & Typescript で this.$store を参照できない
お世話になっております。
現在VuexとTypescriptを使用してカウンターアプリを作成しています。
質問
Vuexのストアをthis.$storeで参照することができない。
this.$store → TS2339: Property '$store' does not exist on type
this['$store'] → 正常に動作する
this['$store']...
1
票
0
回答
624
閲覧数
react nativeでpretterとeslintを使用するときのコード整形について
解決したいこと
拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について
typescriptで書くときに悩まされる下記のerrorについて
前提
react native を書いています。コード整形でpretterとeslintを使用しています。
問題
ここでうまく行かないことがあります。
ファイルの拡張子を.js でreact ...
1
票
0
回答
69
閲覧数
TypeScript import {Foo} と import Fooの違い
タイトルのとおり、波括弧をつけた場合との違い及び
defalt exportと export オンリーとの違いがわかりません。教えてください。
1
票
0
回答
1,048
閲覧数
入力された日本語をカナ変換する方法
ionicでアプリ開発をしています。
ユーザが入力した、漢字も含む文字列を、カタカナに変換してサーバに保存したいです。
入力した値を即座にカナ変換するjQueryのプラグインautoKana.jsもあります。
しかしこれだと正確なカナが得られません。
例えば、「明日」という漢字だと本来欲しい値は「アシタ」です。
もしユーザが「明るい」と「日」を入力して「るい」を消して「明日」にした場合、「...
1
票
0
回答
69
閲覧数
SublimeText3ファイル保存に関して
SublimeText3にて新規でファイルを作成し、保存時にtsx形式で保存してもファイル名の最後に.jsがついしまいます。
どなたか解決方法ご存知でしょうか。
1
票
1
回答
210
閲覧数
redux-form(v6)をtypescriptで使いたい
redux-formをtypescriptで利用しているかに質問です。
やりたいことは「redux-form(v6)をtypescriptで使いたい」です。
typescriptはv2を利用。
redux-formの型定義を@typesで取得するとv4のものが取得されます。
https://gist.github.com/rluiten/...
0
票
1
回答
79
閲覧数
react 18.3.0 の `use` による再レンダリングが複数回発生してしまう
react 18.3.0 の use を使ったfetchとSuspenseを行いたいのですが、複数回(ときには無制限)の再レンダリングが発生してしまっています。
解決方法を教えてください。
react: 18.3.0-canary-3ff846d10-20230724
next: 13.4.12
以下のコードでトップページを開くと画面にDoneが表示されるまでの間、render ...
0
票
0
回答
27
閲覧数
Vue.js + typescriptで拡張メソッドを利用する方法
Vue.js + typescriptの環境で自作クラスの拡張メソッドを作成しました。
eslintのエラーは発生しないのですが実行時エラー(TypeError: .format is not a function)が発生します。
babelでトランスコンパイルしていますが設定が関係していたりするのでしょうか?
解決策があればご教示願います。
具体的には以下のようなコードです。(一部省略)
...
0
票
1
回答
59
閲覧数
NextJS Firebaseにデータを保存したい。
フロントエンド初心者です。
nextjs(v13.4.13)で、Firebaseにデータを保存したいですが、うまくいきません。
まず、Firebaseへの接続は完了できているので、API_KEYなどは正しく設定できているはずです。(理由は後述します。)
以下に各コードで何をしているかを説明します。
app/_gateway/firebase_config.ts
ここでは、...
0
票
0
回答
36
閲覧数
react,typescriptで型定義が誤っている?ライブラリを使用する方法
React,TypeScriptで以下のサンプルのように1つの時系列に複数のグラフを表示し、値を確認したり範囲を指定した操作ができるグラフを作りたいと考えています。
https://software.es.net/react-timeseries-charts/#/example/cycling
https://software.es.net/react-timeseries-charts/#/...
0
票
0
回答
37
閲覧数
firebaseHostingへデプロイしたアプリから、firebaseFunctionへリクエストを送り、apiを利用したいです。
自分で試したこと
クライアントサイドurl、サーバーサイドのルーティングをいろいろ変えてみましたが駄目でした。
ローカルで実行したときには問題なく動いていたんですが、index.tsを追加して実際にデプロイするとエラーになってしまいました。
発生している問題・エラー
polyfills.ea3cb635cad86c66.js:1
POST https://us-central1-...
0
票
0
回答
140
閲覧数
nuxt3のプラグイン関数をstorybookで使えるように設定する方法を知りたい。
nuxt3のプロジェクトでstorybookを使用してコンポーネント開発を進めたいのですが、./plugins/以下に作成した下記に記載のプラグイン関数($getLang())を使用しているストーリーをレンダリングする際にTypeError: _ctx.$getLang is not a function.とエラーが出ます。どのように.storybook/preview....
0
票
0
回答
58
閲覧数
Reactのフックについて
現在、Reactベースのアプリ開発をしています。
多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか?
const ComponentA = () => {
const [value, setValue] = ...
0
票
0
回答
133
閲覧数
typescript でencoding-japaneseでエラーしてしまう
node18を利用しているのですが、下記のコードでエラーが出てしまうのですが、どのように対応すればいいでしょうか。
エラー:
この呼び出しに一致するオーバーロードはありません。
前回のオーバーロードにより、次のエラーが発生しました。
型 'string | number[] | ArrayBuffer' の引数を型 'WithImplicitCoercion<string> ...
0
票
0
回答
74
閲覧数
JEST でのテスト実行時のみ、 TypeError:xxx is not a function エラーが発生する
概要
Typescript で書いているコードにて、
通常実行する分には問題ないが、Jestでテストを実行する際に
外部モジュール内部で「TypeError: xxx is not a function」が発生する。
エラーを解除しJESTでの試験を動作させたい
発生している問題・エラーメッセージ
エラーメッセージ
TypeError: secp256k1.publicKeyCreate is ...
0
票
0
回答
102
閲覧数
Laravel10+vue3+inertia+ts において Userの型拡張をする方法は?
あるページで、User情報から表示の分岐をさせています。
そのため、LaravelのUser Table で追加した role を参照します。
これをvue内に書いているのですが、ワーニングを消すことができない状態です。
IDEは VSCODE を使用しています。
const user = usePage().props.auth.user;
const numberOfApiKeys = ...
0
票
0
回答
80
閲覧数
Serverless + Typescriptを使用したjson schemaのバリデーションチェックエラーについて
Serverless + Typescriptを使用した際にバリデーションチェックエラーについて行き詰っており、ご相談させてください。
frameworkVersion:3
serverlessのテンプレートから作成
※テンプレートから作成した状態から説明いたします
curlを使用してPostリクエストをおこなった場合に下記エラーとなります。
...
0
票
0
回答
251
閲覧数
types配下の型定義がpage,componentsで呼び出せない
nuxt3でtypes配下に型を定義しているのですが、pageたはcomponentsでimportをするとエラーになります。
page,componentsに直接型を書いた場合は読み込み成功
composables配下から同じ型を呼び出した時も読み込み成功
上記のことから設定周りが怪しいと思い調べたのですが、原因がわかりませんでした。
hello.vue
<template lang=...
0
票
0
回答
504
閲覧数
vue.js3 typescript で エラー[computedプロパティの型がComputedOptionsと一致していない]の適切な対処方法が知りたい
質問内容
提示のソースコードですが以下のコンソールログのエラー出ますこれなどうやって対処するのが適切なのでしょうか?
ChatGPTで原因は理解したのですが対処方法がわかりません。
知りたいこと
エラー部の原因を対処するための適切な対処方法が知りたい
利用ライブラリ
vue.js3
実行したコマンド
vue create project //でプロジェクトを作成
npm run build //...
0
票
0
回答
55
閲覧数
TypeScriptのObjectで状態定義を型安全にしつつ、必要のない状態は定義を簡略化したい
(ちょっとタイトルがわかりにくいのはわかっています。表現が難しいのでもう少し練ります)
String Literalで定義されているStatusに対応する値を定義するために、statusMapというものを以下のように定義します。
export type Status = "SOME_TEXT" | "HELLO" | "GOOD" | &...
0
票
0
回答
73
閲覧数
TypeScript で連想配列の中身の型を引っ張り出して使いたい(Union型)
連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。
type Outside = number | {
key: {
a: number;
b: string;
}
};
// Outside型のkeyからInside型を作りたい (おそらくOutside型はnumberの可能性もあるせいで、下記が通らない)
// type Inside = ...
0
票
0
回答
30
閲覧数
KeyOfを使ったInterfaceの複数の実装
export interface Alarm {
shopNumber?: number;
shopName?: string;
daiNo?: number;
errorCode?: number;
errorContents?: string;
occurrenceDateTime?: string;
};
export interface ...
0
票
0
回答
57
閲覧数
Vueで円スライドバーで範囲指定をする際に最小~最大の範囲指定をしたい
添付の画像のように通常は最小値~最大値で範囲指定をすると思います。
それに加えて、最大値~最小値で範囲してできる方法を教えてください。
例えば340~20のような範囲を指定したいです。このとき実際の値は360を境界値として、340~360、0~20となる想定です。
以下のライブラリを使用して実装しようとしましたが、ダメでした。
https://github.com/soundar24/vue-...
0
票
0
回答
116
閲覧数
tfjs-modelsのpose-detectionでポーズ解析を行っているが、「TypeError: t is not a function」というエラーが出力
現在、tfjs-models/pose-detectionのライブラリを用いて、ポーズ解析のモジュールを追加実装しているところです。下記コードで処理を行っていますが、下記エラーが出力して処理ができない状況です。原因が分からず困っています...
実装コード(一部)
import '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-converter';
...
0
票
1
回答
93
閲覧数
node_moduleライブラリのjsファイルでimport,export等が使用されている場合にbrowserifyする方法
browserify APIを利用してTypeScriptで書かれたコードをJavaScriptに変換し、それらのコードを一つにまとめる処理を書いています。
以下が問題が発生するコードです。
(async () => {
let code = await (() => {
const browserifyObject = browserify();
...
0
票
1
回答
302
閲覧数
AngularでjsonデータをforEachを使って値を取得
Angular(バージョン7)
以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。
component.tsでhoge
items: {
"price": 200,
"count": 5
},
{
"...
0
票
1
回答
74
閲覧数
Vue Routerでネストされた型をPickしたい
vue-routerのRoute型からmatchedのmetaのみを取り出したいです。
具体的には次のようにmatchedまでは取り出せましたが、metaのみを取り出す書き方がわからずエラーが出てしまっています。
解消方法を教えていただけると助かります。
const to: Pick<Route, 'fullPath' | 'path' | 'matched'> = {
...
0
票
1
回答
324
閲覧数
Vue.js + Nuxt.js + TypeScript アプリケーションでlayoutで呼び出しているコンポーネントの変数をpagesから操作したい
表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。
やりたいことの要点としては、
・...
0
票
1
回答
142
閲覧数
stripeのpaymentIntent.statusに上手く型が当てられない。
stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか?
エラー内容
(parameter) paymentIntent: any
Argument of type '({ paymentIntent }: PaymentIntent) => void' is not assignable ...
0
票
1
回答
117
閲覧数
Angularチュートリアル(tour of heroes)において、クエリ文字列の用途と働きがわからない。
名前検索をするに当たり、このクエリ文字列は、どういう機能が働いているのでしょうか。
this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`)
以下の画像中の、ここのクエリ文字列の意味が分からないです。
0
票
1
回答
319
閲覧数
stripe.jsのサンプルコードをTypeScript化したいが、型の当て方が分からない。
react-stripe-js 自体はTypeScriptに対応しているというのをドキュメントで見たのですが、どのようにインストールした型を当てていけば良いか分からないです。 CardElementComponent とimportとして使用するみたいな記事をみて const handleChange = async (event: CardElementComponent) => { ...
0
票
1
回答
93
閲覧数
Angular-Scullyのプラグインでコンフィグオブジェクトを反映させる方法について
AngularとScullyモジュールを使って静的サイトとしてブログを立ち上げようとしています。
アーカイブページの自動生成をプラグインとして実装しましたが、setConfig関数の使い方が悪いのか、うまくいきません。
プラグインにプラグイン自体のスクリプト以外からコンフィグを設定する方法について
何か見当違いな部分があるのだと思いますが全く解決に至っていません。
確認すべきこと、...
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....