Rodhos Soft

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

typescript

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" // 出…