[typescript] タグが付いた質問
TypeScriptは、JavaScriptに上位互換性を保ちつつ静的型付けなどを加えた言語です。JavaScriptに変換されます。このタグは、TypeScriptに固有の質問用です。通常のJavaScriptの質問には使用されません。
218
質問
0
票
1
回答
93
閲覧数
node_moduleライブラリのjsファイルでimport,export等が使用されている場合にbrowserifyする方法
browserify APIを利用してTypeScriptで書かれたコードをJavaScriptに変換し、それらのコードを一つにまとめる処理を書いています。
以下が問題が発生するコードです。
(async () => {
let code = await (() => {
const browserifyObject = browserify();
...
0
票
1
回答
99
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
1
票
3
回答
346
閲覧数
valueの型を指定したオブジェクトからkeyof typeofでkeyのユニオン型を作る
valueの型を指定したオブジェクトがあります。
export type SingleTextEditorParamList = {
title: string;
value: string | undefined;
onSubmit: (text: string) => Promise<void>;
note?: React.ReactNode;
};
...
0
票
1
回答
274
閲覧数
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
票
1
回答
103
閲覧数
関数の戻り値に対する型付けについて
TypeScript初心者です。
とあるプロジェクトの、他の方が作成したコードを見ながら型定義について勉強をしているのですが、関数の戻り値に対して以下の画像のように「Function」という型付けをしている箇所がありました(状況説明のため簡略化したコードになります)
戻り値の型として指定した「Function」というのはいったん何を意味しているのでしょうか?
プロジェクト内に、「...
2
票
1
回答
169
閲覧数
Promise の配列に対して、それを早い順で resolve する async generator に変換したい
今、 Promise の配列があったとき、その resolve の早い順に await したいと思っています。 ES2021 に、 for await of の構文が導入されたので、 Promise の配列をその早い順に resolve してくれる async generator に変換するライブラリなどの関数があれば、やりたいことが実現できるな、と思っています。
// 例
const ...
1
票
1
回答
654
閲覧数
typescriptでform要素を取得したい
実現したいこと
valueの取得
発生している問題・エラーメッセージ
プロパティ 'value' は型 'Element' に存在しません。
該当のソースコード
document.querySelector("#id").value
試したこと
補足情報(FW/ツールのバージョンなど)
typescript:4.7.4
tsc:4.6.4
esnext
1
票
1
回答
263
閲覧数
HTML要素の textContent に `?.` 演算子で代入できない
実現したいこと
TypeScriptで、HTML要素を取得して操作したい
発生している問題・エラーメッセージ
代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
該当のソースコード
const pref = document.getElementById("prefectures");
pref?.textContent = "hello world&...
1
票
1
回答
58
閲覧数
定義された型の変数を読み取り専用にしたい
例えば,以下のような Options という型を定義します。
interface Options {
"encoding": string,
"initValue"?: any
}
変数 options を用意するとき変数中身の編集については型の入力補完を継承しつつ,最終的には読み取り専用として変数を宣言したいです。
...
2
票
2
回答
798
閲覧数
@types/reactとreactのversionが違うと問題でしょうか
create react appで作られたversion 16のreact applicationにtypescriptを追加しています。
@types/reactと@types/react-domのversionについて、最新のv.18をインストールしたのですが、本体とversionが異なることが問題となるか教えていただきたいです。
2
票
1
回答
97
閲覧数
Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。
学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。
// --snip--
export abstract class Piece {
position: ...
1
票
1
回答
153
閲覧数
TypeScirpt の for...of 文で [Symbol.iterator]() が必要と言われる
概要
forof文を書こうと思ったら、[Symbol.iterator]() が必要だと怒られた。
const test = [
{ code: 0, name: "北海道" },
{ code: 1, name: "東京都" },
{ code: 2, name: "大阪府" },
];
function ...
1
票
0
回答
98
閲覧数
cordova.plugins.barcodeScanner.scan()は非同期処理でしょうか?
cordova cli ver.10.0.0, Angular2で開発しています。
cordova.plugins.barcodeScanner.scan 処理を以下のソースを実装して実行してみると、以下の順番でメッセージが表示されています。
・readCodeCtrl start
・Scan Result :
・scan success!
CodeScannerCtrl ...
1
票
1
回答
121
閲覧数
変数の内容によって特定の変数の型を決定する方法
TypeScriptにおいて,ある文字列変数の内容によって特定の変数の型(testとします)を自動的に設定されるようにしたいです。
具体的な例を挙げると,
const type = "basic_string<char, char_traits<char>, allocator<char> >";
のとき,変数 test の型は ...
2
票
0
回答
204
閲覧数
関数の戻り値を受けた変数が型推論されない
以下のコードで、関数の戻り値が Promise<Foo> なので await した foo の型は Foo になると思ったのですが any になってエラーが出ます。なぜですか。
コード
type Foo = {
bar: string | undefined;
};
const getFooPromise = async (prevBar?: string | undefined)...
0
票
1
回答
300
閲覧数
AngularでjsonデータをforEachを使って値を取得
Angular(バージョン7)
以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。
component.tsでhoge
items: {
"price": 200,
"count": 5
},
{
"...
1
票
2
回答
266
閲覧数
TypeScriptで引数のかっこが3つある関数
引数の括弧が3つある下記のような関数を見かけたのですが、これはどのような時に使用されるのでしょうか。
なぜ通常の const hoge =(h1, h2) => {} という書き方との違いはなんでしょうか。
何も出力されないです。
const hoge = (h1) => (h2) => () => {
console.log(h1);
console....
0
票
1
回答
74
閲覧数
Vue Routerでネストされた型をPickしたい
vue-routerのRoute型からmatchedのmetaのみを取り出したいです。
具体的には次のようにmatchedまでは取り出せましたが、metaのみを取り出す書き方がわからずエラーが出てしまっています。
解消方法を教えていただけると助かります。
const to: Pick<Route, 'fullPath' | 'path' | 'matched'> = {
...
4
票
1
回答
224
閲覧数
typescriptで指定した文字列のどれかを返す関数を定義したい
typescriptで書いています。あるアプリケーションでサポートする言語(locale)が限定されていて、システムがそれ以外のlocaleを返したらデフォルトのlocaleにフォールバックするための関数を書きたいです。
/* currentLocaleがSupportedLocaleだったら */はどう書けばいいのでしょうか?
type SupportedLocale = 'ja' | 'en';...
2
票
1
回答
395
閲覧数
ルックアップ型と可変長引数の組み合わせで型推論がうまく行かない
困りごとから先に書くと、下記コードの return fn(...args); の部分でエラーが発生し、それがどうやっても取れません。原因は何でしょうか?
const table = {
add: (a: number, b: number) => a + b,
square: (a: number) => a * a,
} as const;
type Table = ...
0
票
1
回答
323
閲覧数
Vue.js + Nuxt.js + TypeScript アプリケーションでlayoutで呼び出しているコンポーネントの変数をpagesから操作したい
表題の通り、[Vue.js + Nuxt.js + TypeScript]でWEBアプリケーションを作成しているのですが、Layoutsから呼び出しているComponentに対し、Layoutsを適用しているPagesからComponentの変数に対して操作を行たのですが、完全に詰まってしまったため質問させてください。
やりたいことの要点としては、
・...
2
票
2
回答
595
閲覧数
オブジェクトの型付けの際にプロパティ名にワイルドカードのようなものを使用できるか
以下のような感じでプロパティ名にワイルドカードをつけて型付けをする方法はあるのでしょうか。
※以下のコードはエラーがでます
type Image = {
url*: string;
[key: string]: string;
}
const images: Image[] = [{
url123: ["path/to/a", "path/to/b&...
0
票
1
回答
142
閲覧数
stripeのpaymentIntent.statusに上手く型が当てられない。
stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか?
エラー内容
(parameter) paymentIntent: any
Argument of type '({ paymentIntent }: PaymentIntent) => void' is not assignable ...
0
票
1
回答
173
閲覧数
@stripe/react-stripe-jsで特定の文字列を渡しているが、ストリングリテラルでエラーになる
stripeのサンプルコードをTypeScript化しようとしているのですが、なぜかストリングリテラルが当たる場所でちゃんと文字列を渡しているのにエラーを起こします。
エラー内容 - options の箇所で出てきます。
Optional Elements configuration options. Once the stripe prop has been set, these options ...
0
票
1
回答
209
閲覧数
リテラル型の型宣言において、動的に値を生成する時のベストプラティクス
お世話になります。
TypeScriptでリテラル型を用いる時、値を動的生成する場合のベストプラティクスをお聞きしたいです。
type valueType = 'foo_1' | 'foo_2';
const prefix = ( value: string ): string => {
const prefix = 'foo';
return `${prefix}_${...
0
票
1
回答
341
閲覧数
オブジェクトに対してマップ処理する関数を型付けしたい
以下のような、オブジェクトにマップ処理する関数があります。
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
回答
573
閲覧数
React,TypeScriptでuseContextを使いたいがエラーを解決できない
現在、firebaseを使ったwebアプリを開発中です。React、TypeScriptを使っています。
ユーザーの認証情報を保持するためのcontextを書いていてエラーが発生しています。
自力で一からフロントエンドのアプリを作るのは初めてで、解決できずに困っています。
authcontext.ts
import { VFC, createContext, useContext, ...
2
票
2
回答
181
閲覧数
2つのnullableなプロパティが同時にnullにならない場合の型定義
TypeScriptの型定義に関する質問です。
ここに両者ともnullableなプロパティを持ったクラスがあったとします。
class Example {
foo: string | null;
bar: string | null;
}
このクラスでは、foo と bar が同時に null になることはなく、また逆に同時に string 型になることはあるとします。
...
2
票
0
回答
98
閲覧数
ジェネリクスのクラスを引数に取るとき、デフォルト引数を取る方法を教えてください。
ジェネリクスを 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
しかし、ジェネリクスのクラスを引数に取るとき、...
2
票
0
回答
72
閲覧数
NestJS(TypeORM)でsyncronizeされてしまう
こんにちは。TypeORMを使用してNestJSで開発してます。
DB接続~開発まで問題なく繋がってはいるのですが。
この度、table(Entity)の即時反映を止め、Migrationで変更を管理しようとしています。本家ページを見るとsynchronize:trueに設定しているとEntityが変わったらBindingされDBにも即時適用されるとの事でこちらをfalseにしてみました。
ただ、...
1
票
2
回答
181
閲覧数
TypescriptのUnion型はC言語などと同じく共用体ですか?
先日TypeScriptのUnion型からC言語の共用体の動作が納得できたという会話がありました。
TypescriptのUnion型は
TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。
https://book.yyts.org/reference/values-types-variables/union
であり、
C言語のUnion型が
...
0
票
1
回答
529
閲覧数
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 {...
2
票
1
回答
2,237
閲覧数
typescriptで循環import(WARNING in Circular dependency detected)を解決するには?
例えば下記のようなシンプルな循環参照があります。
DepartmentSearchDialogComponent.ts
import UserSearchDialogComponent from './user-search-dialog.component';
export class DepartmentSearchDialogComponent {
// ...
}
...
0
票
1
回答
1,552
閲覧数
MUIのDatePickerの言語を日本語にする方法は?
MUIのDatePickerの言語を日本語にする方法はありますでしょうか?
下記のようなコードを書いたところ、ブラウザにTypeError: Cannot read properties of undefined (reading 'date')というエラーが表示されました。
locale="ja"を削除するとDatePickerは表示されますが、英語表示となります。
/* ...
0
票
1
回答
113
閲覧数
デバッグ中のAngularを、コンソールから操作したい
例えばVueは、以下のようにして変数を書き換えて動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="./...
0
票
1
回答
442
閲覧数
React TypeScriptにおいて、複数のコンポーネントをまとめる方法は?
使用する際に、ComponentAll.Component1のように強制するにはどのような宣言方法を行えばよいのでしょうか?
component1.tsx
const Component1 = () => (
<input type="email">
)
export default Component1;
component2.tsx
const ...
1
票
0
回答
130
閲覧数
tscがtsconfig.jsonを使用してくれない。 [重複]
TypeScriptでSymbolを使ったコードを書いたのですがtscがtsconfig.jsonに基づいてコンパイルしてくれないためにエラーが発生してしまいます。
以下がTypeScriptのコードです。
main.ts
let symbol = Symbol();
ここで、tsc main.tsコマンドをコマンドラインに入力すると、
error TS2585: 'Symbol' only ...
0
票
1
回答
117
閲覧数
Angularチュートリアル(tour of heroes)において、クエリ文字列の用途と働きがわからない。
名前検索をするに当たり、このクエリ文字列は、どういう機能が働いているのでしょうか。
this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`)
以下の画像中の、ここのクエリ文字列の意味が分からないです。
0
票
1
回答
319
閲覧数
stripe.jsのサンプルコードをTypeScript化したいが、型の当て方が分からない。
react-stripe-js 自体はTypeScriptに対応しているというのをドキュメントで見たのですが、どのようにインストールした型を当てていけば良いか分からないです。 CardElementComponent とimportとして使用するみたいな記事をみて const handleChange = async (event: CardElementComponent) => { ...
1
票
1
回答
331
閲覧数
Angular12でng2-chartsのチャート再更新が行われない
前提・実現したいこと
Angular12を用いたWebアプリケーションを作ろうとしています。
外部APIをたたいて得られたデータをng2-chartsによりチャートにします。
再びAPIをたたたとき、先ほどのチャートを新しく得られたデータによって再描画したいと考えています。
発生している問題
はじめてAPIをたたいた結果によるチャートの描画を行うことはできています。
...
2
票
1
回答
204
閲覧数
aws-sdk-js で定義されている型が正しいか分からない
AWSのS3クライアントモジュールにて、下記関数があるのですが、この書き方だとerrが確実にcallbackに入ってくるので、err?: Errorとなっているべきではないか、
と考えてしまいます。
upload(params: S3.Types.PutObjectRequest,
options?: ManagedUpload.ManagedUploadOptions,
...
1
票
1
回答
3,470
閲覧数
TypeScriptでtsconfigが読み込まれない。
下記の記事を参考に tsconfug.json のコメントアウトを外したのですが、エラーが取れないです。
error TS1192: Module '"fs"' has no default export. エラーを取ろうとしてtsconfig.jsonの設定をしていたのですが、設定してもエラーが取れないので、読み込まれていない事に気付きました。
...
1
票
0
回答
875
閲覧数
javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象
Reactを用いて以下のようなコンポーネントを作成しました。
文字が入力された際、それが数字であるなら半角化して反映します。
全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。
const InptArea:FC=()=>...
0
票
1
回答
93
閲覧数
Angular-Scullyのプラグインでコンフィグオブジェクトを反映させる方法について
AngularとScullyモジュールを使って静的サイトとしてブログを立ち上げようとしています。
アーカイブページの自動生成をプラグインとして実装しましたが、setConfig関数の使い方が悪いのか、うまくいきません。
プラグインにプラグイン自体のスクリプト以外からコンフィグを設定する方法について
何か見当違いな部分があるのだと思いますが全く解決に至っていません。
確認すべきこと、...
0
票
0
回答
258
閲覧数
Next.jsに追加したgoogle analyticsの gtag.jsをTypeScriptにして型を導入したい。
下記のブログを参考にNext.jsで作成したブログにgoogle analyticsを導入したのですが、gtag.jsをTypeScriptに変換する所で躓いています。
Next.jsでGoogle Analyticsを使えるようにする
google analyticsの型を @types/google.analytics npm install --save @types/google....
0
票
1
回答
239
閲覧数
Next.jsのブログkatexで書かれた数式を表示したい。
mdファイルを取り扱うのに remark を使用しているので remark-math というものをドキュメントに沿ってインストールしたんですが、今で import でモジュールを取り込んできたのに require で読み込んでいてNext.jsではこのようなモジュールの取り込み方は出来るのでしょうか? 一応ドキュメント通り require で試してみたのですが、エラーが出ます。
...
0
票
0
回答
636
閲覧数
Jestでモジュールの一部をモックする
Jestを使ったテストの実装で困っています。
a.ts
export const f1 = () => 'f1';
export const f2 = () => f1();
a.spec.ts
import * as a from './a'
it('f1をstubしたい', () => {
const f1Spy = jest.spyOn(a, 'f1')....
0
票
1
回答
1,568
閲覧数
TypeScript components内でmap()を使用するとエラーが出る。
<span>タグに topic を代入して出力するコンポーネントを作成したいのですが、 (property) topicList: string[] ',' expected.ts(1005) と出て .map が使えないみたいな表示がされます。なぜこのようになるのか分からないです。コードを見て頂けないでしょうか?
//topicListには["javascript"...
0
票
2
回答
972
閲覧数
AngularのNgForOfのNgとは何の略でしょうか?
AngularのNgForOfのNgとは何の略でしょうか?
NgForOf
0
票
1
回答
217
閲覧数
TypeScriptでアクセストークンを外部ファイル(token.ts)に記述してimportして読み込めるようにしたい。
Next.jsでブログを作成しているものです。Githubのパーソナルアクセストークンをコードにそのまま記述するとGithubにコードをあげる際に困るので、載せたくないアクセストークンを外部ファイルに記述してそれを .gitignoreで無視しようと思うのですが上手く行きません。
やった事
next.jsのルートフォルダにtoken.tsを作成してconst accessToken = &...