【TypeScript】オブジェクト基本

TypeSceipt学習。

オブジェクトに型をつける<基本>

const objectTest: {
    name: string,
    age: number
} = {
    name: '田中',
    age: 25
}

エラーが出る時

// The expected type comes from property 'age' which is declared here on type '{ name: string; age: number; }'
const objectTest: {
    name: string,
    age: number
} = {
    name: '田中',
// number型に対してstring型を入れている
    age: 'aaa'
}

// Property 'age' is missing in type '{ name: string; }' but required in type '{ name: string; age: number; }'.
const objectTest: {
    name: string,
    age: number
} = {
// ageが記載されていない
    name: '田中',
}

type文の使用

＜基本＞type 型名 = 型

すでにある型に別名をつけて使用する。
&で組み合わせることができる。（インターセクション型（交差型））
※type文はオブジェクト型にしか使用できないということではない

type MemberType = {
    name: string,
    age: number
}

const memberT: MemberType = {
    name: '田中',
    age: 22
}

type MemberHobby = {
    hobby: string
}

type MemberProfile = MemberType & MemberHobby

const memberInfo: MemberProfile = {
    name: '佐藤',
    age: 25,
    hobby: 'サッカー'
}

interface宣言

＜基本＞interface 型名オブジェクト型

interface宣言で扱えるのはオブジェクト型のみ。
interface宣言はtype文で代用可能。（type文の方が多くの場面で使用できるためtypeのみ使用するという決まりがあったりするとのこと）

// interface宣言
interface MemberInterface {
    name: string,
    age: number
}

const memberI: MemberInterface = {
    name: '前田',
    age: 25
}

interface HobbyInterface {
    hobby: string
}

// extendsにて拡張が可能
interface ProfileInterface extends MemberInterface, HobbyInterface {}

const memberInfoI: ProfileInterface = {
    name: '田中',
    age: 26,
    hobby: '読書'
}

オプショナルなプロパティの宣言

あってもなくてもよいプロパティの指定。プロパティ名の後に?を記述。
この時の型はboolean | undefined とユニオン型となる。

type Optional = {
    foo: string,
    bar: number,
    baz?: boolean
}

const obj : Optional = {
    foo: 'TEST',
    bar: 123,
    baz: true
}

const obj2 : Optional = {
    foo: 'TEST',
    bar: 123,
}

// bazがあってもなくてもエラーにならない

配列の中にオブジェクトがある場合

最後に[ ] をつけると配列だと認識される。

type ObjectInArray1 = {
    id: number,
    name: string,
    hobby: string
}[]

const members : ObjectInArray2 = [
    {
        id: 1,
        name: '伊藤',
        hobby: '読書'
    }
]

for(const member of members) {
    console.log(`id: ${member.id}, name: ${member.name}`)
}
//結果　id: 1, name: 伊藤

readonly

プロパティごとに読み取り専用にできる。設定以降は書き換えられないようにする。

type MemberTypeR = {
    readonly name: string,
    age: number
}

const memberR: MemberTypeR = {
    name: '田中',
    age: 22
}

// memberR.name = '松井'
// 再代入しようとするとエラー

typeof

型推論の結果を抽出して型をつける。

const objType = {
    foo: 123,
    bar: 'hi'
}

type R = typeof objType;
const objType2: R = {
    foo: 23,
    bar: 'test'
}
// objTypeの型をRとして使用

参考：TypeScript入門

c.sakyou