gray-matterという便利なライブラリがあります。
「Next.js＋gray-matterのススメ」でも書いたようにコンテンツとコンフィグをまとめて１つのマークダウンにかけるようなやつです。
TypeScript でセクションを使う時に少し困ったのでメモしておきます。
カテゴリー: Typescript
React-Markdownで見出しタグを変更する
react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。
具体的には Material UI の Typography にしたい。
javascript でも問題ないですが Typescript 前提で書いています。
Typescriptの型指定を無視する
gl-react でお絵描き的なことをしようとしてて、Typescript の型チェックが通らない値を設定する必要が出来た。
型設定を修正するのが正攻法ですが、直すのが面倒な事情もあっていくつかのプロパティーの型チェックを放棄したい。
考えてみれば必要な機能で基本的な事なんですが、やろうと思ったことがなかったので知らなかった。
React Native, Expoでのパスエイリアス設定
Expo ( react native ) で相対パスの代わりにエイリアスを使いたい。
import Ctx from "../../../contexts/main"; みたいなのは書いてられないです。
next.js で同様のことをしていたので設定自体は簡単だったのですが、思わぬ落とし穴があったのでメモしておきます。
ReactでTwitterのタイムラインなどを埋め込む
React(Next.js)でTwitterの埋め込みを行いたい。
主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。
ライブラリを使ったり使わなかったり。
【Typescript】モジュールをブラケット表記法で使う
import * as M from ""で読み込んだモジュールをブラケット記法[]で使いたい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//module_a export const contents_a = ...; export const contents_b = ...; export const contents_c = ...; //module_b import * as M from "./module_a" export const someFunc = (name: string) => { M.contents_a; //ドット表記法なら問題ない M[name]; //この書き方はエラー /* expression of type 'string' can't be used to index type 'typeof import("..."). No index signature with a parameter of type 'string' was found on type 'typeof import("..."). ts(7053) */ } |
こんな感じで引数（変数）に対応したモジュールを使いたい場合にどうするか。
【Typescript】Nullableに対する様々な操作
Next.js(React)でTypescriptで書いていますが、DOM関連でNullableな操作が続きどう処理するのがいいか悩んだので色々やってみます。
Typescriptは制限と同時にできることも多いので思いのほか色々できました。
キーワード：Null合体演算子Null条件演算子Null許容型Type GuardNon-null assertion operatorDefinite Assignment AssertionsOptional chaining