なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

TypeScript

react-syntax-highlighter でファイル名を表示したい

このブログでは react-syntax-highlighter を使っているのですが、下のような形式の場合 ```javascript:next.config.js module.exports = { } ``` つまりは、言語名の後に :filename という形で指定された場合、ファイル名として表示する実装をしています。 …

TypeScript で配列かどうかを型付きで判別したい

下のような型をもつ変数 obj が提供されていて、 これが number なのか number[] なのかを区別したいとき。 type Value<T> = T | readonly T[] | undefined | null; declare const obj: Value<number>; こういう文法が使えるのを必要がなかったので知らなかったのだけど</number></t>…

TypeScript で paths を解決してビルドする

TypeScript の tsconfig.json に paths という機能があります。 簡単に言うと、以下のようなことが出来る機能です。 // paths を使わない import SomeModule from "../../Baz"; // paths を使う import SomeModule from "@/components/Baz" ただし、この機能…

styled-components で定義したコンポーネントから Props を取り出したい

例えば下のようなコンポーネントがあって、 import colors from "colors.css"; import styled from "styled-components"; type Props = { primary?: boolean; }; const Button = styled.button<Props>` border: 1px solid ${(props) => (props.primary ? colors.blu</props>…

TypeScript で文字列パラメータから型を得たい

どういうことかと言われると、こんな感じ。 ある関数 A はパラメータに指定された文字列によって返すクラスが異なる 上記関数 A を良い感じに型付けしたい 自分にはこんな感じの型定義しか思いつかなかった。 class ClassA { ... } class ClassB { ... } typ…

GitHub + CircleCI + AWS CDK で自動デプロイをやりたい

ブログネタ何か欲しいとつぶやいたら、「AWS CDK で何か書いて」とネタをもらったので、 AWS CDK でのデプロイを自動化しました。 自動化は正義です。 前提 : AWS CDK 0.18.1 (TypeScript) CircleCI GitHub に push したら、良い感じに cdk deploy が走るよ…

AWS Cloud Development Kit で静的サイトをデプロイしたい

aws-cdk の更新をそこそこウォッチしているのですが、 最近のアップデートでファイルを投げることに対応していたので、やってみようと思います。 AWS CDK 自体の説明については、こちらの記事が詳しいです。 【awslabs 探訪】AWS Cloud Development Kit (AWS…

Vuex + VuexFire + Vuex Type Helper + TypeScript で Action を型アリで書きたい

Vuex で Firebase を良い感じに扱えるようにしてくれる VuexFire と、 TypeScript で Vuex モジュールを良い感じにかけるようにしてくれる Vue Type Helper 、 それぞれを同時に使って、型チェックや保管が効く状態で扱いたかった。 通常通り書くならこんな…

Firestore で Reference 型のデータを作りたい

Firestore には RDB の外部キー制約的な雰囲気の参照型 (reference) が使えます。 Node.js (firebase-admin) から、参照型のデータを追加するには、以下のようにします。 import { firestore } from "firebase-admin"; import { v4 as uuid } from "uuid"; c…

React で Electron の WebView を使いたい

Electron + React で開発してて、 WebView を使いたいってことがあったけど、 普通に追加するだけだったら駄目だったので、やり方のメモ。 結論としては、 React.createElement で埋め込むんじゃなく、 DOM 操作で追加しました。 ネット上の過去の記事をみる…

Node.js + CircleCI + Coveralls でカバレッジを取得してみる

TypeScript + Node.js でアプリを作っているのですが、テストのカバレッジを取得して、 GitHub にて、そのバッジを README.md に表示してみようという試み。 TypeScript + Node.js だけじゃなく、 JavaScript でもいけます。 前提条件としては、下の通り。 T…

TypeScript で redux-thunk を使うとき

ぐぐったら、すでにあったけど、私はこの方法で解決したぜ!というメモで。 TypeScript で redux-thunk を使おうとすると、エラーが出ます。 具体的には、こんな時にエラーが出ます。 /// <reference path="../typings/tsd.d.ts" /> import { createStore, applyMiddleware } from 'redux'; import th</reference>…

React Native + Redux + TypeScript でモバイル開発 -セットアップ-

1週間でモバイルアプリを作る必要性が出てきてしまったので、 さくっと作れそうな React Native でやってみます。 React Native は、 React.js を使って、 iOS, Android のネイティブなアプリが作れてしまう 正直意味分からないフレームワーク。 いつぞやに…

TypeScript で async/await する

どうやら、 TypeScript には async/await があるらしいので、早速使ってみる async/await の構文は、だいたい C# と同じ。 async waitAsync(waitTime: number) { await wait(waitTime); } wait(waitTime: number) { return new Promise((resolve) => setTime…

gulp で TypeScript のコンパイルを自動化する

Electron + TypeScript で開発しているのですが、 いちいちコンパイルし直すのがめんどくさいので、 gulp で自動化してみます。 まず、ディレクトリ構成としては、こんな感じを想定しています。 / ............... ルートディレクトリ |- app .......... 出…