📚

TypeScriptのバッドノウハウ的なtips(ハマったところのまとめ)

2024/01/02に公開

TypeScript

tech

Abstract

TypeScriptの型って、TypeScript + React-Three-Fiberだとものすごいハマりポイント.
他にも、簡単な話なのに、なかなか検索で出てこないとか。
なので、苦しんだポイントを適宜追加していきます。

苦しんだポイント

1.型が分からん

VSCode使いなら、型を知りたい変数の上にマウスオーバすれば、結構分かる。

こんな感じ。

2."..."が分からん

スプレッド構文というらしい。{...props}とかの形でよく見るけど、検索で出てこない。
【JavaScript】「…」って何者？スプレッド構文について初心者向けに解説！がものすごい分かりやすかった。
ホント感動!!

3."{ xxx }"が分からん

分割代入というらしい。相変わらず検索性の悪いTypeScriptの構文だ。
【TypeScript】分割代入でのみんな知るべき使い方7選が分かりやすかった。

const student = {
  name: "山田太郎",
  age: 20,
  department: "経済学部",
};

const { name, age } = student; ## ← 欲しいメンバだけ取り出す使い方になる

console.log(name); // 山田太郎
console.log(age);  // 20

ついでに。変数名を別名にする方法

const { name: studentName } = student;
console.log(studentName); // 山田太郎

さらに。関数の引数として使う方法

 //                    ↓ address欲しくないとかなった時の定義
 function showProfile({name, age}: {name: string, age: number}) {
    console.log(`名前: ${name}, 年齢: ${age}`);
}

const user = {
    name: "田中太郎",
    age: 25,
    address: "東京都新宿区"
};

//          ↓ 渡す方は気にせず渡せる。
 showProfile(user);

4.[]で、配列に追加できる。

※配列の基本的な使い方は、いろんなサイトにお任せ。
push()で追加できるけど、[]でも追加できる。

お試しコード

const aaa: number[] = []
console.log('001 aaa.length=',  aaa.length)
for(let i = 0; i < 3; i++)
    aaa[i] = 20 + i           ### ← ここで追加している。Out of Indexにはならない。
console.log(aaa)
console.log('002 aaa.length=',  aaa.length)

Playground結果

[LOG]: "001 aaa.length=",  0 
[LOG]: [20, 21, 22] 
[LOG]: "002 aaa.length=",  3

コードリーディングしてて、"ここじゃないよね。Out of indexやもんね。"ってもやもやしてたら、問題ないコードだったという。

5.[]で、連想配列にも追加できる。

※連想配列の基本的な使い方は、いろんなサイトにお任せ。
連想配列の場合は、[]で追加するのがデフォルトらしい。