DogImage[] はTypeScriptの型注釈で使う書き方です。
JavaScriptにはありません。
ただし、JavaScriptにも配列そのものはあります。ここを区別する！
① JavaScriptの配列とTypeScriptの配列の型
例えば、JavaScriptでは次のように書きます。
// JavaScript：配列を作る
const dogImageUrls = [
{ url: 'dog1.jpg', isLiked: false },
{ url: 'dog2.jpg', isLiked: true },
]
一方、TypeScriptでは、配列にどんなデータを入れるのか、型を指定できます。（TypeScriptの型指定）
// TypeScript：配列の型を指定する
const dogImageUrls: DogImage[] = []
こちらは「dogImageUrls は DogImage 型の要素を持つ配列ですよ」とTypeScriptに教えています。
つまり、配列はJavaScriptにもあるけれど、DogImage[] という型の書き方はTypeScriptのものです。
② DogImage[] を見たら、こう読む！
今後は、次のように頭の中で読み替えてみる。
DogImage[]
読み方
「DogImage型のデータが入る配列」
string[]
読み方
「string型（文字列）が入る配列」
const names: string[] = ['ポチ', 'ハチ']
number[]
読み方
「number型（数値）が入る配列」
const ages: number[] = [3, 5, 8]
どれも、型名[] ＝ その型の要素が入る配列という同じルールです。
③ もう一つの書き方もあります
Array<DogImage>
これは DogImage[] と同じ意味です。
ひとまず DogImage[] の書き方を使っていく。
今日のポイントはこれです。
[ ] だけなら、JavaScriptでも配列を作れる。
const fruit = []
console.log(fruit) // []
- DogImage[] のように型名の後ろにつける書き方は、TypeScriptの型指定。
- DogImage[] を見たら「DogImage型のデータが入る配列」と読む。
このルールは string[] や number[] にも共通します。
TypscriptでVue.jsのPropsを定義する場合
typeで型定義する場合
// 表示する犬画像
type DogImage = {
url: string
isLiked: boolean
}
defineProps<{
dogImageUrls: DogImage[]
}>()
interfaceで型定義
// 表示する犬画像
interface DogImage {
url: string
isLiked: boolean
}
defineProps<{
dogImageUrls: DogImage[]
}>()