[typescript] タグが付いた質問
TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。
198
質問
0
票
1
回答
95
閲覧数
typescript にて typeで指定した型に代入にしようとすると配列を受け付けない
vsocdeで vue3 と typescriptでコードを書いています。
次のようなコードで typeで型指定後に obj から itemObj に値を移そうとするとエラーになります。
type Obj = {
Timeline: {
Items: ItemsObj[];
};
};
type ItemsObj = {
[key: string]: {
...
2
票
0
回答
59
閲覧数
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
回答
44
閲覧数
TypeScript で連想配列の中身の型を引っ張り出して使いたい(Union型)
連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。
type Outside = number | {
key: {
a: number;
b: string;
}
};
// Outside型のkeyからInside型を作りたい (おそらくOutside型はnumberの可能性もあるせいで、下記が通らない)
// type Inside = ...
0
票
0
回答
28
閲覧数
KeyOfを使ったInterfaceの複数の実装
export interface Alarm {
shopNumber?: number;
shopName?: string;
daiNo?: number;
errorCode?: number;
errorContents?: string;
occurrenceDateTime?: string;
};
export interface ...
0
票
1
回答
103
閲覧数
TypeScript で連想配列の中身の型を引っ張り出して使いたい
連想配列の内部の階層の型を引っ張ってくる方法を教えていただきたいです。
type Outside = {
key: {
a: number;
b: string;
}
}
// Outside型のkeyからInside型を作りたい (Outside型は変更してはいけない)
// type Inside = typeof Outside.key // 'Outside' ...
0
票
0
回答
25
閲覧数
Vue-Routerで切り替えた画面の中にあるVue-Routerでの切替
Vue3にてVue-Routerを使用した画面遷移の実装を考えています。
具体的な.vueファイルや画面構成は以下の通りです。
App.vue: ルートvueファイル
Login.vue: ID/PWの入力欄、ログイン画面
Main.vue: ヘッダーとフッターのある画面
Service.vue: ユーザーが契約しているサービスを選択する画面
Menu.vue: ...
0
票
1
回答
63
閲覧数
TypeScriptの配列の詰替えがしたいです
Angularにて画面を作っています。ある画面のコンポーネントにて、
class Sub {
constructor(
aaa: string,
bbb: string,
ccc: string
) {}
}
上記のクラスをimportし、この型でAPIからレスポンスが帰ってくるのでそれをTableの行選択で利用できるように
...
1
票
1
回答
106
閲覧数
rails, react-playerとhls.jsを用いてHLS再生の実装をしたい
バックエンドにrailsを使用しており、フロントでreact/typescriptを用いている中で、react-playerとhls.jsを用いたストリーミング再生機能の実装をしたいと考えています。
現状はvideoタグを用いて、Amazon S3においたmp4をcloudfront経由で取得して再生しています。
react-playerはhls.jsとも互換性がありそうですが、...
0
票
1
回答
87
閲覧数
ElectronのTypescript+Webpackテンプレートが実行できない
Electron Forgeのページに従い、Electronのテンプレートを以下のコマンドを実行してインストールしました。
npx create-electron-app my-new-app --template=typescript-webpack
次に
npm run start
を実行すると、コマンドウィンドウに以下のようなエラーメッセージが表示されました。
$ npm run ...
0
票
0
回答
51
閲覧数
Vueで円スライドバーで範囲指定をする際に最小~最大の範囲指定をしたい
添付の画像のように通常は最小値~最大値で範囲指定をすると思います。
それに加えて、最大値~最小値で範囲してできる方法を教えてください。
例えば340~20のような範囲を指定したいです。このとき実際の値は360を境界値として、340~360、0~20となる想定です。
以下のライブラリを使用して実装しようとしましたが、ダメでした。
https://github.com/soundar24/vue-...
1
票
1
回答
62
閲覧数
useEffectの挙動について
useEffectの挙動について質問させていただきます。
console.logで出力する値が遅れて出力されるのはなぜか というのが主旨になります。
import { useEffect, useState } from "react";
type inputSetting = {
player : number;
wolves : number;
...
2
票
1
回答
1,133
閲覧数
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
回答
58
閲覧数
tfjs-modelsのpose-detectionでポーズ解析を行っているが、「TypeError: t is not a function」というエラーが出力
現在、tfjs-models/pose-detectionのライブラリを用いて、ポーズ解析のモジュールを追加実装しているところです。下記コードで処理を行っていますが、下記エラーが出力して処理ができない状況です。原因が分からず困っています...
実装コード(一部)
import '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-converter';
...
1
票
2
回答
157
閲覧数
TypeScriptでオプション引数を指定しつつ、Function#lengthに正規の値を入れる方法
JavaScript(ECMAScript)において、Function.prototype.length は必須パラメータの数を返します。
Function.length - JavaScript | MDN
ECMAScriptでオプション引数を指定するには、arguments もしくは「rest parameter」を使用する方法があります。
arguments は class ...
1
票
1
回答
108
閲覧数
ユニオン型クラスでプロパティ名を取得する型について
まず、クラスを利用したコンポーネントを2つ用意します。
class AdminInfoComponent {
public userCount: number = 0;
}
class UserComponent {
public id: string = "";
public createdAt: number = 0;
}
次に、クラスのプロパティ(...
0
票
2
回答
351
閲覧数
TypeScriptで抽象クラスを利用したい
発生している問題
TypeScriptで抽象クラスが利用できません。
変数 'person' は割り当てられる前に使用されています。と表示されます。
試した事2の方法で実行できる状態になりましたが、もっと良い方法を探しています。
再現手順
初期化する
npm init -y
npm install typescript ts-node
package.jsonにstartを追加する
&...
0
票
0
回答
49
閲覧数
Webカメラの顔フレームをブラウザの画面サイズに関係なく表示するには
ReactでWebアプリを作成中の者です。
画面上に表示されたWebカメラに顔のフレームを追加しようとしています。ですので以下のような顔の部分だけ透明化させた画像を使ってそれを実装しようと試みました。
このフレームの画像は16:9の比率で作っていますのでlocalhostを走らせているブラウザがフルスクリーンの時は問題ありません。ちなみにcssでopacity: 0....
1
票
0
回答
122
閲覧数
Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない
前提
バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。
発生している問題・エラーメッセージ
$ docker-compose exec ...
0
票
1
回答
235
閲覧数
戻り値を設定したが、認識されずエラーがでてしまう。
以下のコードがコンパイル時に「宣言された型が 'void' でも 'any' でもない関数は値を返す必要があります。」と怒られてしまいました。
なぜこのコードではだめなのでしょうか?
初歩的な質問で申し訳ありませんが、よろしくお願いします。
function getTabId(): number {
const tab = chrome.tabs.query({ active: true, ...
0
票
1
回答
53
閲覧数
node_moduleライブラリのjsファイルでimport,export等が使用されている場合にbrowserifyする方法
browserify APIを利用してTypeScriptで書かれたコードをJavaScriptに変換し、それらのコードを一つにまとめる処理を書いています。
以下が問題が発生するコードです。
(async () => {
let code = await (() => {
const browserifyObject = browserify();
...
0
票
0
回答
93
閲覧数
react-bootstrapのCard.imgでローカルに保存された画像を使うにはどうしたらいいでしょう?
ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function BasicExample() {
return (
<Card style={{ width: '...
0
票
1
回答
64
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
1
票
3
回答
215
閲覧数
valueの型を指定したオブジェクトからkeyof typeofでkeyのユニオン型を作る
valueの型を指定したオブジェクトがあります。
export type SingleTextEditorParamList = {
title: string;
value: string | undefined;
onSubmit: (text: string) => Promise<void>;
note?: React.ReactNode;
};
...
0
票
1
回答
80
閲覧数
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
回答
53
閲覧数
TypeScriptでaccessTokenの型エラーが出る
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://manga-kousatu-net.vercel.app/
実現したいこと
現在Next.jsでポートフォリオで作成していおり、
TypeScriptで型付けをしたいと考えています。
発生している問題・エラーメッセージ
現在Firebase ...
0
票
1
回答
77
閲覧数
関数の戻り値に対する型付けについて
TypeScript初心者です。
とあるプロジェクトの、他の方が作成したコードを見ながら型定義について勉強をしているのですが、関数の戻り値に対して以下の画像のように「Function」という型付けをしている箇所がありました(状況説明のため簡略化したコードになります)
戻り値の型として指定した「Function」というのはいったん何を意味しているのでしょうか?
プロジェクト内に、「...
0
票
0
回答
47
閲覧数
angularで画面遷移時にロードする方法
angularの勉強をしています。
router-outletを使用してブラウザで最初にアクセスした際にソースを一気に読み込むことで、追加の読み込みなしでサクサク画面遷移ができることがわかりました。
ただ、少し大きめのシステムで、各コンポーネントの処理が大きい場合に初回のロードが重くなるのではと思っています。
このような場合に、...
2
票
1
回答
129
閲覧数
Promise の配列に対して、それを早い順で resolve する async generator に変換したい
今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。
// 例
const ...
0
票
0
回答
23
閲覧数
@ngrx/sroreのselectメソッドの動きとReducer関数について
現在NgRxの公式チュートリアルを見ていますが、
https://ngrx.io/guide/store
@ngrx/sroreのselectメソッドの動きとReducer関数の引数(Actionの)について動きがわからないので教えて頂きたいです。
src\app\my-counter\my-counter.component.ts
import { Component } from '@...
1
票
1
回答
279
閲覧数
typescriptでform要素を取得したい
実現したいこと
valueの取得
発生している問題・エラーメッセージ
プロパティ 'value' は型 'Element' に存在しません。
該当のソースコード
document.querySelector("#id").value
試したこと
補足情報(FW/ツールのバージョンなど)
typescript:4.7.4
tsc:4.6.4
esnext
1
票
1
回答
155
閲覧数
HTML要素の textContent に `?.` 演算子で代入できない
実現したいこと
TypeScriptで、HTML要素を取得して操作したい
発生している問題・エラーメッセージ
代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
該当のソースコード
const pref = document.getElementById("prefectures");
pref?.textContent = "hello world&...
1
票
1
回答
56
閲覧数
定義された型の変数を読み取り専用にしたい
例えば,以下のような Options という型を定義します。
interface Options {
"encoding": string,
"initValue"?: any
}
変数 options を用意するとき変数中身の編集については型の入力補完を継承しつつ,最終的には読み取り専用として変数を宣言したいです。
...
2
票
2
回答
318
閲覧数
@types/reactとreactのversionが違うと問題でしょうか
create react appで作られたversion 16のreact applicationにtypescriptを追加しています。
@types/reactと@types/react-domのversionについて、最新のv.18をインストールしたのですが、本体とversionが異なることが問題となるか教えていただきたいです。
0
票
0
回答
55
閲覧数
GrafanaのsecureJsonData取得方法
私はGrafanaのアプリケーションプラグインを開発しています。
私の理解では、secureJsonDataから資格情報を取得しようとするときは、データソースプロキシを使用する必要があります。
だから私の質問は:
1)データソースプロキシを使用するには、データソースプラグインを含める必要がありますか?
2)ドキュメントによると、plugin....
2
票
1
回答
95
閲覧数
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。
学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。
// --snip--
export abstract class Piece {
position: ...
1
票
1
回答
95
閲覧数
TypeScirpt の for...of 文で [Symbol.iterator]() が必要と言われる
概要
forof文を書こうと思ったら、[Symbol.iterator]() が必要だと怒られた。
const test = [
{ code: 0, name: "北海道" },
{ code: 1, name: "東京都" },
{ code: 2, name: "大阪府" },
];
function ...
1
票
0
回答
78
閲覧数
cordova.plugins.barcodeScanner.scan()は非同期処理でしょうか?
cordova cli ver.10.0.0, Angular2で開発しています。
cordova.plugins.barcodeScanner.scan 処理を以下のソースを実装して実行してみると、以下の順番でメッセージが表示されています。
・readCodeCtrl start
・Scan Result :
・scan success!
CodeScannerCtrl ...
1
票
1
回答
107
閲覧数
変数の内容によって特定の変数の型を決定する方法
TypeScriptにおいて,ある文字列変数の内容によって特定の変数の型(testとします)を自動的に設定されるようにしたいです。
具体的な例を挙げると,
const type = "basic_string<char, char_traits<char>, allocator<char> >";
のとき,変数 test の型は ...
2
票
0
回答
133
閲覧数
関数の戻り値を受けた変数が型推論されない
以下のコードで、関数の戻り値が Promise<Foo> なので await した foo の型は Foo になると思ったのですが any になってエラーが出ます。なぜですか。
コード
type Foo = {
bar: string | undefined;
};
const getFooPromise = async (prevBar?: string | undefined)...
0
票
0
回答
87
閲覧数
AWS amplifyでログインページを展開する
以下のサイトを参考にAWS amplifyでログインページを実装したところ、ビルドに失敗しました。
React-router Auth Example
typescriptとreactで作成しています。
以下はAWS Amplifyでデプロイを試みたコードです。
typescript
import React from "react";
import ReactDOM from ...
0
票
0
回答
400
閲覧数
Typescript による ラジオボタンの値を取得したいです
Typescript による ラジオボタンの値を取得したいです
typescript
const [condition, setCon] = useState("");
const loading = (execute: () => void, infinit?: boolean): (() => void) => {
return ...
0
票
0
回答
97
閲覧数
axiosによる非同期処理
フロントはReact+Typescriptでaxiosを用いて非同期処理で、AWSのAPI GatewayからLambdaの処理を呼び出したいです。
実装したコード
axiosで実現させたいのは以下のコードと同じ処理です。
typescript
const req = new XMLHttpRequest();
req.open('GET', "APIGatewayのURL", ...
0
票
1
回答
112
閲覧数
AngularでjsonデータをforEachを使って値を取得
Angular(バージョン7)
以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。
component.tsでhoge
items: {
"price": 200,
"count": 5
},
{
"...
1
票
2
回答
201
閲覧数
TypeScriptで引数のかっこが3つある関数
引数の括弧が3つある下記のような関数を見かけたのですが、これはどのような時に使用されるのでしょうか。
なぜ通常の const hoge =(h1, h2) => {} という書き方との違いはなんでしょうか。
何も出力されないです。
const hoge = (h1) => (h2) => () => {
console.log(h1);
console....
0
票
0
回答
134
閲覧数
initializeAppを使用すると、Firebase Functionsでデプロイに失敗してしまう
今後Firebaseの機能を使用する必要があるため、
initializeAppを使いつつデプロイを成功させたいです。
initializeAppのある/なしでデプロイに成功/失敗します。
(initializeAppをコメントアウトすると成功します。)
firebase emulators:startによるローカルでの実行は成功しています。
...
0
票
0
回答
63
閲覧数
TypeScriptでPythonの辞書に相当するものを作りたい
TypeScriptでPythonの辞書に相当するものを作りたいのですが、保存するとVSCode側で勝手にkeyがstring以外に変換されてしまいます。
keyにstringを指定するにはどうすればよいですか?
0
票
1
回答
61
閲覧数
Vue Routerでネストされた型をPickしたい
vue-routerのRoute型からmatchedのmetaのみを取り出したいです。
具体的には次のようにmatchedまでは取り出せましたが、metaのみを取り出す書き方がわからずエラーが出てしまっています。
解消方法を教えていただけると助かります。
const to: Pick<Route, 'fullPath' | 'path' | 'matched'> = {
...
4
票
1
回答
188
閲覧数
typescriptで指定した文字列のどれかを返す関数を定義したい
typescriptで書いています。あるアプリケーションでサポートする言語(locale)が限定されていて、システムがそれ以外のlocaleを返したらデフォルトのlocaleにフォールバックするための関数を書きたいです。
/* currentLocaleがSupportedLocaleだったら */はどう書けばいいのでしょうか?
type SupportedLocale = 'ja' | 'en';...
2
票
1
回答
253
閲覧数
ルックアップ型と可変長引数の組み合わせで型推論がうまく行かない
困りごとから先に書くと、下記コードの return fn(...args); の部分でエラーが発生し、それがどうやっても取れません。原因は何でしょうか?
const table = {
add: (a: number, b: number) => a + b,
square: (a: number) => a * a,
} as const;
type Table = ...