[typescript] タグが付いた質問
TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。
213
質問
0
票
0
回答
52
閲覧数
Reactのフックについて
現在、Reactベースのアプリ開発をしています。
多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか?
const ComponentA = () => {
const [value, setValue] = ...
0
票
0
回答
50
閲覧数
typescript でencoding-japaneseでエラーしてしまう
node18を利用しているのですが、下記のコードでエラーが出てしまうのですが、どのように対応すればいいでしょうか。
エラー:
この呼び出しに一致するオーバーロードはありません。
前回のオーバーロードにより、次のエラーが発生しました。
型 'string | number[] | ArrayBuffer' の引数を型 'WithImplicitCoercion<string> ...
0
票
0
回答
41
閲覧数
JEST でのテスト実行時のみ、 TypeError:xxx is not a function エラーが発生する
概要
Typescript で書いているコードにて、
通常実行する分には問題ないが、Jestでテストを実行する際に
外部モジュール内部で「TypeError: xxx is not a function」が発生する。
エラーを解除しJESTでの試験を動作させたい
発生している問題・エラーメッセージ
エラーメッセージ
TypeError: secp256k1.publicKeyCreate is ...
0
票
0
回答
39
閲覧数
Laravel10+vue3+inertia+ts において Userの型拡張をする方法は?
あるページで、User情報から表示の分岐をさせています。
そのため、LaravelのUser Table で追加した role を参照します。
これをvue内に書いているのですが、ワーニングを消すことができない状態です。
IDEは VSCODE を使用しています。
const user = usePage().props.auth.user;
const numberOfApiKeys = ...
0
票
0
回答
45
閲覧数
Serverless + Typescriptを使用したjson schemaのバリデーションチェックエラーについて
Serverless + Typescriptを使用した際にバリデーションチェックエラーについて行き詰っており、ご相談させてください。
frameworkVersion:3
serverlessのテンプレートから作成
※テンプレートから作成した状態から説明いたします
curlを使用してPostリクエストをおこなった場合に下記エラーとなります。
...
0
票
0
回答
55
閲覧数
types配下の型定義がpage,componentsで呼び出せない
nuxt3でtypes配下に型を定義しているのですが、pageたはcomponentsでimportをするとエラーになります。
page,componentsに直接型を書いた場合は読み込み成功
composables配下から同じ型を呼び出した時も読み込み成功
上記のことから設定周りが怪しいと思い調べたのですが、原因がわかりませんでした。
hello.vue
<template lang=...
0
票
0
回答
215
閲覧数
vue.js3 typescript で エラー[computedプロパティの型がComputedOptionsと一致していない]の適切な対処方法が知りたい
質問内容
提示のソースコードですが以下のコンソールログのエラー出ますこれなどうやって対処するのが適切なのでしょうか?
ChatGPTで原因は理解したのですが対処方法がわかりません。
知りたいこと
エラー部の原因を対処するための適切な対処方法が知りたい
利用ライブラリ
vue.js3
実行したコマンド
vue create project //でプロジェクトを作成
npm run build //...
1
票
0
回答
37
閲覧数
Angular で配列を使った EChart の描画
Angularにて配列を使ったEChartの描画を試みました。
配列のデータはFireBaseのデータベースから取得してループ文で生成してます。
これは動きません。
datasetのsourceに直接値を書くと動くので、そこが問題だとわかってます。
配列の作り方に問題があるのでしょうか?
アドバイスいただけると幸いです。
直接値を書いたオブジェクトと、
...
1
票
1
回答
378
閲覧数
Error: Cannot use import statement outside a module の対処方法が知りたい
質問内容
提示コードの///コメント部内部のコードの最上部のimport文ですがnpx tsc -w コマンドを実行して動作を確認すると以下のエラーが出るのですが原因がわかりません。調べてるとmoduleやtarget等を変更するようですが
変更してもエラーが出ます。これは何をどう変更させればいいのでしょうか?
試したこと
1,参考サイトBにように<script>タグにtpye=&...
1
票
1
回答
135
閲覧数
dialogタグを配置場所の理由が知りたい。
質問内容
提示コードの<!-- ここに置きました -->ですがこの場所に提示コード下部のコード<!--########-->部のコードを置いたのですが。プログラムは実行できdialogタグがJavascriptを通して画面に表示されるのですがその後閉じるタグである<buttonタグのクリックしても閉じません。しかし<!--########-->...
0
票
2
回答
166
閲覧数
fetch()関数を使って複数のファイルを非同期で読み込む処理を作りたい
質問内容
提示コードのtest1(){},test2(){}関数ですが内部のようにPromiseを使って複数のファイルを非同期で読み込みたいのですがファイルの中身をpros[0]で見てみても中身がファイルの内容ではありません。これはどうすればいいのでしょうか?
知りたいことA
非同期でファイルを読み込みたい
調べたこと
fetch()の戻り値がPromiseでthenをした(res) => ...
0
票
2
回答
119
閲覧数
await Promise.all();以降の処理が実行されない原因が知りたい。
質問内容
提示コードですがawait Promise.all();の行以降のコードが実行されないのですがこれなぜでしょうか?
調べたこと
1,コメント部//let t = new Date().getTime() - time.getTime();でエラーが起きている可能性を考えコメントアウト
2,let pros = [] をlet pros = new Array()に変更して実験
3,...
0
票
1
回答
125
閲覧数
fetch関数を使ってテキストファイルの中身を表示するとなぜかindex.htmlの中身が表示される原因が知りたい。
質問内容
提示コードのスクリプト部ですがfetch関数を使ってテキストファイルの中身を表示させたいのですが正しいパスを指定してもなぜか実行時のエントリーポイントのindex.htmlの中身が表示されてしまうのですがこれはなぜでしょうか?原因がわかりません。
試したこと
1,tsc script/Main.tsを実行してnpx paracel index.html --openを実行
2,...
0
票
1
回答
135
閲覧数
Error: [ Uncaught TypeError: _fs.readFile is not a function ]の原因が知りたい
質問内容
提示コードの上部のインポート文ですがfsを読み込んでfs.readFile()関数を使いたいのですが
色々なやり方を試しても以下のようなエラーが出るのですがこれなぜなのでしょうか?
知りたいこと
fs.readFile()が見つからない原因が知りたい。
試したこと
1,提示コードのように色々実験
2,npm install fs npm install fs/...
0
票
1
回答
175
閲覧数
プログラムは実行できるがTypedocがエラーになる原因が知りたい。
質問内容
提示コードのコメント部内部のA,b部ですがTypedoc Error 部のようなエラーが大量に発生します。
これはどうやってエラーを解消したらいいのでしょうか?実行自体はできるのですが。Typedocによるエラーが発生してしまいドキュメントが作成できません。
現状
1,実行可能
2,ドキュメント作成のためtypedocが提示のようなエラーになります。(一部抜粋)
3,tsconfig....
1
票
1
回答
112
閲覧数
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/...
2
票
0
回答
41
閲覧数
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
票
0
回答
102
閲覧数
vue3を使用してamcharts5のグラフを切り替えたいです
vue3とamcharts5を不慣れなため思ったような挙動をしてくれなくて困っています。
やりたいことは、グラフをボタンで切り替えたいです。
具体手には、ボタンを二つ設置して、データ1がクリックされたら円グラフを描画、その後もう一つのデータ2をクリックしたら同じグラフを使用してデータだけ入れ替えて、再描画したいと考えていて、
コードを書きましたがエラーが出て動きません、...
0
票
1
回答
76
閲覧数
typescriptで配列内にアロー関数を書きたい
下記コードをtypescriptで書くにはどのようにすればよろしいでしょうか?
export default class Auth extends Vue {
public rules: { username: Array<string|boolean>, password: Array<string> } = {
// ...
0
票
1
回答
96
閲覧数
TypeScriptの2つの値に対するユーザー定義型ガードについて
次のコードをTypeScriptPlaygroundで動かしてみたところ、
testFunc(a);
のところで、aがnullの可能性があるとして、型エラーになっていました。
この型エラーを解消するために、isValidにユーザー定義型ガードa is stringのようなことを記載したいのですがどのように記載するとよいのかがわかりません。
ご存知の方、おられましたら、教えてください。
a に ...
0
票
0
回答
48
閲覧数
TypeScriptのObjectで状態定義を型安全にしつつ、必要のない状態は定義を簡略化したい
(ちょっとタイトルがわかりにくいのはわかっています。表現が難しいのでもう少し練ります)
String Literalで定義されているStatusに対応する値を定義するために、statusMapというものを以下のように定義します。
export type Status = "SOME_TEXT" | "HELLO" | "GOOD" | &...
0
票
1
回答
99
閲覧数
typescript にて typeで指定した型に代入にしようとすると配列を受け付けない
vsocdeで vue3 と typescriptでコードを書いています。
次のようなコードで typeで型指定後に obj から itemObj に値を移そうとするとエラーになります。
type Obj = {
Timeline: {
Items: ItemsObj[];
};
};
type ItemsObj = {
[key: string]: {
...
3
票
1
回答
80
閲覧数
TypeScriptでenumを使用して型を当てたい。
enumをリテラル型のような使い方は出来ないのでしょうか?
enum UserIds {
'たけし' = 1,
'かける' = 2,
'みさと' = 3,
}
// 1, 2, 3以外の数値はエラーになってほしい
const userId: UserIds = 30;
console.log(userId);
リテラル型を type UserIds = 1 | 2 | 3; ...
0
票
0
回答
57
閲覧数
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
回答
154
閲覧数
TypeScript で連想配列の中身の型を引っ張り出して使いたい
連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。
type Outside = {
key: {
a: number;
b: string;
}
}
// Outside型のkeyからInside型を作りたい (Outside型は変更してはいけない)
// type Inside = typeof Outside.key // 'Outside' ...
1
票
0
回答
55
閲覧数
Vue-Routerで切り替えた画面の中にあるVue-Routerでの切替
Vue3にてVue-Routerを使用した画面遷移の実装を考えています。
具体的な.vueファイルや画面構成は以下の通りです。
App.vue: ルートvueファイル
Login.vue: ID/PWの入力欄、ログイン画面
Main.vue: ヘッダーとフッターのある画面
Service.vue: ユーザーが契約しているサービスを選択する画面
Menu.vue: ...
0
票
1
回答
66
閲覧数
TypeScriptの配列の詰替えがしたいです
Angularにて画面を作っています。ある画面のコンポーネントにて、
class Sub {
constructor(
aaa: string,
bbb: string,
ccc: string
) {}
}
上記のクラスをimportし、この型でAPIからレスポンスが帰ってくるのでそれをTableの行選択で利用できるように
...
1
票
1
回答
215
閲覧数
rails, react-playerとhls.jsを用いてHLS再生の実装をしたい
バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。
現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。
react-playerはhls.jsとも互換性がありそうですが、...
0
票
1
回答
152
閲覧数
ElectronのTypescript+Webpackテンプレートが実行できない
Electron Forgeのページに従い、Electronのテンプレートを以下のコマンドを実行してインストールしました。
npx create-electron-app my-new-app --template=typescript-webpack
次に
npm run start
を実行すると、コマンドウィンドウに以下のようなエラーメッセージが表示されました。
$ npm run ...
0
票
0
回答
56
閲覧数
Vueで円スライドバーで範囲指定をする際に最小~最大の範囲指定をしたい
添付の画像のように通常は最小値~最大値で範囲指定をすると思います。
それに加えて、最大値~最小値で範囲してできる方法を教えてください。
例えば340~20のような範囲を指定したいです。このとき実際の値は360を境界値として、340~360、0~20となる想定です。
以下のライブラリを使用して実装しようとしましたが、ダメでした。
https://github.com/soundar24/vue-...
1
票
1
回答
72
閲覧数
useEffectの挙動について
useEffectの挙動について質問させていただきます。
console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。
import { useEffect, useState } from "react";
type inputSetting = {
player : number;
wolves : number;
...
2
票
1
回答
2,771
閲覧数
TypeScriptでインデックスアクセス時のundefinedを回避したい
下記のコードで、オブジェクトは 'undefined' である可能性があります。ts(2532)
と、test[i].vの部分でエラーになってしまうのですが、原因がさっぱりわかりません。
コードの書き方で回避する方法はありますでしょうか?
// test.ts
type TestArray = {
v: string;
}
let test: TestArray[] = [];
for (...
0
票
0
回答
44
閲覧数
nextjs ssr GetServerSideProps サーバー
GetServerSidePropsを使用しているファイルをbuild → exportするにはどうすればいいのでしょうか?
/
┗/test/[id].tsx
┗/test/index.tsx
/out/
┗/test/[id]
┗index.html
のようになってますが、[id]フォルダの中身は空です・・・
0
票
0
回答
93
閲覧数
tfjs-modelsのpose-detectionでポーズ解析を行っているが、「TypeError: t is not a function」というエラーが出力
現在、tfjs-models/pose-detectionのライブラリを用いて、ポーズ解析のモジュールを追加実装しているところです。下記コードで処理を行っていますが、下記エラーが出力して処理ができない状況です。原因が分からず困っています...
実装コード(一部)
import '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-converter';
...
1
票
2
回答
228
閲覧数
TypeScriptでオプション引数を指定しつつ、Function#lengthに正規の値を入れる方法
JavaScript(ECMAScript)において、Function.prototype.length は必須パラメータの数を返します。
Function.length - JavaScript | MDN
ECMAScriptでオプション引数を指定するには、arguments もしくは「rest parameter」を使用する方法があります。
arguments は class ...
1
票
1
回答
180
閲覧数
ユニオン型クラスでプロパティ名を取得する型について
まず、クラスを利用したコンポーネントを2つ用意します。
class AdminInfoComponent {
public userCount: number = 0;
}
class UserComponent {
public id: string = "";
public createdAt: number = 0;
}
次に、クラスのプロパティ(...
0
票
2
回答
795
閲覧数
TypeScriptで抽象クラスを利用したい
発生している問題
TypeScriptで抽象クラスが利用できません。
変数 'person' は割り当てられる前に使用されています。と表示されます。
試した事2の方法で実行できる状態になりましたが、もっと良い方法を探しています。
再現手順
初期化する
npm init -y
npm install typescript ts-node
package.jsonにstartを追加する
&...
0
票
0
回答
84
閲覧数
Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには
ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
1
票
0
回答
204
閲覧数
Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない
前提
バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。
発生している問題・エラーメッセージ
$ docker-compose exec ...
0
票
1
回答
349
閲覧数
戻り値を設定したが、認識されずエラーがでてしまう。
以下のコードがコンパイル時に「宣言された型が 'void' でも 'any' でもない関数は値を返す必要があります。」と怒られてしまいました。
なぜこのコードではだめなのでしょうか?
初歩的な質問で申し訳ありませんが、よろしくお願いします。
function getTabId(): number {
const tab = chrome.tabs.query({ active: true, ...
0
票
1
回答
74
閲覧数
node_moduleライブラリのjsファイルでimport,export等が使用されている場合にbrowserifyする方法
browserify APIを利用してTypeScriptで書かれたコードをJavaScriptに変換し、それらのコードを一つにまとめる処理を書いています。
以下が問題が発生するコードです。
(async () => {
let code = await (() => {
const browserifyObject = browserify();
...
0
票
0
回答
118
閲覧数
react-bootstrapのCard.imgでローカルに保存された画像を使うにはどうしたらいいでしょう?
ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function BasicExample() {
return (
<Card style={{ width: '...
0
票
1
回答
89
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
1
票
3
回答
288
閲覧数
valueの型を指定したオブジェクトからkeyof typeofでkeyのユニオン型を作る
valueの型を指定したオブジェクトがあります。
export type SingleTextEditorParamList = {
title: string;
value: string | undefined;
onSubmit: (text: string) => Promise<void>;
note?: React.ReactNode;
};
...
0
票
1
回答
172
閲覧数
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/...
0
票
0
回答
71
閲覧数
TypeScriptでaccessTokenの型エラーが出る
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://manga-kousatu-net.vercel.app/
実現したいこと
現在Next.jsでポートフォリオで作成していおり、
TypeScriptで型付けをしたいと考えています。
発生している問題・エラーメッセージ
現在Firebase ...
0
票
1
回答
97
閲覧数
関数の戻り値に対する型付けについて
TypeScript初心者です。
とあるプロジェクトの、他の方が作成したコードを見ながら型定義について勉強をしているのですが、関数の戻り値に対して以下の画像のように「Function」という型付けをしている箇所がありました(状況説明のため簡略化したコードになります)
戻り値の型として指定した「Function」というのはいったん何を意味しているのでしょうか?
プロジェクト内に、「...
0
票
0
回答
69
閲覧数
angularで画面遷移時にロードする方法
angularの勉強をしています。
router-outletを使用してブラウザで最初にアクセスした際にソースを一気に読み込むことで、追加の読み込みなしでサクサク画面遷移ができることがわかりました。
ただ、少し大きめのシステムで、各コンポーネントの処理が大きい場合に初回のロードが重くなるのではと思っています。
このような場合に、...
2
票
1
回答
153
閲覧数
Promise の配列に対して、それを早い順で resolve する async generator に変換したい
今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。
// 例
const ...