[typescript] タグが付いた質問

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

絞り込み
並べ替え
タグ付けされた
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 ...
1
1 回答
52 閲覧数

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 `...
0
1 回答
9,256 閲覧数

interfaceのプロパティがParsing error: Unexpected token

TypeScriptとNuxt.jsでフロントの開発をしています。 eslintを使い開発をしているのですが、interfaceを定義した際にinterfaceのプロパティでエラーが発生しました。 interface Data { name: string password: string // Parsing error: Unexpected token } 以下がエラー全文です。 ...
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-...
1
1 回答
168 閲覧数

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

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

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

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

配列にオブジェクトを追加したい(forEach, push)

下記サンプルコードで配列にオブジェクトをpushしたいのですが思うようにできません。 forEachを使って1度目のループで{text: "aaa", imagePath: ""}をarryにpushして、 2度目のループで{text: "bbb", imagePath: "", link: ""}...
0
0 回答
58 閲覧数

Reactのフックについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/...
1
0 回答
111 閲覧数

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

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

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

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

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

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

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

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

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

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

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

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

interfaceをObject.keysで回して値を更新したい

javascriptからTypeScriptへの移行を行っています。 javascriptでは下記のようにobjectのkeyを用いて部分変更ができましたが Typescriptでは型が怒られるため実現できていません。 Typescriptではどう逆立ちしても無理でしょうか? 巨大なobjectの一部を更新するロジックがかなり多いため、なんとか実現したいのですが。。。 javascript ...
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
1 回答
189 閲覧数

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

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

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

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

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

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

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

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

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

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

TypeScriptでAPIから返ってきたオブジェクトの配列に型を定義したい

下記のURLにアクセスするとGitHubリポジトリのデータがJsonファイルで返されるのですが、配列の中に複数オブジェクトが入ってる物にどのように型を定義すれば良いか教えて頂けないでしょうか? https://api.github.com/repositories/354726603/contents/articles この記事を参考に出来ると思ったのですが、返ってくるデータが[{},{},{}.....
0
1 回答
198 閲覧数

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

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

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

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

useEffectの挙動について

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

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

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

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

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

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

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

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

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