継承先クラスでは実装されているかも知れないメソッドを基底クラス内で扱いたい

投稿者: Anonymous 昔JavaScriptで書いた変なコードをTypeScriptに置き換えようとしています。ですが Property ‘g’ does not exist on type ‘BaseClass’. というエラーを回避できません。 オリジナルのコードのロジックを改変せずに、型定義や修飾子の追加で移行する方法を知りたいです。 class BaseClass { h() { /* … */ } f() { if (this.g) { this.g(); this.h(); } } } class ExampleClassA extends BaseClass { /* 継承してgメソッドを実装する場合 */ g() { /* … */ } } class ExampleClassB extends BaseClass { /* 継承してもgメソッドを実装しない場合 */…(Continue Reading)

umd形式でのみ提供されているブラウザ用ライブラリのReactによる動的読み込みとその完了検知の方法

投稿者: Anonymous React.js を用いて Web サイトを開発しています。 モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。 たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の HTML の場合は以下のようにして利用できます: <!– 外部スクリプトのロード –> <script src=”https://js.pay.jp/v2/pay.js”></script> <!– ロードしたスクリプトを用いて各種処理を実行 –> <script> // スクリプトによってグローバル空間に定義された `Payjp` を用いる const payjp = Payjp(‘API キー’) payjp.foo() // 何らかの処理 </script> こういった外部スクリプトを React.js で扱う場合、以下のような問題点があると考えます: <script> を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある グローバル空間にロードが完了したタイミングを動的に検知する必要がある 1 については、コンポーネントではなくテンプレート HTML 側に <script> を記述したり、Next.js のようなテンプレートがないフレームワークでは Layout コンポーネントの中で <script> を記述することで、何とかなると思っています。…(Continue Reading)

TypeScriptのgenericsを使ったReactコードのコンパイルが通らなくて困っています

投稿者: Anonymous 再現コードは最小限にシンプルにしたので、意味自体はありません。 interface TextProps { data: { text: string }; } interface ObjProps { data: object; } const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</p>; const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>; const make = <T extends { data: {} }>(Elem: React.FC<T>, data: T[‘data’]) => <Elem data={data} />; export const res1…(Continue Reading)

TypeScriptによる2次元配列の型定義

投稿者: Anonymous 概要 現在、TypeScriptを用いた開発を行っていますが、2次元配列の型定義で詰まってしまいました。 具体的には、下記の様な配列をTypeScriptで型定義するのに詰まっています。 const clapped_items[ 2: [ { “user_id”: 0, “clapped_num”: 15 }, { “user_id”: 1, “clapped_num”: 3 }, ], 5: [ { “user_id”: 3, “clapped_num”: 15 }, { “user_id”: 2, “clapped_num”: 3 }, { “user_id”: 4, “clapped_num”: 11 }, ] ]; 自分では下記の様に型定義しましたが、この方法ではエラーが出てダメです。 interface IClappedItem { user_id: number; clapped_num: number; } interface IClappedItems…(Continue Reading)

¿Como puedo agregar un archivo de javascript en un proyecto de angular 6?

publicado por: Anonymous Mi problema es como agregar un archivo de JavaScript para usarlo dentro de mi proyecto, ya intente agregarlo a la carpeta assets y no funcionna, me aparece lo siguiente: Uncaught ReferenceError: editar is not defined at HTMLButtonElement.onclick ((index):13) Mi código es: <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <script src=”../assets/jquery-1.7.2.min.js” type=”text/javascript”></script> <script…(Continue Reading)

Convertir un observable a un array local

publicado por: Anonymous Guardar el valor del array observable en un array local y poder usarlo para añadir más usuarios, ya que, el servidor remoto http://jsonplaceholder.typicode.com/users no permite editar los datos, es de prueba. user.component.ts users: User[]; getUsers() { return this.userService.getUsers().subscribe(users => this.users = users); } user.service.ts getUsers(): Observable<User[]> { return this.http.get<User[]>(‘http://jsonplaceholder.typicode.com/users’); } No sé…(Continue Reading)

TypeScriptでのUNIX時間取得

投稿者: Anonymous TypeScriptでUNIX時間を取得したく、以下のようにすると、 var unixtime = new Date / 1000; 以下のようなコンパイルエラーになります。 error TS2113: The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’ or an enum type. どのように実装すれば回避できるでしょうか。 解決 JavaScriptの範囲ですが、 var unixtime = new Date().getTime() / 1000; です。 回答者: Anonymous

Recorrer Objeto, filtar por campo y hacer push javascript

publicado por: Anonymous Tengo el siguiente objeto por ejemplo: { “name”:”false”, “var_RadiacionGlobalInt”:true, “var_CO2InvVaisala”:true, “var_RadiacionExt”:false, “var_VVExt”:false } Necesitaría recorrer ese objeto y los elementos que estén a true añadirlos a un nuevo array con un push. Este es el codigo que tengo implementado: public guardar(){ this.checkboxsensores = []; for (let variable in this.checkbox) { if (variable…(Continue Reading)

¿Borrar un registro en angular 5 pasando el user_id?

publicado por: Anonymous quiero borrar un registro pasandole el user id utilizando httpclient mi api desde postman le paso el 1 como parametro y me borra el registro pero en angular nose este es mi codigo import { Component, OnInit } from ‘@angular/core’; import { Http } from ‘@angular/http’ import { HttpClient } from ‘@angular/common/http’;…(Continue Reading)

Sobrecarga de constructores en TypeScript

publicado por: Anonymous Estoy tratando de realizar una clase en TypeScript, de la siguiente forma : Puede recibir un Array<Array<string>> unicamente o puede recibir varios parámetros (ancho : number, blanco : string , trozo : string) La implementación me sugiere utilizar la sobrecarga de constructores, pero esto supone un problema ya que en TypeScript los…(Continue Reading)

IntelliJ IDEA の File Watcher で typescript を階層を維持してはき出したい

投稿者: Anonymous 動画を参考にしたり、 Youtube: TypeScript Project Structure using File Watchers 「File Watcher」 の設定画面より Arguments 部分を下記に設定したりしていろいろ試したのですが、空ファイルで出力されてしまったり、特定ファイル以外はうまくはきだせないなど。うまくいく設定が見つかりませんでした。 –out $ProjectFileDir$/public/js/$FileDirPathFromParent(typescript)$$FileNameWithoutExtension$.js $FileDirName$/$FileName$ –module amd –outDir $ProjectFileDir$/public/js/ –module amd 階層維持してはき出すことができる設定方法はあるでしょうか? ※ 追記内容 たとえば階層が下記の様になっていて、 require.js などを使って 1.ts のファイルを 2.ts に import などしている場合にうまく吐き出すことができませんでした。 その場合に動画のとおりにコンパイルすると、他の ts ファイルを認識していないためか、エラーが起きてしまいました。 そのため1階層上でコンパイルをしてすべての typescript を認識させた上で階層をたどってコンパイルするために、上記のような記述方法をしていました。 app └─ public ├─ js | ├─ dir1 | | └─ 1.js |…(Continue Reading)

配列内のツリー構造を別の配列と合わせたい

投稿者: Anonymous この質問はほぼマルチポストです。元の質問はこちらです。https://teratail.com/questions/140995 teratailの方での質問の仕方に問題を感じたのもあり、より簡略化した質問をこちらにさせて頂きました。 ご指摘頂いたので上記追記致します。 let objectList = [ { objectId : 1, objectName : “オブジェクト1”, isLeaf : false, children : [] }, { objectId : 2, objectName : “オブジェクト2”, isLeaf : true }, { objectId : 3, objectName : “オブジェクト3”, isLeaf : false, children : [] }, { objectId : 4, objectName : “オブジェクト4”,…(Continue Reading)

string enum で値からキーを取得したい

投稿者: Anonymous TypeScript 2.5.3 において、コンパイルオプション strict で以下のコードをトランスパイルすると、エラーが出ます。 enum Animal { Cat = ‘ねこ’, Dog = ‘いぬ’ } const key = Animal[‘ねこ’]; error TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’. enum の中身が数値のときは、上のエラーを出さずに値からキーの文字列を取り出すことができます。 –strict オプションを付けたまま、文字列値の enum に対してキーを逆引きすることは可能でしょうか? 解決 値からキーを逆引きできる機能は reverse mapping と呼ばれていますが、TypeScrip 2.5 現在、この機能はメンバーが number 型である enum で使うことが想定されています。特に、string 型のメンバに対しては実装されていません。実際…(Continue Reading)

typescript、もしくはjavascriptでHTMLをPDFに変換する方法

投稿者: Anonymous 要件 ・typescript、もしくはjavascriptで実現できること ・コンテンツの文字がコピペできること ・コンテンツ内の文字や、画像が滲んだりせず一定以上の画質であること ・ファイルサイズが大きくなりすぎないこと ・ライブラリを使用する場合は、商用利用可能であり、無償利用可能であること 試したこと ・jsPDF + html2canvas ⇒画質が悪く、コンテンツ部分を画像に変換しているため文字をコピペできず不採用 ・jsPDFのfromHTML ⇒日本語が文字化けするため不採用 ・pdfmake ⇒HTMLを変換できないという記載を見かけたため、あまり調査せず ・ヘッドレス Chrome ⇒ライセンス関係で確信が持てなかったため保留 解決 ヘッドレス ChromeとGoogle製のnodeライブラリ puppeteer を使うのが簡単で画質もいいと思います。 const puppeteer = require(‘puppeteer’); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(‘file://C:/a.html’); await page.pdf({path: ‘a.pdf’, format: ‘A4’}); await browser.close(); })(); また、Chromeの利用規約は、以下のようにようになっているため、Chrome自体を再配布することを除いて通常の商用利用に対する制限はないものと思われます。 ユーザーによる本サービスの利用…(Continue Reading)

¿Cómo Filtrar en Typescript?

publicado por: Anonymous Estoy pasando un programita que hice en windows forms con c# a Angular con ASP.NET, y estoy tratando de filtrar por nombre. En c# mi método para filtrar era algo así: expedientes.Where(x => x.FechaCreacion >= FechaDesde && x.FechaCreacion <= FechaHasta && x.NombreExpediente.Contains(nombreExpediente)).ToList(); El filtro por fecha aún no lo hago pero pensaría…(Continue Reading)

typeやinterfaceを使用せず、複数ある引数に型を付与したい。

投稿者: Anonymous typeやinterfaceを使用せず、複数ある引数に型を付与しする方法をご教示いただけないでしょうか。 下記は子コンポーネントにstateとsetStateを渡しているデモです。 demo デモでは子コンポーネントの引数の型はtypeで記述しています。 引数が複数の場合かつ少ない場合だとtypeやinterfaceで定義するのは冗長かと思い、typeやinterfaceを使用せずに型を付与したいです。 ソースコード import * as React from “react”; export default function App() { const [toggle, setToggle] = React.useState(false); return ( <> <h1>demo</h1> <p>{toggle ? “true” : “false”}</p> <hr /> <Child toggle={toggle} setToggle={setToggle} /> </> ); } type ChildProps = { toggle: boolean; setToggle: (value: boolean) => void; }; const…(Continue Reading)

Quiero utilizar jquery en angular 5 pero me sale el siguiente error¿Como soluciono esto?

publicado por: Anonymous Quiero utilizar jquery en un archivo typescript pero al momento de compilar me sale el error en la imagen adjunta!! abro la consola del navegador y no hay errores. Estoy usando visual studio code. Por favor ayudenme solución En tu archivo typescript tienes que declarar una variable antes de @component({… declare var…(Continue Reading)

¿Cómo acceder al valor de un SPAN en Typescript?

publicado por: Anonymous Tengo el siguiente etiquetado en html <label class=”checkbox”> <span class=”pull-right” style=”padding-bottom: 16px;”> <a data-toggle=”modal” href=”#”>Conexión IP <span id=”ipId”></span></a> </span> </label> pero quiero acceder al valor de el span con el id ipId desde typecript, pero no funciona: let unit : string = (<HTMLSpanElement>document.getElementById(“ipId”)).value; ¿Cuál sería la forma correcta? solución si entendí bien,…(Continue Reading)

¿Como puedo usar el algoritmo de encriptacion SHA512 en angular?

publicado por: Anonymous Quiero encriptar cierta información a la hora de enviarla a un web service, pero no encuentro ninguna respuesta clara a como usar la libreria SHA512 en angular. ¿Como la uso desde angular? solución Utiliza CryptoJS, te permite encriptar en muchas formas (incluida SHA512) de manera fácil. Lo instalas y usas de la…(Continue Reading)

Angular4でHTTP通信(this.http.get(url))で取得したresponseがundefinedになる

投稿者: Anonymous Angular4でHTTP通信(this.http.get(url))で取得したresponseがundefinedになってしまいます。 以下ソースにログを埋め込んでみたのですが、 キャストの仕方が正しくないのでしょうか? ●getTest test: undefined ◎箇所でエラーが発生してしまいます。 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘0’ of undefined TypeError: Cannot read property ‘0’ of undefined ▲<Test[]>response.json() :[object Object] ▲response.json() :[object Object] ▲response.json().data :undefined ▲response.json().data ret :undefined ◇test.ts export class Test { constructor( private Time: string, private Id: number, private TestData: { Mode:…(Continue Reading)

Obtener formato de fecha específico Angular2

publicado por: Anonymous Quiero obtener un formato de fecha determinada recibo : “15/03/2016” y quiero obtener este formato 2016-03-15T00:00:00+01:00 He probado con : dateStart = new Date(filterDateStart.split(‘/’).reverse().join(‘/’)); dateStart = new Date(filterDateEnd).toLocaleDateString(); dateStart = new Date(filterDateStart).toISOString(); dateStart = new Date(filterDateStart.split(‘/’).reverse().toISOString(‘/’)); No me funciona ninguno… solución Creo que lo más sencillo para formatear sería usar la librería…(Continue Reading)

Cargar imagen Angular

publicado por: Anonymous Estoy pasando un proyecto realizado en Typescript a angular (es un ajedrez). El problema que tengo es que no se como puedo cargar las imágenes de las fichas. Código que tengo para cargar las fichas; colocarFichas(casilla) : void{ let img = document.createElement(“img”); let nombre: string; if(casilla.id==”0″ || casilla.id==”7″){ img = document.createElement(“img”); img.setAttribute(“src”,”./torreBlanca.png”);…(Continue Reading)

TypeScript+React構成におけるMaterial-UIの型エラー

投稿者: Anonymous 概要 現在、React + TypeScript + Material-UIを用いた開発を行っていますが、エラーが発生致しました。Material-UIのCSS in JSを用いているのですが、その中のtoolbarで下記の様なエラーが発生致しました。TSの型エラーだということは分かるのですが、解決方法は分からず…。 自分なりに色々調べてみましたが、問題に該当する記事が見つけられませんでした…。 どなたか解決方法のご教授お願い致します。 エラーの内容 型 ‘CSSProperties’を型 ‘CSSProperties | CreateCSSProperties <{}> | ((props:{})=> CreateCSSProperties <{}>) ‘に割り当てことはできません。型’ CSSProperties ‘を型’ CreateCSSProperties <{}> ‘にレジストリことはできません。 該当するコード import React from ‘react’ import styled from ‘styled-components’ import { createStyles, makeStyles, Theme } from ‘@material-ui/core/styles’ // ここのtoolbarでエラーが発生 const useStyles = makeStyles((theme: Theme) => createStyles({…(Continue Reading)

¿Cómo validar con jquery.validate un formulario dividido en varias tabs en Bootstrap?

publicado por: Anonymous Tengo un formulario donde divido los campos en diferentes tabs, y lo estoy validando con jquery.validate pero al momento de la validación al parecer sólo está tomando los input que se encuentran visibles, es decir los que se muestran en el tab activo. Mi formulario luce de la siguiente forma: _x000D_ _x000D_…(Continue Reading)

Actualizar componente hijo a partir del componente padre en Angular

publicado por: Anonymous Estoy intentando mandar datos del componente padre al componente hijo en Angular. La idea es que cuando ocurra un cambio en algunas propiedades del componente padre, automáticamente se actualicen algunas propiedades del componente hijo. Lo que muestro a continuación es una simplificación de lo que estoy intentando hacer. Básicamente las propiedades del…(Continue Reading)

pasar datos de componente a un servio en angular 6

publicado por: Anonymous Hola amigos tengo una duda es posible enviar datos a servicio desde un componente y luego desde el servicio enviarlos a otro componente. en este código tengo errores pero en si lo que quisiera es pasar el array datos que esta en el primer componente al servicio y luego que el servicio…(Continue Reading)

React + Typescript + MaterialUI 表にレコードを追加したい

投稿者: Anonymous reactもmaterialuiも初心者です 質問用に余計なコードを除ければよいのですがすみません APIから取得したレコードを表に追加表示したいと思い以下のコードを作成しました import React, { useState } from ‘react’; import GenericTemplate from ‘../lib/GenericTemplate’; import { makeStyles } from ‘@material-ui/core/styles’; import Table from ‘@material-ui/core/Table’; import TableBody from ‘@material-ui/core/TableBody’; import TableCell from ‘@material-ui/core/TableCell’; import TableContainer from ‘@material-ui/core/TableContainer’; import TableHead from ‘@material-ui/core/TableHead’; import TableRow from ‘@material-ui/core/TableRow’; import Paper from ‘@material-ui/core/Paper’; import apiTransactionHistoryCoin from ‘../lib/apiTransactionHistoryCoin’ const…(Continue Reading)

typescriptでネストしたオブジェクトのundefinedチェック

投稿者: Anonymous 以下のようなtypeがあるとします. type Hoge { id: number, text?: string } type Fuga { hoge?: Hoge[] } このときundefinedチェックをしたいのですが,以下のようにしてもエラーが発生します. const fuga: Fuga = { // properties } if(fuga.hoge !== undefined && fuga.hoge[0].text !== undefined){ // some process } エラー内容: Type ‘string | undefined’ is not assignable to type ‘string’. Type ‘undefined’ is not assignable to type…(Continue Reading)

typescript で即値に対して型を制約したい

投稿者: Anonymous type Entry = [string, string] 上記のような、 Entry 型が定義されていたとします。 (実際的な想定としては、 config 系の型でよく見かける気がします。) この type に対して、以下のコードは問題なく動きます。 type Entry = [string, string] const entries1: Entry[] = [ [‘foo’, ‘bar’] ] const concatenated1: Entry[] = entries1.concat([]) console.log(concatenated1) // => [ [ ‘foo’, ‘bar’ ] ] 一方、途中の entries1 を省こうとすると、エラーになります。 type Entry = [string, string] const concatenated2: Entry[] =…(Continue Reading)

Como puedo compilar varios archivos typescript en un directorio

publicado por: Anonymous Tengo un proyecto cuya estructura de archivos y carpetas es la siguiente app core |–Cumulus |–|–Cumulu.ts |–Dimensions |–|–Dimension.ts |–Galaxies |–|–Galaxy.ts |–SolarSystems |–|–SolarSystem.ts |–Universes |–|–Universe.ts c137.ts package.json Quisiera saber como puedo transcompilar todos los archivos .ts sin tener que pasar por cada uno tsc file.ts, tsc file2.ts, tsc file3.ts, lo esperado sería algo…(Continue Reading)