今更ながらfindIndexというものを最近知ったので、indexOfとfindと一緒にまとめておこうと思います。

・3つのポイント

３つとも配列に対して、「何かを探す」という操作をするのだが
この3つのポイントを知っておけば少しは違いがわかりやすいかもです。

①"index"と付くものは、【index"(配列の何番目にあったのか)】が返ってくる(なければ-1が返ってくる)
②"find"と付くものは、【条件式】を引数に持つ
③これは3つとも共通するが、値や条件をクリアするものが配列内に複数あっても【最初の1つ目】しか見ない

具体的にみていくと

・indexOf

const array = [1 ,3, 9, 3];

// 配列.indexOf(値)
// 配列の中に値があればそのindexを、なければ-1返す
// 複数あっても最初のものだけ

const oddByIndexOf = array.indexOf(3);
console.log(oddByIndexOf);
// 1 が出力 

このindexOfは3つのpointでも説明した通り、
"index"とつくので配列の中に引数で指定した値が
ある場合は → 最初に見つかったindex(何番目か)
なかった場合は → -1
といずれにしても数値が返ってくることになリます。

ということで当然、TypeScriptで型のチェックをした場合、

const oddByIndexOf: number

となりますね。

・findIndex

const array = [1 ,3, 9, 3];

// 配列.findIndex(条件)
// 条件を満たす値があればそのindexを、なければ-1を返す
// 複数あっても最初のものだけ

const oddByFindIndex = array.findIndex((num) => num % 3 === 0);
console.log(oddByFindIndex);
// 1 が出力 

このfindIndexに関しては
"find"とつくので値ではなく条件(引数にはコールバック関数を指定)を指定することになります。
そして
"index"とつくので、配列の中に指定した条件が
ある場合は → 最初に見つかったindex(何番目か)
なかった場合は → -1
と、こちらも同様に数値が返ってくることになります。

ということでこちらも当然、TypeScriptで型のチェックをした場合、

const oddByFindIndex: number

となります。

・findに関して

const array = [1 ,3, 9, 3];

// 配列.find(条件)
// 条件を満たす値があればその要素を、なければundefinedを返す
// 複数あっても最初のものだけ

const oddByFind = array.find((num) => num % 3 === 0);
console.log(oddByFind);
// 3 が出力 

こちらのfindはもちろん"find"が含まれているので条件を取ることになります。
上の2つと大きな違いとしては、indexが返ってくるのではなく
最初に見つかった要素自体が返ってくることになります。

今回でいうと

 num % 3 === 0

という条件。
流れとしては「3で割ってあまりが0。つまり３の倍数を配列の中で探しにいき、最初に見つかった要素を返す」
となるので、最初に条件を満たす3が返ってきます。

注意点としては
このfindに関しては配列の中に条件を満たすものがない可能性があるので
TypeScriptの型では

const oddByFind: number | undefined

というふうに「undefinedの可能性もあるよ」となります。
※ 今回はnumberの配列なので numerとundefinedのユニオンですが、stringの配列の場合は stringとundefinedのユニオン型になります。