Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

typescript

...argsで関数にタプルを渡す。

例えばf(S,N,B)という関数があるとして、args=["a",3,false]というタプルを渡すには f(...args)とやれば良い。同様のことは配列においても可能。

rxjsで購読を止める

色々やり方はあると思うが一つ聞いたのはこういうもの。 const root = new BehaviorSubject<"start"|"end">("start"); const subject = new Subject<string>(); const op = root.pipe(mergeMap((x) => { if (x == "end") { return throwError(new Error("end")); } r</string>…

keyofのtips

const myMap = <const>{ A:{hoge:"a"}, B:{hoge:"b"} }; type keys = keyof typeof myMap;` keysはA|Bという型になる。 ちなみにmyMapはreadonly属性になってる。</const>

型のプロパティを拡張する。

型で条件付きで拡張すれば良い。 const MyEmpty = Symbol("MyEmpty"); type Empty<T> = { [P in keyof T]:P extends "hoge" ? T[P] | typeof MyEmpty : T[P] } type ExRoomInfo = Empty<RoomInfo></roominfo></t>

Parcell

以下を参照した。 mae.chab.in インストール npm install --save-dev parcel-bundler 使い方 npx parcel index.html とするだけで依存関係をたどってdistディレクトリに吐き出される。 webサーバ(ポートは自動)が起動し、 Hot Module Replacementに対応して…

rxjsとpromise

rxjsの someObservable.subscrive((result)=>(....)) が const result = await someObservable.toPromise(); みたいにプロミスに変更してawaitできる。 あとES6から複数値を関数から受け取れるらしい function some() { return {4,3}; } let {x, y} = some();

AsyncとPromise

async関数はPromisで包んで返してくれる。awaitはpromiseが解決されるまでそこでまってくれる。これをつかうためには結局、その関数はasyncにならないといけない。

AjaxでJSON取得

req.openの2つ目は非同期のフラグ、req.sendはPOSTの場合データが入る。 const req = new XMLHttpRequest(); req.open("GET", "myjson.json", true); req.onreadystatechange = () => { if (req.readyState === 4 && req.status === 200) { const jsonText …

ジェネリクスな配列による変数定義

export const eventIdList = <const>["HogeEV", "PoiEV"]; export type EventId = typeof eventIdList[number];</const>

express-generator-typescript

```cterm npm install express-generator-typescript ```作成 ```cterm npx express-generator-typescript "hello-app" ```hello-appの中に入って実行 ```cterm cd hello-app npm run start-dev ```

hello express

expressをinstallしておく npm install express typeも npm install @types/express import express from "express"; var app = express(); app.get("/", (req, res) => { return res.send("Hello World!"); }); app.listen(3001, () => { console.log("app …

hello node

nodeのtypeを入れておく。 npm install @types/node import * as http from "http" let server:http.Server = http.createServer((req:http.IncomingMessage, res:http.ServerResponse) => { res.writeHead(200, {'Content-Type':'text/plain'}); res.write(…

abc

バージョン確認 node -v v10.16.0 npm -v 6.9.0 typescriptのコンフィグファイル作成 tsc --init npm開始 npm init typescript実験用にhello.ts作成 console.log("hello") トランスパイル tsc 試しに実行してみる。 node hello.js jsの吐き出し先をdistフォ…

最低限webpackを使う

node package.config { "name": "hoge", "version": "1.0.0", "description": "hoge", "main": "index.js", "scripts": { "build": "webpack", "watch": "webpack -w", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "KatagiriSo", "…

filterに注意

list[]のfilterに渡すクロージャでreturnを書き忘れてもコンパイルが通ってしまう‥。

環境モナドを作ってみる

環境モナドを作ってみました。 gistb15f8bd0d01559dc9178c748a5f1e49c

状態モナドを作ってみる

typescriptで状態モナドを作ってみます。状態モナドは という状態を受け取って結果と変化した状態を返す関数です。これを export type State<R,S> = (s:S) => {result:R,state:S} と定義しておきます。初期値を作る関数を export const unit = <R,S>(result:R) => (sta</r,s></r,s>…

Discriminated Unions

https://www.typescriptlang.org/docs/handbook/advanced-types.html

わかりやすい資料

www.buildinsider.net

既存メソッドの拡張

declare interface String { getCount(): number; } (String.prototype as any).getCount = function () { return this.length; }; でimportする。

iframeとタイマー

タイマーでiframeを切り替えてみた。 function getID(identifier:string):string { return '[data-id="' + identifier +'"]' } const x:JQuery<HTMLIFrameElement> = $(getID("child")) as JQuery<HTMLIFrameElement> const y = x.get(0); setTimeout(function(){ y.src ="./hoge.html"; },2000) y.</htmliframeelement></htmliframeelement>…

文法の幾つか

1. interfaceを使ってメソッド拡張まがいなことができる。 2. objectの定義に{key?:string, key2?:number}等と?をつけると省略化になる。 3. thisの用法が違う。

JQueryプラグインを使う

Jquery plugin プラグインの例 jquery.hoge.js (function ($) { $.fn.hoge = function () { return $("p").click(function () { console.log("test!"); $(this).text("hello!"); }); }; })(jQuery); これをjqueryとともにhtml側で読み込んでおく。 タイプス…

jquery等を使う。

Webアプリ環境 npm パッケージマネージャ TypeScript 型付きのjavascrpt WebPack TypeScriptやHTMLのパーツ化のために使用 Babel (今回使わなかった。) JSのバージョン吸収 npm プロジェクトでパッケージ管理をスタートしたい場合 npm init ではじめられる。…

感想

1. InputEventは型定義を読み込んだ。 npm install @types/dom-inputevent 2. 定義されてないものはinputEvent["inputType"]で取れた。 3. 定義していないプロパティも input["oldValue"] = input.value;で代入できた。 4. childNodesはArray.prototype.forE…

typescript環境

TypeScript https://ics.media/entry/16329 インストール typescript また、webpackで使用するために ts-loader もインストール 設定ファイル ルートにtsconfig.json { "compilerOptions": { "sourceMap": true, "target": "es5", "module": "es2015" // 出…