[typescript] タグが付いた質問

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

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

Angular(MSAL)においてAzure ADの認証画面に遷移させる前に任意の処理を行う方法は?

下記ドキュメントを参照し、Azure ADとAngular(MSAL)使用した際の認証を検証しています。 https://learn.microsoft.com/ja-jp/entra/identity-platform/tutorial-v2-angular-auth-code 当方の環境では上記ドキュメントの「Sign in using redirects」を使用し、 「Implement ...
user60276's user avatar
0
0 回答
83 閲覧数

nuxt3 で nuxt アプリケーション全体にemitするための方法

nuxt2 から nuxt3 に移行しています。 下記のコードを nuxt3 に移行するにはどうすればいいのでしょうか? <script lang="ts"> async someFnc() { await this.$nuxt.$emit("hoge/fuga") // someImpl } </script> off ...
batch's user avatar
  • 9
0
1 回答
94 閲覧数

nuxt2 と nuxt3 の対応関係について

nuxt2で開発しているプロジェクトをnuxt3に移行したいと思っています。 nuxt2の下記のような実装は、nuxt3ではどのような実装に対応するのでしょうか? <script setup lang="ts"> や vue3 の composition API を導入した形式で実装したいと考えています。 pagex/index.vue <script ...
batch's user avatar
  • 9
0
1 回答
102 閲覧数

typescriptでfunctionの引数、戻り値に型を定義する方法は?

以下の関数1と2がH型である事を保証させる書き方はありますでしょうか? ↓このサンプルをブラウザのPlaygroundで直接実行させるリンクはこちら type H = (a:number,b:boolean) => String; const exp = {} as any; const f1:H = (a,b)=>{ return "ok"; }; /// ...
Fushihara's user avatar
  • 540
0
0 回答
41 閲覧数

react,muiで汎用性の高いButton+Popoverを作りたい

react,typescriptでMUIを用いたソフトを開発しています。 その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。 普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して~となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。 ...
shino's user avatar
  • 11
0
1 回答
124 閲覧数

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 ...
Isuke FUJIYAMA's user avatar
1
1 回答
125 閲覧数

ESLint が vite.config.ts に対し strictNullChecks が有効化されていないというエラーを出す

yarn create vite で React かつ TypeScript + RSC なプロジェクトを作った後、README.md にしたがって ESLint の設定を増やしたところ、yarn lint で以下のエラーが消せませんでした。 /path/to/my-project/vite.config.ts 0:1 error This rule requires the `...
nekketsuuu's user avatar
  • 2.3万
0
0 回答
34 閲覧数

Vue.js + typescriptで拡張メソッドを利用する方法

Vue.js + typescriptの環境で自作クラスの拡張メソッドを作成しました。 eslintのエラーは発生しないのですが実行時エラー(TypeError: .format is not a function)が発生します。 babelでトランスコンパイルしていますが設定が関係していたりするのでしょうか? 解決策があればご教示願います。 具体的には以下のようなコードです。(一部省略) ...
mesota's user avatar
  • 1
0
1 回答
85 閲覧数

NextJS Firebaseにデータを保存したい。

フロントエンド初心者です。 nextjs(v13.4.13)で、Firebaseにデータを保存したいですが、うまくいきません。 まず、Firebaseへの接続は完了できているので、API_KEYなどは正しく設定できているはずです。(理由は後述します。) 以下に各コードで何をしているかを説明します。 app/_gateway/firebase_config.ts ここでは、...
nao's user avatar
  • 1
0
0 回答
39 閲覧数

react,typescriptで型定義が誤っている?ライブラリを使用する方法

React,TypeScriptで以下のサンプルのように1つの時系列に複数のグラフを表示し、値を確認したり範囲を指定した操作ができるグラフを作りたいと考えています。 https://software.es.net/react-timeseries-charts/#/example/cycling https://software.es.net/react-timeseries-charts/#/...
shino's user avatar
  • 11
0
0 回答
39 閲覧数

firebaseHostingへデプロイしたアプリから、firebaseFunctionへリクエストを送り、apiを利用したいです。

自分で試したこと クライアントサイドurl、サーバーサイドのルーティングをいろいろ変えてみましたが駄目でした。 ローカルで実行したときには問題なく動いていたんですが、index.tsを追加して実際にデプロイするとエラーになってしまいました。 発生している問題・エラー polyfills.ea3cb635cad86c66.js:1 POST https://us-central1-...
no_job's user avatar
  • 1
1
1 回答
433 閲覧数

TypeScript をコンパイルして実行すると exports is not defined というエラーが出る

TSでGSAPを読み込んでコンパイルまでは上手くいくのですが、JSの時点で下記エラーが表示されます。 tsconfig.jsonの値はいろいろ変えてみたのですが、どうしてもうまくいきません。 何が問題なのでしょうか。どなたか教えて頂けないでしょうか。 エラーメッセージ: Uncaught ReferenceError: exports is not defined Object....
Koichi Miyazaki's user avatar
0
0 回答
178 閲覧数

nuxt3のプラグイン関数をstorybookで使えるように設定する方法を知りたい。

nuxt3のプロジェクトでstorybookを使用してコンポーネント開発を進めたいのですが、./plugins/以下に作成した下記に記載のプラグイン関数($getLang())を使用しているストーリーをレンダリングする際にTypeError: _ctx.$getLang is not a function.とエラーが出ます。どのように.storybook/preview....
yosuke.kom's user avatar
0
0 回答
63 閲覧数

Reactのフックについて

現在、Reactベースのアプリ開発をしています。 多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか? const ComponentA = () => { const [value, setValue] = ...
kuu13580's user avatar
0
0 回答
183 閲覧数

typescript でencoding-japaneseでエラーしてしまう

node18を利用しているのですが、下記のコードでエラーが出てしまうのですが、どのように対応すればいいでしょうか。 エラー: この呼び出しに一致するオーバーロードはありません。 前回のオーバーロードにより、次のエラーが発生しました。 型 'string | number[] | ArrayBuffer' の引数を型 'WithImplicitCoercion<string> ...
aaaaa's user avatar
  • 1
0
0 回答
91 閲覧数

JEST でのテスト実行時のみ、 TypeError:xxx is not a function エラーが発生する

概要 Typescript で書いているコードにて、 通常実行する分には問題ないが、Jestでテストを実行する際に 外部モジュール内部で「TypeError: xxx is not a function」が発生する。 エラーを解除しJESTでの試験を動作させたい 発生している問題・エラーメッセージ エラーメッセージ TypeError: secp256k1.publicKeyCreate is ...
funa's user avatar
  • 1
0
0 回答
119 閲覧数

Laravel10+vue3+inertia+ts において Userの型拡張をする方法は?

あるページで、User情報から表示の分岐をさせています。 そのため、LaravelのUser Table で追加した role を参照します。 これをvue内に書いているのですが、ワーニングを消すことができない状態です。 IDEは VSCODE を使用しています。 const user = usePage().props.auth.user; const numberOfApiKeys = ...
light's user avatar
  • 381
0
0 回答
115 閲覧数

Serverless + Typescriptを使用したjson schemaのバリデーションチェックエラーについて

Serverless + Typescriptを使用した際にバリデーションチェックエラーについて行き詰っており、ご相談させてください。 frameworkVersion:3 serverlessのテンプレートから作成 ※テンプレートから作成した状態から説明いたします curlを使用してPostリクエストをおこなった場合に下記エラーとなります。 ...
森ネズミ's user avatar
0
0 回答
354 閲覧数

types配下の型定義がpage,componentsで呼び出せない

nuxt3でtypes配下に型を定義しているのですが、pageたはcomponentsでimportをするとエラーになります。 page,componentsに直接型を書いた場合は読み込み成功 composables配下から同じ型を呼び出した時も読み込み成功 上記のことから設定周りが怪しいと思い調べたのですが、原因がわかりませんでした。 hello.vue <template lang=...
user16768's user avatar
0
0 回答
625 閲覧数

vue.js3 typescript で エラー[computedプロパティの型がComputedOptionsと一致していない]の適切な対処方法が知りたい

質問内容 提示のソースコードですが以下のコンソールログのエラー出ますこれなどうやって対処するのが適切なのでしょうか? ChatGPTで原因は理解したのですが対処方法がわかりません。 知りたいこと エラー部の原因を対処するための適切な対処方法が知りたい 利用ライブラリ vue.js3 実行したコマンド vue create project //でプロジェクトを作成 npm run build //...
samidare_chan's user avatar
1
0 回答
59 閲覧数

Angular で配列を使った EChart の描画

Angularにて配列を使ったEChartの描画を試みました。 配列のデータはFireBaseのデータベースから取得してループ文で生成してます。 これは動きません。 datasetのsourceに直接値を書くと動くので、そこが問題だとわかってます。 配列の作り方に問題があるのでしょうか? アドバイスいただけると幸いです。 直接値を書いたオブジェクトと、 ...
TestSS's user avatar
  • 11
1
1 回答
870 閲覧数

Error: Cannot use import statement outside a module の対処方法が知りたい

質問内容 提示コードの///コメント部内部のコードの最上部のimport文ですがnpx tsc -w コマンドを実行して動作を確認すると以下のエラーが出るのですが原因がわかりません。調べてるとmoduleやtarget等を変更するようですが 変更してもエラーが出ます。これは何をどう変更させればいいのでしょうか? 試したこと 1,参考サイトBにように<script>タグにtpye=&...
samidare_chan's user avatar
1
1 回答
146 閲覧数

dialogタグを配置場所の理由が知りたい。

質問内容 提示コードの<!-- ここに置きました -->ですがこの場所に提示コード下部のコード<!--########-->部のコードを置いたのですが。プログラムは実行できdialogタグがJavascriptを通して画面に表示されるのですがその後閉じるタグである<buttonタグのクリックしても閉じません。しかし<!--########-->...
samidare_chan's user avatar
0
2 回答
374 閲覧数

fetch()関数を使って複数のファイルを非同期で読み込む処理を作りたい

質問内容 提示コードのtest1(){},test2(){}関数ですが内部のようにPromiseを使って複数のファイルを非同期で読み込みたいのですがファイルの中身をpros[0]で見てみても中身がファイルの内容ではありません。これはどうすればいいのでしょうか? 知りたいことA 非同期でファイルを読み込みたい 調べたこと fetch()の戻り値がPromiseでthenをした(res) => ...
samidare_chan's user avatar
0
2 回答
248 閲覧数

await Promise.all();以降の処理が実行されない原因が知りたい。

質問内容 提示コードですがawait Promise.all();の行以降のコードが実行されないのですがこれなぜでしょうか? 調べたこと 1,コメント部//let t = new Date().getTime() - time.getTime();でエラーが起きている可能性を考えコメントアウト 2,let pros = [] をlet pros = new Array()に変更して実験 3,...
samidare_chan's user avatar
0
1 回答
224 閲覧数

fetch関数を使ってテキストファイルの中身を表示するとなぜかindex.htmlの中身が表示される原因が知りたい。

質問内容 提示コードのスクリプト部ですがfetch関数を使ってテキストファイルの中身を表示させたいのですが正しいパスを指定してもなぜか実行時のエントリーポイントのindex.htmlの中身が表示されてしまうのですがこれはなぜでしょうか?原因がわかりません。 試したこと 1,tsc script/Main.tsを実行してnpx paracel index.html --openを実行 2,...
samidare_chan's user avatar
0
1 回答
339 閲覧数

Error: [ Uncaught TypeError: _fs.readFile is not a function ]の原因が知りたい

質問内容 提示コードの上部のインポート文ですがfsを読み込んでfs.readFile()関数を使いたいのですが 色々なやり方を試しても以下のようなエラーが出るのですがこれなぜなのでしょうか? 知りたいこと fs.readFile()が見つからない原因が知りたい。 試したこと 1,提示コードのように色々実験 2,npm install fs npm install fs/...
samidare_chan's user avatar
0
1 回答
298 閲覧数

プログラムは実行できるがTypedocがエラーになる原因が知りたい。

質問内容 提示コードのコメント部内部のA,b部ですがTypedoc Error 部のようなエラーが大量に発生します。 これはどうやってエラーを解消したらいいのでしょうか?実行自体はできるのですが。Typedocによるエラーが発生してしまいドキュメントが作成できません。 現状 1,実行可能 2,ドキュメント作成のためtypedocが提示のようなエラーになります。(一部抜粋) 3,tsconfig....
samidare_chan's user avatar
1
1 回答
187 閲覧数

TypeScriptとjestの組み合わせでエラーが出る

TypeScriptをjestで単体テストを行うべく環境構築中ですが、下記のエラーが出ていて対策が分かりません。 「tests/index.test.ts」は空ファイルになっています。 FAIL tests/index.test.ts ● Test suite failed to run /home/tatuto/Node-RED/jest-test/node_modules/...
tatuto's user avatar
  • 11
2
0 回答
56 閲覧数

nuxt2 tiptapを導入してビルド(yarn build)が出来ない: Cannot find name 'type'

概要 nuxt.jsを使ってLP作成のエディタを作成しようとtiptapというエディタのライブラリを入れたのですがビルド時(yarn build)にエラーになるので解消したい。 仕様技術、前提 vue2 nuxt2 typescript 導入ライブラリ package.jsonの差分を記載(yarn addで追加) "@tiptap/extension-color":...
tk2's user avatar
  • 21
1
0 回答
116 閲覧数

vue3を使用してamcharts5のグラフを切り替えたいです

vue3とamcharts5を不慣れなため思ったような挙動をしてくれなくて困っています。 やりたいことは、グラフをボタンで切り替えたいです。 具体手には、ボタンを二つ設置して、データ1がクリックされたら円グラフを描画、その後もう一つのデータ2をクリックしたら同じグラフを使用してデータだけ入れ替えて、再描画したいと考えていて、 コードを書きましたがエラーが出て動きません、...
Fujihara's user avatar
0
1 回答
103 閲覧数

typescriptで配列内にアロー関数を書きたい

下記コードをtypescriptで書くにはどのようにすればよろしいでしょうか? export default class Auth extends Vue { public rules: { username: Array<string|boolean>, password: Array<string> } = { // ...
hideto.T's user avatar
  • 105
0
1 回答
148 閲覧数

TypeScriptの2つの値に対するユーザー定義型ガードについて

次のコードをTypeScriptPlaygroundで動かしてみたところ、 testFunc(a); のところで、aがnullの可能性があるとして、型エラーになっていました。 この型エラーを解消するために、isValidにユーザー定義型ガードa is stringのようなことを記載したいのですがどのように記載するとよいのかがわかりません。 ご存知の方、おられましたら、教えてください。 a に ...
s.yamamoto's user avatar
0
0 回答
58 閲覧数

TypeScriptのObjectで状態定義を型安全にしつつ、必要のない状態は定義を簡略化したい

(ちょっとタイトルがわかりにくいのはわかっています。表現が難しいのでもう少し練ります) String Literalで定義されているStatusに対応する値を定義するために、statusMapというものを以下のように定義します。 export type Status = "SOME_TEXT" | "HELLO" | "GOOD" | &...
himenon's user avatar
  • 1,352
0
1 回答
138 閲覧数

typescript にて typeで指定した型に代入にしようとすると配列を受け付けない

vsocdeで vue3 と typescriptでコードを書いています。 次のようなコードで typeで型指定後に obj から itemObj に値を移そうとするとエラーになります。 type Obj = { Timeline: { Items: ItemsObj[]; }; }; type ItemsObj = { [key: string]: { ...
light's user avatar
  • 381
3
1 回答
90 閲覧数

TypeScriptでenumを使用して型を当てたい。

enumをリテラル型のような使い方は出来ないのでしょうか? enum UserIds { 'たけし' = 1, 'かける' = 2, 'みさと' = 3, } // 1, 2, 3以外の数値はエラーになってほしい const userId: UserIds = 30; console.log(userId); リテラル型を type UserIds = 1 | 2 | 3; ...
wataru's user avatar
  • 1,123
0
0 回答
77 閲覧数

TypeScript で連想配列の中身の型を引っ張り出して使いたい(Union型)

連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。 type Outside = number | { key: { a: number; b: string; } }; // Outside型のkeyからInside型を作りたい (おそらくOutside型はnumberの可能性もあるせいで、下記が通らない) // type Inside = ...
井上慧汰's user avatar
0
0 回答
30 閲覧数

KeyOfを使ったInterfaceの複数の実装

export interface Alarm { shopNumber?: number; shopName?: string; daiNo?: number; errorCode?: number; errorContents?: string; occurrenceDateTime?: string; }; export interface ...
ぴよさん's user avatar
0
1 回答
228 閲覧数

TypeScript で連想配列の中身の型を引っ張り出して使いたい

連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。 type Outside = { key: { a: number; b: string; } } // Outside型のkeyからInside型を作りたい (Outside型は変更してはいけない) // type Inside = typeof Outside.key // 'Outside' ...
井上慧汰's user avatar
1
0 回答
116 閲覧数

Vue-Routerで切り替えた画面の中にあるVue-Routerでの切替

Vue3にてVue-Routerを使用した画面遷移の実装を考えています。 具体的な.vueファイルや画面構成は以下の通りです。 App.vue: ルートvueファイル Login.vue: ID/PWの入力欄、ログイン画面 Main.vue: ヘッダーとフッターのある画面 Service.vue: ユーザーが契約しているサービスを選択する画面 Menu.vue: ...
popchan's user avatar
  • 11
0
1 回答
74 閲覧数

TypeScriptの配列の詰替えがしたいです

Angularにて画面を作っています。ある画面のコンポーネントにて、 class Sub { constructor( aaa: string, bbb: string, ccc: string ) {} } 上記のクラスをimportし、この型でAPIからレスポンスが帰ってくるのでそれをTableの行選択で利用できるように ...
noob's user avatar
  • 3
1
1 回答
358 閲覧数

rails, react-playerとhls.jsを用いてHLS再生の実装をしたい

バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。 現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。 react-playerはhls.jsとも互換性がありそうですが、...
Kazk's user avatar
  • 13
0
1 回答
214 閲覧数

ElectronのTypescript+Webpackテンプレートが実行できない

Electron Forgeのページに従い、Electronのテンプレートを以下のコマンドを実行してインストールしました。 npx create-electron-app my-new-app --template=typescript-webpack 次に npm run start を実行すると、コマンドウィンドウに以下のようなエラーメッセージが表示されました。 $ npm run ...
suzuki's user avatar
  • 3
0
0 回答
58 閲覧数

Vueで円スライドバーで範囲指定をする際に最小~最大の範囲指定をしたい

添付の画像のように通常は最小値~最大値で範囲指定をすると思います。 それに加えて、最大値~最小値で範囲してできる方法を教えてください。 例えば340~20のような範囲を指定したいです。このとき実際の値は360を境界値として、340~360、0~20となる想定です。 以下のライブラリを使用して実装しようとしましたが、ダメでした。 https://github.com/soundar24/vue-...
nekoneko's user avatar
1
1 回答
76 閲覧数

useEffectの挙動について

useEffectの挙動について質問させていただきます。 console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。 import { useEffect, useState } from "react"; type inputSetting = { player : number; wolves : number; ...
yaka's user avatar
  • 15
2
1 回答
4,754 閲覧数

TypeScriptでインデックスアクセス時のundefinedを回避したい

下記のコードで、オブジェクトは 'undefined' である可能性があります。ts(2532) と、test[i].vの部分でエラーになってしまうのですが、原因がさっぱりわかりません。 コードの書き方で回避する方法はありますでしょうか? // test.ts type TestArray = { v: string; } let test: TestArray[] = []; for (...
lamp's user avatar
  • 21
0
0 回答
120 閲覧数

tfjs-modelsのpose-detectionでポーズ解析を行っているが、「TypeError: t is not a function」というエラーが出力

現在、tfjs-models/pose-detectionのライブラリを用いて、ポーズ解析のモジュールを追加実装しているところです。下記コードで処理を行っていますが、下記エラーが出力して処理ができない状況です。原因が分からず困っています... 実装コード(一部) import '@tensorflow/tfjs-core'; import '@tensorflow/tfjs-converter'; ...
ryupim's user avatar
  • 1
1
2 回答
276 閲覧数

TypeScriptでオプション引数を指定しつつ、Function#lengthに正規の値を入れる方法

JavaScript(ECMAScript)において、Function.prototype.length は必須パラメータの数を返します。 Function.length - JavaScript | MDN ECMAScriptでオプション引数を指定するには、arguments もしくは「rest parameter」を使用する方法があります。 arguments は class ...
think49's user avatar
  • 441
1
1 回答
287 閲覧数

ユニオン型クラスでプロパティ名を取得する型について

まず、クラスを利用したコンポーネントを2つ用意します。 class AdminInfoComponent { public userCount: number = 0; } class UserComponent { public id: string = ""; public createdAt: number = 0; } 次に、クラスのプロパティ(...
Cronus's user avatar
  • 35
0
2 回答
1,495 閲覧数

TypeScriptで抽象クラスを利用したい

発生している問題 TypeScriptで抽象クラスが利用できません。 変数 'person' は割り当てられる前に使用されています。と表示されます。 試した事2の方法で実行できる状態になりましたが、もっと良い方法を探しています。 再現手順 初期化する npm init -y npm install typescript ts-node package.jsonにstartを追加する &...
bugggy's user avatar
  • 137