{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiebaatf44rnbgd5mqkthqotmcvq2y3inye24qze27ty4b45rwe4ay",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mommxs3wb4d2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigrlwjatzpzaqmjbzsdqfxaxwefjfyy4ue3uydz466t4ple5mggca"
    },
    "mimeType": "image/webp",
    "size": 53858
  },
  "path": "/jsha/introduction-to-typescript-interfaces-2njc",
  "publishedAt": "2026-06-19T05:22:36.000Z",
  "site": "https://dev.to",
  "tags": [
    "beginners",
    "programming",
    "tutorial",
    "typescript"
  ],
  "textContent": "##  Basic syntax\n\nWe know that we can use object literals to specify what property types we can use. However, what if you have multiple objects with the same structure? **Interface** is a programming structure that allows to create types for objects.\n\n\n\n    interface Settings {\n      color: string;\n      delay: number;\n      retry: boolean;\n    }\n\n    const mySettings: Settings = {\n      color: \"black\",\n      delay: 1000,\n      retry: false\n    }\n\n    console.log(mySettings.color);\n\n\n> Pay attention that when we define **interface** we use \"semicolon\".\n\n##  Optional property\n\nWe can define optional property using `?:` symbols:\n\n\n\n    interface Settings {\n      color: string;\n      delay: number;\n      retry?: boolean;\n    }\n\n    const mySettings: Settings = {\n      color: \"black\",\n      delay: 1000\n    }\n\n    console.log(mySettings.retry); //undefined\n\n\n##  Index signatures\n\nSometimes we don't know how many properties an object will have. We can specify expected types:\n\n\n\n    interface Person {\n      [key: string]: string;\n    }\n\n    const p: Person = {\n      name: 'Mary',\n      lastName: 'Smith'\n    }\n\n    p['age'] = 50; // Type 'number' is not assignable to type 'string'\n\n\n\n##  Methods\n\nOf course, we should be able to define methods:\n\n\n\n    interface Settings {\n      color: string;\n      delay: number;\n      describe: () => void;\n    }\n\n    const mySettings: Settings = {\n      color: \"black\",\n      delay: 1000,\n      describe: function () {\n        console.log(\"Your favorite color is \" + this.color)\n      }\n    }\n\n    console.log(mySettings.describe());\n\n\n> Here, in interface, we defined type of `describe` as `() => void`, that means function. In this case `void` doesn't indicate that a function mustn't return any value, it indicates that it can return any value. The other way to set function type is : `describe(): void`.\n\n##  Inheritance\n\nInterfaces can inherit properties from another ones using `extends`:\n\n\n\n    interface Settings {\n      color: string;\n      delay: number;\n      describe: () => void;\n    }\n\n    interface Game extends Settings{\n      character: string;\n    }\n\n    const myGame: Game = {\n      color: \"black\",\n      delay: 1000,\n      describe: function () {\n        console.log(\"Your favorite color is \" + this.color);\n        return 'hi';\n      },\n      character: 'goat'\n    }\n\n    console.log(myGame.character); // goat\n\n\n##  Using as argument in function\n\n\n    interface Settings {\n      color: string;\n      delay: number;\n    }\n\n    function changeSettings(s: Settings): Settings {\n      return {\n        color: s.color,\n        delay: s.delay + 1000\n      }\n    }\n\n\n> We specify what we expect the argument to be.",
  "title": "Introduction to TypeScript. Interfaces"
}