[typescript] タグが付いた質問
TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。
183
質問
0
票
0
回答
13
閲覧数
react-bootstrapのCard.imgでローカルに保存された画像を使うにはどうしたらいいでしょう?
ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function BasicExample() {
return (
<Card style={{ width: '...
0
票
0
回答
16
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
0
票
2
回答
69
閲覧数
valueの型を指定したオブジェクトからkeyof typeofでkeyのユニオン型を作る
valueの型を指定したオブジェクトがあります。
export type SingleTextEditorParamList = {
title: string;
value: string | undefined;
onSubmit: (text: string) => Promise<void>;
note?: React.ReactNode;
};
...
0
票
1
回答
20
閲覧数
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
回答
31
閲覧数
TypeScriptでaccessTokenの型エラーが出る
現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://manga-kousatu-net.vercel.app/
実現したいこと
現在Next.jsでポートフォリオで作成していおり、
TypeScriptで型付けをしたいと考えています。
発生している問題・エラーメッセージ
現在Firebase ...
0
票
1
回答
60
閲覧数
関数の戻り値に対する型付けについて
TypeScript初心者です。
とあるプロジェクトの、他の方が作成したコードを見ながら型定義について勉強をしているのですが、関数の戻り値に対して以下の画像のように「Function」という型付けをしている箇所がありました(状況説明のため簡略化したコードになります)
戻り値の型として指定した「Function」というのはいったん何を意味しているのでしょうか?
プロジェクト内に、「...
0
票
0
回答
22
閲覧数
angularで画面遷移時にロードする方法
angularの勉強をしています。
router-outletを使用してブラウザで最初にアクセスした際にソースを一気に読み込むことで、追加の読み込みなしでサクサク画面遷移ができることがわかりました。
ただ、少し大きめのシステムで、各コンポーネントの処理が大きい場合に初回のロードが重くなるのではと思っています。
このような場合に、...
2
票
1
回答
71
閲覧数
Promise の配列に対して、それを早い順で resolve する async generator に変換したい
今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。
// 例
const ...
0
票
0
回答
18
閲覧数
@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
回答
64
閲覧数
typescriptでform要素を取得したい
実現したいこと
valueの取得
発生している問題・エラーメッセージ
プロパティ 'value' は型 'Element' に存在しません。
該当のソースコード
document.querySelector("#id").value
試したこと
補足情報(FW/ツールのバージョンなど)
typescript:4.7.4
tsc:4.6.4
esnext
1
票
1
回答
82
閲覧数
HTML要素の textContent に `?.` 演算子で代入できない
実現したいこと
TypeScriptで、HTML要素を取得して操作したい
発生している問題・エラーメッセージ
代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
該当のソースコード
const pref = document.getElementById("prefectures");
pref?.textContent = "hello world&...
1
票
1
回答
48
閲覧数
定義された型の変数を読み取り専用にしたい
例えば,以下のような Options という型を定義します。
interface Options {
"encoding": string,
"initValue"?: any
}
変数 options を用意するとき変数中身の編集については型の入力補完を継承しつつ,最終的には読み取り専用として変数を宣言したいです。
...
1
票
2
回答
55
閲覧数
@types/reactとreactのversionが違うと問題でしょうか
create react appで作られたversion 16のreact applicationにtypescriptを追加しています。
@types/reactと@types/react-domのversionについて、最新のv.18をインストールしたのですが、本体とversionが異なることが問題となるか教えていただきたいです。
0
票
0
回答
35
閲覧数
GrafanaのsecureJsonData取得方法
私はGrafanaのアプリケーションプラグインを開発しています。
私の理解では、secureJsonDataから資格情報を取得しようとするときは、データソースプロキシを使用する必要があります。
だから私の質問は:
1)データソースプロキシを使用するには、データソースプラグインを含める必要がありますか?
2)ドキュメントによると、plugin....
2
票
1
回答
87
閲覧数
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。
学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。
// --snip--
export abstract class Piece {
position: ...
1
票
1
回答
82
閲覧数
TypeScirpt の for...of 文で [Symbol.iterator]() が必要と言われる
概要
forof文を書こうと思ったら、[Symbol.iterator]() が必要だと怒られた。
const test = [
{ code: 0, name: "北海道" },
{ code: 1, name: "東京都" },
{ code: 2, name: "大阪府" },
];
function ...
1
票
0
回答
61
閲覧数
cordova.plugins.barcodeScanner.scan()は非同期処理でしょうか?
cordova cli ver.10.0.0, Angular2で開発しています。
cordova.plugins.barcodeScanner.scan 処理を以下のソースを実装して実行してみると、以下の順番でメッセージが表示されています。
・readCodeCtrl start
・Scan Result :
・scan success!
CodeScannerCtrl ...
1
票
1
回答
101
閲覧数
変数の内容によって特定の変数の型を決定する方法
TypeScriptにおいて,ある文字列変数の内容によって特定の変数の型(testとします)を自動的に設定されるようにしたいです。
具体的な例を挙げると,
const type = "basic_string<char, char_traits<char>, allocator<char> >";
のとき,変数 test の型は ...
2
票
0
回答
109
閲覧数
関数の戻り値を受けた変数が型推論されない
以下のコードで、関数の戻り値が Promise<Foo> なので await した foo の型は Foo になると思ったのですが any になってエラーが出ます。なぜですか。
コード
type Foo = {
bar: string | undefined;
};
const getFooPromise = async (prevBar?: string | undefined)...
0
票
0
回答
46
閲覧数
AWS amplifyでログインページを展開する
以下のサイトを参考にAWS amplifyでログインページを実装したところ、ビルドに失敗しました。
React-router Auth Example
typescriptとreactで作成しています。
以下はAWS Amplifyでデプロイを試みたコードです。
typescript
import React from "react";
import ReactDOM from ...
0
票
0
回答
144
閲覧数
Typescript による ラジオボタンの値を取得したいです
Typescript による ラジオボタンの値を取得したいです
typescript
const [condition, setCon] = useState("");
const loading = (execute: () => void, infinit?: boolean): (() => void) => {
return ...
0
票
0
回答
61
閲覧数
axiosによる非同期処理
フロントはReact+Typescriptでaxiosを用いて非同期処理で、AWSのAPI GatewayからLambdaの処理を呼び出したいです。
実装したコード
axiosで実現させたいのは以下のコードと同じ処理です。
typescript
const req = new XMLHttpRequest();
req.open('GET', "APIGatewayのURL", ...
0
票
0
回答
48
閲覧数
AngularでjsonデータをforEachを使って値を取得
Angular(バージョン7)
以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。
component.tsでhoge
items: {
"price": 200,
"count": 5
},
{
"...
1
票
2
回答
134
閲覧数
TypeScriptで引数のかっこが3つある関数
引数の括弧が3つある下記のような関数を見かけたのですが、これはどのような時に使用されるのでしょうか。
なぜ通常の const hoge =(h1, h2) => {} という書き方との違いはなんでしょうか。
何も出力されないです。
const hoge = (h1) => (h2) => () => {
console.log(h1);
console....
0
票
0
回答
76
閲覧数
initializeAppを使用すると、Firebase Functionsでデプロイに失敗してしまう
今後Firebaseの機能を使用する必要があるため、
initializeAppを使いつつデプロイを成功させたいです。
initializeAppのある/なしでデプロイに成功/失敗します。
(initializeAppをコメントアウトすると成功します。)
firebase emulators:startによるローカルでの実行は成功しています。
...
0
票
0
回答
48
閲覧数
TypeScriptでPythonの辞書に相当するものを作りたい
TypeScriptでPythonの辞書に相当するものを作りたいのですが、保存するとVSCode側で勝手にkeyがstring以外に変換されてしまいます。
keyにstringを指定するにはどうすればよいですか?
0
票
1
回答
44
閲覧数
Vue Routerでネストされた型をPickしたい
vue-routerのRoute型からmatchedのmetaのみを取り出したいです。
具体的には次のようにmatchedまでは取り出せましたが、metaのみを取り出す書き方がわからずエラーが出てしまっています。
解消方法を教えていただけると助かります。
const to: Pick<Route, 'fullPath' | 'path' | 'matched'> = {
...
4
票
1
回答
133
閲覧数
typescriptで指定した文字列のどれかを返す関数を定義したい
typescriptで書いています。あるアプリケーションでサポートする言語(locale)が限定されていて、システムがそれ以外のlocaleを返したらデフォルトのlocaleにフォールバックするための関数を書きたいです。
/* currentLocaleがSupportedLocaleだったら */はどう書けばいいのでしょうか?
type SupportedLocale = 'ja' | 'en';...
2
票
1
回答
135
閲覧数
ルックアップ型と可変長引数の組み合わせで型推論がうまく行かない
困りごとから先に書くと、下記コードの return fn(...args); の部分でエラーが発生し、それがどうやっても取れません。原因は何でしょうか?
const table = {
add: (a: number, b: number) => a + b,
square: (a: number) => a * a,
} as const;
type Table = ...
0
票
1
回答
137
閲覧数
Vue.js + Nuxt.js + TypeScript アプリケーションでlayoutで呼び出しているコンポーネントの変数をpagesから操作したい
表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。
やりたいことの要点としては、
・...
2
票
2
回答
239
閲覧数
オブジェクトの型付けの際にプロパティ名にワイルドカードのようなものを使用できるか
以下のような感じでプロパティ名にワイルドカードをつけて型付けをする方法はあるのでしょうか。
※以下のコードはエラーがでます
type Image = {
url*: string;
[key: string]: string;
}
const images: Image[] = [{
url123: ["path/to/a", "path/to/b&...
0
票
1
回答
92
閲覧数
stripeのpaymentIntent.statusに上手く型が当てられない。
stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか?
エラー内容
(parameter) paymentIntent: any
Argument of type '({ paymentIntent }: PaymentIntent) => void' is not assignable ...
0
票
1
回答
88
閲覧数
@stripe/react-stripe-jsで特定の文字列を渡しているが、ストリングリテラルでエラーになる
stripeのサンプルコードをTypeScript化しようとしているのですが、なぜかストリングリテラルが当たる場所でちゃんと文字列を渡しているのにエラーを起こします。
エラー内容 - options の箇所で出てきます。
Optional Elements configuration options. Once the stripe prop has been set, these options ...
0
票
1
回答
94
閲覧数
リテラル型の型宣言において、動的に値を生成する時のベストプラティクス
お世話になります。
TypeScriptでリテラル型を用いる時、値を動的生成する場合のベストプラティクスをお聞きしたいです。
type valueType = 'foo_1' | 'foo_2';
const prefix = ( value: string ): string => {
const prefix = 'foo';
return `${prefix}_${...
0
票
0
回答
142
閲覧数
Notion API のエディターで型補完にエラーが出てしまう
Notion APIを使用してブロックを取得する際に下記のエラーが発生し、正しくプロパティを取得できません。
型はanyとして扱われるため、エディタではエラーになりますが、ブラウザでは正しく取得できます。
どうすればエディタでのエラーをなくすことができますか?
この問題は、エディタやtypescriptの問題である可能性もあります。
ヒントをお願いします🙇️。
Property '...
0
票
0
回答
60
閲覧数
スクリプトモードでenvの型を定義することと、モジュールモードでenvの型を宣言することの違い
※前提が間違っていたらすいません
型定義において、以下の2つは同じ意味を持ち、別ファイル上でインポートなしで window.env.REACT_APP_HOGE を参照できるようになると理解しているのですが、
この2つの違いや、どちらのほうが良いというのはあったりするのでしょうか。
スクリプトモードでの型定義:
interface Window {
env: {
...
0
票
1
回答
160
閲覧数
オブジェクトに対してマップ処理する関数を型付けしたい
以下のような、オブジェクトにマップ処理する関数があります。
const objectMap = (obj, fun) => Object.fromEntries(Object.entries(obj).map(fun));
objectMap({a: 2, b: 4}, ([key, val]) => [key, val * 2]) // {a: 4, b: 8}
...
0
票
1
回答
248
閲覧数
React,TypeScriptでuseContextを使いたいがエラーを解決できない
現在、firebaseを使ったwebアプリを開発中です。React、TypeScriptを使っています。
ユーザーの認証情報を保持するためのcontextを書いていてエラーが発生しています。
自力で一からフロントエンドのアプリを作るのは初めてで、解決できずに困っています。
authcontext.ts
import { VFC, createContext, useContext, ...
2
票
2
回答
130
閲覧数
2つのnullableなプロパティが同時にnullにならない場合の型定義
TypeScriptの型定義に関する質問です。
ここに両者ともnullableなプロパティを持ったクラスがあったとします。
class Example {
foo: string | null;
bar: string | null;
}
このクラスでは、foo と bar が同時に null になることはなく、また逆に同時に string 型になることはあるとします。
...
2
票
0
回答
78
閲覧数
ジェネリクスのクラスを引数に取るとき、デフォルト引数を取る方法を教えてください。
ジェネリクスを 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
しかし、ジェネリクスのクラスを引数に取るとき、...
0
票
0
回答
62
閲覧数
TypeScriptのコンパイル時に依存モジュールの書き出し
Node.jsにおいてTypeScriptでソースを書き、ホームページ用のJavaScriptとしてtscでコンパイルしています。
npmでブラウザ上でも使用できるモジュールをインストールして、.tsの文頭でインポートしてソースを書いていましたが、.jsにコンパイルしてもインポートするモジュールの.jsは出力されてないので、HTML上で実行時に当然エラーになります。
やりたいこととしては、....
0
票
0
回答
81
閲覧数
throw new Error(`There are no '${subnetType}' subnet groups in this VPC. Available types: ${availableTypes}`);
CDKで既存VPCにサブネットを追加してApplicationLoadBalancedFargateServiceを利用するとタイトルのエラーが出ます。
新規VPCをSubnetとまとめて作成した場合は通りますが、今回は既存VPCを使いたいのでその方法は使えません。
新規サブネットにsubnetTypeを指定すれば通りそうなエラーですが探したところその方法がわかりませんでした。
...
0
票
0
回答
92
閲覧数
モジュール firebaase が解決できない
以下、Firebase Auth の検証のため、サンプルを引っ張ってきたのですが、firebase が見つからないと言われました。
念のため検証ソースを全部書いていますが、おそらく1行目以降は関係ないかなと思っています。
node_modules には firebase が入っているのですが、何か根本的なところで間違えているのでしょうか?
コンセントが抜けている程度の初歩な質問かと思いますが、...
2
票
0
回答
45
閲覧数
NestJS(TypeORM)でsyncronizeされてしまう
こんにちは。TypeORMを使用してNestJSで開発してます。
DB接続~開発まで問題なく繋がってはいるのですが。
この度、table(Entity)の即時反映を止め、Migrationで変更を管理しようとしています。本家ページを見るとsynchronize:trueに設定しているとEntityが変わったらBindingされDBにも即時適用されるとの事でこちらをfalseにしてみました。
ただ、...
1
票
2
回答
146
閲覧数
TypescriptのUnion型はC言語などと同じく共用体ですか?
先日TypeScriptのUnion型からC言語の共用体の動作が納得できたという会話がありました。
TypescriptのUnion型は
TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。
https://book.yyts.org/reference/values-types-variables/union
であり、
C言語のUnion型が
...
0
票
0
回答
53
閲覧数
OpenLiteSpeedのコンテキストのNodeでindex.tsを起動する方法
現在、OpenLiteSpeedのVirtual HostsのコンテキストのApp Server TypeでNodejsのアプリケーションサーバをたてようとしていたところ詰まってしまいました。
以下、試してみたことです。
npm run start は、起動しました。
npm run start
しかし、node index.tsをすると、
node index.ts
internal/...
0
票
1
回答
298
閲覧数
react-router-domのuseLocation()でprotocolとhostを取得する方法
react-router-domのuseLocation()でprotocolとhostを取得する方法はありますか?
useLocation()ではなく、window.location.protocol、window.location.hostとするしかないのでしょうか?
import { memo, VFC, useEffect } from "react";
import {...
1
票
1
回答
779
閲覧数
typescriptで循環import(WARNING in Circular dependency detected)を解決するには?
例えば下記のようなシンプルな循環参照があります。
DepartmentSearchDialogComponent.ts
import UserSearchDialogComponent from './user-search-dialog.component';
export class DepartmentSearchDialogComponent {
// ...
}
...
0
票
1
回答
1,008
閲覧数
MUIのDatePickerの言語を日本語にする方法は?
MUIのDatePickerの言語を日本語にする方法はありますでしょうか?
下記のようなコードを書いたところ、ブラウザにTypeError: Cannot read properties of undefined (reading 'date')というエラーが表示されました。
locale="ja"を削除するとDatePickerは表示されますが、英語表示となります。
/* ...
0
票
1
回答
76
閲覧数
デバッグ中のAngularを、コンソールから操作したい
例えばVueは、以下のようにして変数を書き換えて動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="./...