やったこと

アルファベット3文字を使って色を表現した.
アルファベットをASCIIコードに変換して, RGBの値0から255で正規化.
最終的に16進数のカラーコードに直して使用した.

実際のコード

colormap.ts

const getColor = (uid: string) => {
    //アルファベットから色を決める関数
    let changeAscii: string[] = [];
    let ascii10: number[] = [];
    let ascii16: string[] = [];
    //asciiの最小値(Aのコード)が65
    let minascii: number = 65;
    //colorcodeの変数に16進数に変換された文字列を継ぎ足していく
    let colorcode: string = '#';
    for (let i = 0; i < 3; i++) {
      //changeAsciiには1文字目と2文字目と3文字目が入る(別に配列じゃなくてもいいやん…)
      changeAscii[i] = uid.slice(i, i + 1);
      //ascii10はchangeAsciiを10進数のコードに変換. Numberで囲んでやって型を落ち着かす.
      ascii10[i] = Number(changeAscii[i].codePointAt(0));
      //ここで正規化&小数点以下切り捨て
      ascii10[i] = Math.floor((255 * (ascii10[i] - minascii)) / 57);
      //ascii16は正規化後のascii10をストリングにしたやつ
      ascii16[i] = ascii10[i].toString(16);
      colorcode += ascii16[i];
    }
    console.log(colorcode);
    return colorcode;
  };

苦労

ascii10[i] = Number(changeAscii[i].codePointAt(0));

の部分がNumber()で囲まないと number|undefinedになってしまうので上の方で変数の型宣言変えたりしながらうんうん唸ったが, 関数とかで呼び出した型はこういうふうにコントロールすればいいんだと勉強になった気がする. たぶんこの問題にあたってこうやって解決したのは初めてじゃないのでちゃんと書いとく.