{"id":6443,"date":"2026-05-14T11:55:41","date_gmt":"2026-05-14T02:55:41","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/?post_type=route&#038;p=6443"},"modified":"2026-10-14T11:55:50","modified_gmt":"2026-10-14T02:55:50","slug":"typescript-interface-type-difference","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/6443\/","title":{"rendered":"TypeScript\u306einterface\u3068type\u306e\u9055\u3044"},"content":{"rendered":"<p>TypeScript\u306einterface\u3068type\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5f62\u3092\u8868\u3059\u3060\u3051\u306a\u3089\u3069\u3061\u3089\u3067\u3082\u66f8\u3051\u307e\u3059\u3002\u8ff7\u3063\u305f\u3068\u304d\u306f\u3001\u5ba3\u8a00\u30de\u30fc\u30b8\u306e\u3088\u3046\u306b\u5f8c\u304b\u3089\u540c\u540d\u5b9a\u7fa9\u3092\u62e1\u5f35\u3057\u305f\u3044\u306a\u3089interface\u3001Union\u3084Tuple\u306a\u3069\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4ee5\u5916\u3082\u4e00\u3064\u306e\u540d\u524d\u3067\u8868\u3057\u305f\u3044\u306a\u3089type\u3001\u3068\u8003\u3048\u308b\u3068\u6574\u7406\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\u5358\u7d14\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3067\u306f\u3001\u30c1\u30fc\u30e0\u306e\u898f\u7d04\u306b\u5408\u308f\u305b\u3066\u7d71\u4e00\u3059\u308b\u3053\u3068\u3082\u91cd\u8981\u3067\u3059\u3002<\/p>\n<h2>\u307e\u305a\u5224\u65ad\u8868\u3067\u9055\u3044\u3092\u78ba\u8a8d\u3059\u308b<\/h2>\n<table>\n<thead>\n<tr>\n<th>\u5224\u65ad\u30dd\u30a4\u30f3\u30c8<\/th>\n<th>interface<\/th>\n<th>type<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b<\/td>\n<td>\u5f97\u610f<\/td>\n<td>\u5f97\u610f<\/td>\n<\/tr>\n<tr>\n<td>Union\u30fbTuple\u30fb\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u306e\u5225\u540d<\/td>\n<td>\u4e0d\u53ef<\/td>\n<td>\u53ef\u80fd<\/td>\n<\/tr>\n<tr>\n<td>\u540c\u540d\u5ba3\u8a00\u306e\u30de\u30fc\u30b8<\/td>\n<td>\u53ef\u80fd<\/td>\n<td>\u4e0d\u53ef<\/td>\n<\/tr>\n<tr>\n<td>\u578b\u306e\u62e1\u5f35<\/td>\n<td>extends<\/td>\n<td>\u4ea4\u5dee\u578b &amp; \u306a\u3069<\/td>\n<\/tr>\n<tr>\n<td>\u30af\u30e9\u30b9\u306eimplements\u5bfe\u8c61<\/td>\n<td>\u5229\u7528\u53ef\u80fd<\/td>\n<td>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5f62\u72b6\u306a\u3089\u5229\u7528\u53ef\u80fd<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u300e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306a\u3089interface\u3001\u305d\u308c\u4ee5\u5916\u306ftype\u300f\u3068\u5b8c\u5168\u306b\u4e8c\u5206\u3067\u304d\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002TypeScript\u306f\u69cb\u9020\u7684\u578b\u4ed8\u3051\u306a\u306e\u3067\u3001\u4e21\u65b9\u3067\u8868\u305b\u308b\u9818\u57df\u304c\u5927\u304d\u304f\u91cd\u306a\u308a\u307e\u3059\u3002\u9055\u3044\u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u9762\u3060\u3051\u3092\u62bc\u3055\u3048\u308b\u306e\u304c\u5b9f\u52d9\u7684\u3067\u3059\u3002<\/p>\n<hr>\n<h2>\u540c\u3058\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306f\u4e21\u65b9\u3067\u66f8\u3051\u308b<\/h2>\n<pre><code>interface UserByInterface {\r\n  id: number;\r\n  name: string;\r\n}\r\n\r\ntype UserByType = {\r\n  id: number;\r\n  name: string;\r\n};<\/code><\/pre>\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u3069\u3061\u3089\u3082id\u3068name\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3092\u8868\u3057\u307e\u3059\u3002\u5358\u7d14\u306a\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u3060\u3051\u306a\u3089\u3001\u66f8\u304d\u5473\u306e\u5dee\u3088\u308a\u3082\u65e2\u5b58\u30b3\u30fc\u30c9\u306e\u65b9\u91dd\u3084\u30c1\u30fc\u30e0\u898f\u7d04\u306b\u5408\u308f\u305b\u308b\u307b\u3046\u304c\u8aad\u307f\u3084\u3059\u3055\u3092\u4fdd\u3066\u307e\u3059\u3002<\/p>\n<blockquote>\n<p><strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u69cb\u9020\u7684\u578b\u4ed8\u3051<\/strong><br \/>\u578b\u306e\u540d\u524d\u3067\u306f\u306a\u304f\u3001\u5fc5\u8981\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3084\u30e1\u30bd\u30c3\u30c9\u306e\u5f62\u304c\u4e00\u81f4\u3057\u3066\u3044\u308b\u304b\u3092\u4e2d\u5fc3\u306b\u4e92\u63db\u6027\u3092\u5224\u65ad\u3059\u308bTypeScript\u306e\u578b\u30b7\u30b9\u30c6\u30e0\u306e\u8003\u3048\u65b9\u3067\u3059\u3002<\/p>\n<\/blockquote>\n<hr>\n<h2>Union\u3084Tuple\u306ftype\u3067\u8868\u3059<\/h2>\n<p>type alias\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3060\u3051\u3067\u306a\u304f\u3001Union\u3084Tuple\u3001\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u306e\u5225\u540d\u3082\u4f5c\u308c\u307e\u3059\u3002\u8907\u6570\u306e\u5019\u88dc\u3092\u307e\u3068\u3081\u308b\u578b\u3067\u306ftype\u304c\u81ea\u7136\u3067\u3059\u3002<\/p>\n<pre><code>type Status = &#39;idle&#39; | &#39;loading&#39; | &#39;success&#39; | &#39;error&#39;;\r\n\r\ntype Coordinate = [number, number];\r\n\r\ntype UserId = string | number;<\/code><\/pre>\n<p>interface\u306f\u3053\u306e\u3088\u3046\u306aUnion\u305d\u306e\u3082\u306e\u306e\u5225\u540d\u306b\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002API\u306e\u72b6\u614b\u3084\u8a31\u53ef\u3055\u308c\u305f\u6587\u5b57\u5217\u306e\u96c6\u5408\u3092\u8868\u3059\u306a\u3089\u3001type\u306e\u7528\u9014\u304c\u660e\u78ba\u3067\u3059\u3002<\/p>\n<hr>\n<h2>\u5ba3\u8a00\u30de\u30fc\u30b8\u304c\u5fc5\u8981\u306a\u3089interface<\/h2>\n<p>interface\u306f\u540c\u3058\u540d\u524d\u3067\u8907\u6570\u56de\u5ba3\u8a00\u3059\u308b\u3068\u3001\u4e92\u63db\u6027\u306e\u3042\u308b\u30e1\u30f3\u30d0\u30fc\u3092\u4e00\u3064\u306einterface\u3078\u30de\u30fc\u30b8\u3067\u304d\u307e\u3059\u3002\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u578b\u3092\u62e1\u5f35\u3059\u308bDeclaration Merging\u3067\u91cd\u8981\u306b\u306a\u308b\u6027\u8cea\u3067\u3059\u3002<\/p>\n<pre><code>interface AppConfig {\r\n  apiUrl: string;\r\n}\r\n\r\ninterface AppConfig {\r\n  timeout: number;\r\n}\r\n\r\nconst config: AppConfig = {\r\n  apiUrl: &#39;\/api&#39;,\r\n  timeout: 3000\r\n};<\/code><\/pre>\n<p>type alias\u3092\u540c\u3058\u540d\u524d\u3067\u3082\u3046\u4e00\u5ea6\u5ba3\u8a00\u3059\u308b\u3068\u3001\u91cd\u8907\u3057\u305f\u8b58\u5225\u5b50\u3068\u3057\u3066\u6271\u308f\u308c\u307e\u3059\u3002\u300e\u578b\u3092\u9589\u3058\u3066\u304a\u304d\u305f\u3044\u300f\u8a2d\u8a08\u3067\u306f\u3001\u3053\u306e\u9055\u3044\u3092\u7406\u89e3\u3057\u3066\u9078\u3076\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2>\u62e1\u5f35\u306fextends\u3068\u4ea4\u5dee\u578b\u3067\u66f8\u304d\u5206\u3051\u308b<\/h2>\n<pre><code>interface BaseUser {\r\n  id: number;\r\n}\r\n\r\ninterface AdminUser extends BaseUser {\r\n  role: &#39;admin&#39;;\r\n}\r\n\r\ntype BaseAccount = { id: number };\r\ntype AdminAccount = BaseAccount &amp; { role: &#39;admin&#39; };<\/code><\/pre>\n<p>\u3069\u3061\u3089\u3082\u65e2\u5b58\u306e\u5f62\u3092\u7d44\u307f\u5408\u308f\u305b\u3089\u308c\u307e\u3059\u3002\u305f\u3060\u3057\u3001interface\u306eextends\u3068type\u306e\u4ea4\u5dee\u578b\u306f\u3001\u540c\u540d\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u885d\u7a81\u6642\u306a\u3069\u306b\u6271\u3044\u304c\u540c\u3058\u3068\u306f\u9650\u308a\u307e\u305b\u3093\u3002\u8907\u96d1\u306a\u5408\u6210\u3067\u306f\u3001\u30a8\u30e9\u30fc\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u610f\u56f3\u3057\u305f\u578b\u306b\u306a\u308b\u304b\u691c\u8a3c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u5b9f\u52d9\u3067\u306f3\u3064\u306e\u57fa\u6e96\u3067\u6c7a\u3081\u308b<\/h2>\n<ul>\n<li>Union\u30fbTuple\u306a\u3069\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4ee5\u5916\u3092\u8868\u3059\u306a\u3089type<\/li>\n<li>Declaration Merging\u3084\u62e1\u5f35\u53ef\u80fd\u306a\u516c\u958b\u578b\u3092\u610f\u56f3\u3059\u308b\u306a\u3089interface<\/li>\n<li>\u4e21\u65b9\u3067\u66f8\u3051\u308b\u5358\u7d14\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u3067\u66f8\u304d\u65b9\u3092\u7d71\u4e00\u3059\u308b<\/li>\n<\/ul>\n<p>\u300einterface\u306e\u307b\u3046\u304c\u5e38\u306b\u826f\u3044\u300f\u300etype\u306e\u307b\u3046\u304c\u65b0\u3057\u3044\u300f\u3068\u3044\u3046\u512a\u52a3\u3067\u8003\u3048\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u8868\u3057\u305f\u3044\u578b\u306e\u6027\u8cea\u3068\u3001\u65e2\u5b58\u30b3\u30fc\u30c9\u3068\u306e\u4e00\u8cab\u6027\u3092\u512a\u5148\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u95a2\u9023\u3059\u308bTypeScript\u306e\u578b\u8a2d\u8a08<\/h2>\n<p>TypeScript\u3092\u3053\u308c\u304b\u3089\u5c0e\u5165\u3059\u308b\u5834\u5408\u306f\u74b0\u5883\u69cb\u7bc9\u306e\u8a18\u4e8b\u3001\u5b9a\u6570\u304b\u3089\u578b\u3092\u4f5c\u3063\u3066\u4e8c\u91cd\u7ba1\u7406\u3092\u6e1b\u3089\u3057\u305f\u3044\u5834\u5408\u306fkeyof typeof\u306e\u8a18\u4e8b\u304c\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n<p>\uff08TypeScript\u306e\u958b\u767a\u74b0\u5883\u3092\u6574\u3048\u308b\u306b\u3064\u3044\u3066\u306f\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1291\/\">TypeScript\u306e\u59cb\u3081\u65b9\uff5cNode.js\u3068VSCode\u3067\u5b66\u3076\u958b\u767a\u74b0\u5883\u69cb\u7bc9\u30ac\u30a4\u30c9<\/a>\u300f\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\uff09<\/p>\n<p>\uff08\u5b9a\u6570\u304b\u3089\u578b\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u306b\u3064\u3044\u3066\u306f\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1910\/\">TypeScript\u578b\u5b9a\u7fa9\u81ea\u52d5\u5316\u300ckeyof typeof\u300d\u5b9f\u8df5\u4f8b\u3068\u4e8c\u91cd\u7ba1\u7406\u89e3\u6d88\u6cd5<\/a>\u300f\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\uff09<\/p>\n<h2>\u3088\u304f\u3042\u308b\u7591\u554f<\/h2>\n<h3>interface\u3068type\u306f\u6df7\u5728\u3057\u3066\u3082\u554f\u984c\u306a\u3044\uff1f<\/h3>\n<p>\u554f\u984c\u3042\u308a\u307e\u305b\u3093\u3002\u305f\u3060\u3057\u540c\u3058\u76ee\u7684\u306e\u578b\u5b9a\u7fa9\u3067\u66f8\u304d\u65b9\u304c\u3070\u3089\u3064\u304f\u3068\u30ec\u30d3\u30e5\u30fc\u6642\u306e\u5224\u65ad\u30b3\u30b9\u30c8\u304c\u5897\u3048\u308b\u305f\u3081\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u65b9\u91dd\u3092\u6c7a\u3081\u3066\u304a\u304f\u3068\u8aad\u307f\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<h3>React\u306eProps\u306finterface\u3068type\u306e\u3069\u3061\u3089\uff1f<\/h3>\n<p>\u5358\u7d14\u306aProps\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306a\u3089\u3069\u3061\u3089\u3067\u3082\u8868\u73fe\u3067\u304d\u307e\u3059\u3002Union\u3092\u542b\u3080\u8a2d\u8a08\u3084\u65e2\u5b58\u306e\u898f\u7d04\u306a\u3069\u3001Props\u4ee5\u5916\u306e\u8981\u4ef6\u3067\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3>interface\u306fUnion\u3092\u8868\u305b\u306a\u3044\uff1f<\/h3>\n<p>interface\u5358\u4f53\u3067Union\u578b\u305d\u306e\u3082\u306e\u306e\u5225\u540d\u306f\u4f5c\u308c\u307e\u305b\u3093\u3002Union\u3092\u540d\u524d\u4ed8\u304d\u3067\u8868\u3059\u7528\u9014\u306b\u306ftype alias\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>interface\u3068type\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3067\u306f\u4f3c\u305f\u5f79\u5272\u3092\u6301\u3061\u307e\u3059\u3002\u9055\u3044\u304c\u306f\u3063\u304d\u308a\u51fa\u308b\u306e\u306f\u3001Union\u30fbTuple\u306a\u3069\u3092\u8868\u3059\u5834\u9762\u3068\u3001interface\u306e\u5ba3\u8a00\u30de\u30fc\u30b8\u3092\u4f7f\u3046\u5834\u9762\u3067\u3059\u3002\u307e\u305a\u578b\u306e\u6027\u8cea\u3092\u898b\u3066\u3001\u4e21\u65b9\u3067\u66f8\u3051\u308b\u306a\u3089\u30c1\u30fc\u30e0\u5185\u306e\u4e00\u8cab\u6027\u3067\u6c7a\u3081\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u8ff7\u3063\u3066\u3044\u308b\u578b\u3092\u4e00\u3064\u9078\u3073\u3001Union\u304c\u5fc5\u8981\u304b\u3001\u5ba3\u8a00\u30de\u30fc\u30b8\u304c\u5fc5\u8981\u304b\u3001\u65e2\u5b58\u898f\u7d04\u306f\u3069\u3061\u3089\u304b\u306e3\u70b9\u3067\u5224\u65ad\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"featured_media":6447,"template":"","meta":{"ssp_meta_title":"TypeScript\u306einterface\u3068type\u306e\u9055\u3044\uff5cUnion\u30fb\u62e1\u5f35\u30fb\u5ba3\u8a00\u30de\u30fc\u30b8\u3067\u4f7f\u3044\u5206\u3051\u308b","ssp_meta_description":"TypeScript\u306einterface\u3068type\u306f\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\uff1f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u3067\u306f\u4f3c\u3066\u3044\u307e\u3059\u304c\u3001Union\u30fbTuple\u30fb\u5ba3\u8a00\u30de\u30fc\u30b8\u306a\u3069\u306b\u9055\u3044\u304c\u3042\u308a\u307e\u3059\u3002\u5224\u65ad\u8868\u3068\u30b3\u30fc\u30c9\u4f8b\u3067\u5b9f\u52d9\u306e\u4f7f\u3044\u5206\u3051\u3092\u6574\u7406\u3057\u307e\u3059\u3002","ssp_meta_keyword":"TypeScript interface type \u9055\u3044,TypeScript interface,TypeScript type alias,TypeScript Union,TypeScript \u5ba3\u8a00\u30de\u30fc\u30b8,TypeScript \u578b\u5b9a\u7fa9","ssp_meta_canonical":""},"route_category":[9],"_links":{"self":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route\/6443"}],"collection":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route"}],"about":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/types\/route"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media\/6447"}],"wp:attachment":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media?parent=6443"}],"wp:term":[{"taxonomy":"route_category","embeddable":true,"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route_category?post=6443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}