---

---

【TypeScript】Object型について

投稿日：2020年11月16日

TypeScriptのObject型の仕様について仕様例、注意点を含めて詳しくまとめています。

---

動的型付き言語のObject

ダックタイピング

/**
 * birdのfly()とsing()を呼ぶだけの関数
 * 
 * @param {*} bird fly()とsing()を持つ 
 */
function duckTest(bird){
    bird.fly();
    bird.sing();
}

/////////// アヒルクラスの場合 /////////////
class Duck {
    fly = ()=> {
        console.log("バサバサ");
    }

    sing = () =>{
        console.log("グエっグエっ");
    }
}

var duck = new Duck();
duckTest(duck);

//////////// コオロギクラスの場合 ///////////
class Cricket {
    fly = () =>{
        console.log("ブブブブブ");
    }
    sing = () =>{
        console.log("リンリンリン");
    }
    eat = () => {
        console.log("むしゃむしゃ")
    }
}

var cricket = new Cricket();
duckTest(cricket);

---

TypeScript

Object型の基礎

let user: object = {firstname: "quai", lastname:"mars"};

console.log(typeof user);
console.log(user.firstname);

$ tsc sample.ts 
sample.ts:4:18 - error TS2339: Property 'firstname' does not exist on type 'object'.

4 console.log(user.firstname);
                   ~~~~~~~~~


Found 1 error.

let user: {firstname: string, lastname: string} = {
    firstname:"quai", 
    lastname:"mars"};

console.log(typeof user);
console.log(user.firstname)

object
quai

let user = {
    firstname:"quai", 
    lastname:"mars"};

console.log(typeof user)
console.log(user.firstname)
console.log(typeof user.firstname)

object
quai
string

Objectクラスを使ったオブジェクトの作成

let user1 = Object.create({
    firstname:"quai", 
    lastname:"mars"});

let user2 = Object({
    firstname: "taichi", 
    lastname: "yagami"});

console.log(typeof user1)
console.log(user1.firstname)

console.log(typeof user2)
console.log(user2.firstname);

object
quai
object
taichi

クラスインスタンスの割り当て

class User {
    firstname: string
    lastname: string
}

let user :{ firstname: string, lastname: string} = new User();
user.firstname = "mars";
user.lastname = "quai";

存在が不確定なプロパティ

let user :{
    firstname: string
    lastname?: string      // 存在が不確定のプロパティ
}

user = {firstname: "mars"}  // lastnameなしのオブジェクトリテラル

user = {firstname:"mars", lastname: undefined}   // lastnameがundefinedのオブジェクトリテラル

user.lastname = "quai"  // lastnameを定義することもできる

インデックスシグネチャ

let user: {
    username: string,
    [key: number]: boolean
}

user = { username : "marsquai" , 1: true, 2: false, 3: true, 100:false};

let ranking : {
    category: string,
    [orderNum: number]: string
}

ranking = {
    category: "youtube",
    1: "Hikakin",
    2: "Hajimesyacho",
    3: "Uketsu",
    4: "HebiFrog",
    5: "Osamurai-san"
}

let book : {
    name: string,
    [key: string]: string
    [key: string]: number
}

sample.ts:4:5 - error TS2374: Duplicate string index signature.

4     [key: string]: number
      ~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

変更不可のオブジェクトを作成

const user = {firstname: "mars", lastname: "quai"}

user.firstname = "Mr.mars"                        // プロパティは問題なく変更できる

user = {firstname: "taichi", lastname: "yagami"}  // 定数であるため、'user' に代入することはできません。ts(2588)

let user : {
    readonly firstname: string,   // readonly
    readonly lastname: string     // readonly
} = {
    firstname: "mars",
    lastname: "quai"
}

user.firstname = "Taichi"

sample.ts:9:6 - error TS2540: Cannot assign to 'firstname' because it is a read-only property.

9 user.firstname = "Taichi"
       ~~~~~~~~~


Found 1 error.

let user = Object.freeze({
    firstname: "mars",
    lastname: "quai"
});

user.firstname = "Taichi";

sample.ts:6:6 - error TS2540: Cannot assign to 'firstname' because it is a read-only property.

6 user.firstname = "Taichi";
       ~~~~~~~~~


Found 1 error.

プロパティとして宣言していない値

let user1 :{firstname: string, lastname: string} = {firstname: "mars", lastname:"quai"}
let user2 = {firstname: "mars", lastname:"quai"}

// 変数宣言時に定義していないプロパティ
user1.age = 16
user2.age = 20

sample.ts:5:7 - error TS2339: Property 'age' does not exist on type '{ firstname: string; lastname: string; }'.

5 user1.age = 16
        ~~~

sample.ts:6:7 - error TS2339: Property 'age' does not exist on type '{ firstname: string; lastname: string; }'.

6 user2.age = 20
        ~~~


Found 2 errors.

プロパティを後から入れる場合

let user: {firstname: string, lastname: string}
user = {
    firstname: "mars",
    lastname: "quai"
}

let user: {firstname: string, lastname: string}

user = {
    firstname: "mars"
}
user = {
    firstname: "mars",
    lastname: "quai",
    age: 10
}

sample.ts:3:1 - error TS2741: Property 'lastname' is missing in type '{ firstname: string; }' but required in type '{ firstname: string; lastname: string; }'.

3 user = {
  ~~~~

  sample.ts:1:31
    1 let user: {firstname: string, lastname: string}
                                    ~~~~~~~~
    'lastname' is declared here.

sample.ts:9:5 - error TS2322: Type '{ firstname: string; lastname: string; age: number; }' is not assignable to type '{ firstname: string; lastname: string; }'.
  Object literal may only specify known properties, and 'age' does not exist in type '{ firstname: string; lastname: string; }'.

9     age: 10
      ~~~~~~~


Found 2 errors.

let user2: {firstname: string, lastname: string}
user2.firstname = "mars"
user2.lastname = "quai"
console.log(user2)

$ node sample.js
/home/ogihara/ts/obj/sample.js:2
user2.firstname = "mars";
                ^


TypeError: Cannot set property 'firstname' of undefined
    at Object.<anonymous> (/home/ogihara/ts/obj/sample.js:2:17)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47

---

さいごに

参考URL

参考書籍

---

---

---