{"id":492,"date":"2026-05-17T07:02:26","date_gmt":"2026-05-16T23:02:26","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-class-8\/"},"modified":"2026-05-17T07:02:26","modified_gmt":"2026-05-16T23:02:26","slug":"ts-class-8","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-class-8\/","title":{"rendered":"\ud074\ub798\uc2a4 + \uc811\uadfc \uc81c\uc5b4\uc790 (\uae30\ucd08 8\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 276 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root{--color-primary:#3178c6;--color-accent:#60a5fa;--color-bg:#fafafa;--color-bg-card:#ffffff;--color-text:#1e293b;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#3178c6;--font-body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;--size-body:17px;--line-height:1.75;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 22px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:72px 22px 56px;text-align:center;}\n.hero .badge{display:inline-block;background:rgba(96,165,250,0.18);color:var(--color-accent);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.5px;margin-bottom:18px;}\n.hero h1{margin:0 0 18px;font-size:36px;line-height:1.3;letter-spacing:-0.3px;}\n.hero p.sub{margin:0 auto;max-width:580px;font-size:17px;color:#dbeafe;}\n.hero img{width:100%;max-width:720px;height:auto;margin:36px auto 0;display:block;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.3);}\n.meta{display:flex;gap:14px;justify-content:center;margin-top:20px;font-size:13px;color:#93c5fd;flex-wrap:wrap;}\n.meta span::before{content:\"\u00b7\";margin-right:14px;color:#1e3a8a;}\n.meta span:first-child::before{content:\"\";margin:0;}\narticle{background:var(--color-bg-card);margin-top:-36px;padding:44px 28px;border-radius:14px;box-shadow:0 2px 18px rgba(0,0,0,0.06);}\narticle p{margin:0 0 18px;}\nh2{font-size:28px;line-height:1.35;letter-spacing:-0.3px;margin:48px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--color-primary);}\nh2:first-of-type{margin-top:8px;}\nh3{font-size:21px;line-height:1.4;margin:30px 0 12px;color:var(--color-primary);}\ncode{background:#f1f5f9;color:#0f172a;padding:2px 6px;border-radius:4px;font-family:'SFMono-Regular',Menlo,Consolas,monospace;font-size:0.92em;}\npre{background:#0f172a;color:#e2e8f0;padding:18px 20px;border-radius:10px;overflow-x:auto;font-size:14.5px;line-height:1.65;margin:18px 0;}\npre code{background:transparent;color:inherit;padding:0;}\nul,ol{margin:0 0 18px;padding-left:24px;}\nli{margin-bottom:8px;}\nstrong{color:#0f172a;}\n.databox{background:#eff6ff;border-left:4px solid var(--color-primary);padding:18px 20px;border-radius:6px;margin:22px 0;}\n.databox p{margin:0 0 8px;}\n.databox p:last-child{margin:0;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-left:4px solid #d97706;padding:18px 20px;border-radius:6px;margin:22px 0;}\n.warnbox strong{color:#92400e;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n.cta{background:linear-gradient(135deg,#3178c6 0%,#60a5fa 100%);color:#fff;padding:30px 24px;border-radius:12px;margin-top:44px;text-align:center;}\n.cta h3{color:#fff;margin:0 0 10px;}\n.cta p{margin:0;color:#dbeafe;}\n.series-nav{background:#eff6ff;padding:18px 22px;border-radius:10px;margin-top:24px;font-size:14.5px;color:var(--color-text-muted);}\n.series-nav strong{color:var(--color-primary);}\n@media (max-width:480px){.hero{padding:52px 18px 44px;}.hero h1{font-size:26px;}.hero p.sub{font-size:15px;}article{padding:28px 18px;border-radius:10px;}h2{font-size:22px;}h3{font-size:18px;}body{font-size:16px;}pre{font-size:13px;padding:14px 16px;}}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#eff6ff;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 8\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\ud074\ub798\uc2a4 + \uc811\uadfc \uc81c\uc5b4\uc790 \u2014 public\u00b7private\u00b7protected<\/h1>\n  <p class=\"sub\">class \uc5d0 \ud0c0\uc785 \ubd99\uc774\uae30, \uc811\uadfc \uc81c\uc5b4, \uc0dd\uc131\uc790 \ub2e8\ucd95 \ubb38\ubc95, abstract, implements.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-56.jpg\" alt=\"TS \ud074\ub798\uc2a4\uc758 public\/private\/protected \uc811\uadfc \uc81c\uc5b4\uc790\uac00 \uc0c9\uc0c1\uc73c\ub85c \uad6c\ubd84\ub41c \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>JS \uc758 <code>class<\/code> \uc704\uc5d0 TS \uac00 \ucd94\uac00\ud558\ub294 \uac83\uc740 \ub450 \uac00\uc9c0 \u2014 <strong>\ud544\ub4dc\/\uba54\uc11c\ub4dc\uc5d0 \ud0c0\uc785<\/strong>, \uadf8\ub9ac\uace0 <strong>\uc811\uadfc \uc81c\uc5b4\uc790(public\/private\/protected)<\/strong>. \uadf8 \uc704\uc5d0 abstract, implements, \uc0dd\uc131\uc790 \ub2e8\ucd95 \uac19\uc740 \ud3b8\uc758 \ubb38\ubc95\uc774 \uc5b9\ud799\ub2c8\ub2e4. 8\ud3b8\uc740 OOP \uc0c9\uc774 \uc9c4\ud55c \ucf54\ub4dc\ub97c \ub2e4\ub8f0 \ub54c \ud544\uc694\ud55c \ubaa8\ub450\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uae30\ubcf8 \u2014 \ud544\ub4dc\uc640 \uba54\uc11c\ub4dc \ud0c0\uc785<\/h2>\n\n<pre><code>class User {\n  \/\/ \ud544\ub4dc \uc120\uc5b8 + \ud0c0\uc785\n  id: number;\n  name: string;\n  active: boolean = true;       \/\/ \uae30\ubcf8\uac12\n\n  \/\/ \uc0dd\uc131\uc790\n  constructor(id: number, name: string) {\n    this.id = id;\n    this.name = name;\n  }\n\n  \/\/ \uba54\uc11c\ub4dc\n  greet(): string {\n    return `Hi, ${this.name}!`;\n  }\n}\n\nconst u = new User(1, \"\uc900\uc131\");\nu.greet();              \/\/ \"Hi, \uc900\uc131!\"<\/code><\/pre>\n\n<h2>\uc0dd\uc131\uc790 \ub2e8\ucd95 \u2014 parameter properties<\/h2>\n\n<pre><code>\/\/ \uc704 \ucf54\ub4dc\ub97c \ud55c \ubc88\uc5d0 \u2014 \ub9e4\uac1c\ubcc0\uc218\uc5d0 \uc811\uadfc \uc81c\uc5b4\uc790\nclass User {\n  active: boolean = true;\n  constructor(public id: number, public name: string) {}\n  \/\/ \uc790\ub3d9\uc73c\ub85c this.id = id, this.name = name \ub428\n}\n\n\/\/ \ub354 \uc790\uc8fc \uc4f0\ub294 \ud328\ud134 \u2014 readonly \uc640 \ud568\uaed8\nclass User {\n  constructor(\n    public readonly id: number,\n    public name: string,\n    private password: string,\n  ) {}\n}<\/code><\/pre>\n\n<p>\uc77c\uc77c\uc774 <code>this.x = x<\/code> \uc548 \uc368\ub3c4 \ub418\ub2c8\uae4c \ud6e8\uc52c \uc9e7\uc544\uc9d1\ub2c8\ub2e4. TS-\ud2b9\uc720\uc758 \ubb38\ubc95\uc73c\ub85c, JS \ub9cc \uc4f0\ub294 \ucf54\ub4dc\uc5d0\uc11c\ub294 \uc548 \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n\n<h2>\uc811\uadfc \uc81c\uc5b4\uc790 \u2014 public\u00b7private\u00b7protected<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\uc81c\uc5b4\uc790<\/th><th>\uc811\uadfc \uac00\ub2a5 \uc704\uce58<\/th><th>\ub7f0\ud0c0\uc784 \uac15\uc81c<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\uc81c\uc5b4\uc790\">public (\uae30\ubcf8)<\/td><td data-label=\"\uc704\uce58\">\uc5b4\ub514\uc11c\ub098<\/td><td data-label=\"\ub7f0\ud0c0\uc784\">\u2014<\/td><\/tr>\n    <tr><td data-label=\"\uc81c\uc5b4\uc790\">private<\/td><td data-label=\"\uc704\uce58\">\uac19\uc740 \ud074\ub798\uc2a4 \uc548\uc5d0\uc11c\ub9cc<\/td><td data-label=\"\ub7f0\ud0c0\uc784\">\ucef4\ud30c\uc77c \uc2dc\uc810\ub9cc (TS)<\/td><\/tr>\n    <tr><td data-label=\"\uc81c\uc5b4\uc790\">protected<\/td><td data-label=\"\uc704\uce58\">\uc790\uc2e0 + \uc790\uc2dd \ud074\ub798\uc2a4<\/td><td data-label=\"\ub7f0\ud0c0\uc784\">\ucef4\ud30c\uc77c \uc2dc\uc810\ub9cc (TS)<\/td><\/tr>\n    <tr><td data-label=\"\uc81c\uc5b4\uc790\">#field (ES2022)<\/td><td data-label=\"\uc704\uce58\">\uac19\uc740 \ud074\ub798\uc2a4 \uc548\uc5d0\uc11c\ub9cc<\/td><td data-label=\"\ub7f0\ud0c0\uc784\">\uc608 (JS \ud45c\uc900)<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<pre><code>class Account {\n  public balance: number = 0;          \/\/ \uc678\ubd80 \uc811\uadfc OK\n  private secret: string = \"...\";      \/\/ \ub0b4\ubd80\ub9cc\n  protected log() { ... }              \/\/ \uc790\uc2e0\/\uc790\uc2dd\ub9cc\n\n  \/\/ ES2022 \ud45c\uc900 \u2014 \uc9c4\uc9dc private (\ub7f0\ud0c0\uc784 \uac15\uc81c)\n  #pin: string = \"1234\";\n}\n\nconst a = new Account();\na.balance;        \/\/ OK\na.secret;         \/\/ \u274c TS \ucef4\ud30c\uc77c \uc5d0\ub7ec (\ub7f0\ud0c0\uc784\uc5d0\ub294 \ub3d9\uc791)\na.#pin;           \/\/ \u274c SyntaxError (\ub7f0\ud0c0\uc784 \uac15\uc81c)<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>TS private \uc758 \ud55c\uacc4.<\/strong> TS \uc758 <code>private<\/code> \ub294 \ucef4\ud30c\uc77c \uc2dc\uc810\uc5d0\ub9cc \uccb4\ud06c\ub429\ub2c8\ub2e4. \ub7f0\ud0c0\uc784\uc5d0\ub294 \uc77c\ubc18 \uc18d\uc131 \u2014 <code>a[\"secret\"]<\/code> \uac19\uc740 \uc6b0\ud68c \uc811\uadfc \uac00\ub2a5. \uc9c4\uc9dc \ube44\uacf5\uac1c\uac00 \ud544\uc694\ud558\uba74 ES2022 \uc758 <code>#field<\/code> (\ud574\uc2dc \ud504\ub9ac\ud53d\uc2a4) \ub97c \uc4f0\uc138\uc694. \ub2e8, IE \ub4f1 \uc61b \ud658\uacbd\uc740 \ubbf8\uc9c0\uc6d0.<\/p>\n<\/div>\n\n<h2>\uc0c1\uc18d \u2014 extends \uc640 super<\/h2>\n\n<pre><code>class Animal {\n  constructor(public name: string) {}\n  speak(): string { return \"...\"; }\n}\n\nclass Dog extends Animal {\n  constructor(name: string, public breed: string) {\n    super(name);                       \/\/ \ubd80\ubaa8 \uc0dd\uc131\uc790 \ud638\ucd9c \ud544\uc218\n  }\n  speak(): string {                    \/\/ \uc624\ubc84\ub77c\uc774\ub4dc\n    return `${this.name} \uc9d6\uae30!`;\n  }\n}\n\nconst d = new Dog(\"\ucd08\ucf54\", \"\ub9ac\ud2b8\ub9ac\ubc84\");\nd.speak();         \/\/ \"\ucd08\ucf54 \uc9d6\uae30!\"\n\n\/\/ override \ud0a4\uc6cc\ub4dc (5.0+ noImplicitOverride \uad8c\uc7a5)\nclass Cat extends Animal {\n  override speak(): string {\n    return `${this.name} \uc57c\uc639`;\n  }\n}<\/code><\/pre>\n\n<h2>abstract \u2014 \uc9c1\uc811 \uc778\uc2a4\ud134\uc2a4\ud654 \ubabb\ud558\ub294 \ubca0\uc774\uc2a4<\/h2>\n\n<pre><code>abstract class Shape {\n  abstract area(): number;             \/\/ \uc790\uc2dd\uc774 \ubc18\ub4dc\uc2dc \uad6c\ud604\n\n  \/\/ \uacf5\ud1b5 \uba54\uc11c\ub4dc\ub294 \uadf8\ub300\ub85c \uac00\uc9d0\n  describe(): string {\n    return `\uba74\uc801 ${this.area()}`;\n  }\n}\n\nclass Circle extends Shape {\n  constructor(public radius: number) { super(); }\n  area(): number { return Math.PI * this.radius ** 2; }\n}\n\nnew Shape();          \/\/ \u274c Cannot create an instance of an abstract class\nnew Circle(5);        \/\/ OK<\/code><\/pre>\n\n<h2>implements \u2014 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\uc871\ud558\ub294 \ud074\ub798\uc2a4<\/h2>\n\n<pre><code>interface Comparable&lt;T&gt; {\n  compareTo(other: T): number;\n}\n\nclass Version implements Comparable&lt;Version&gt; {\n  constructor(public major: number, public minor: number) {}\n  compareTo(other: Version): number {\n    return this.major - other.major || this.minor - other.minor;\n  }\n}<\/code><\/pre>\n\n<p><code>implements<\/code> \ub294 &#8220;\uc774 \ubaa8\uc591\uc744 \ubc18\ub4dc\uc2dc \uac00\uc838\uc57c&#8221; \ub77c\ub294 \uac15\uc81c. \uc778\ud130\ud398\uc774\uc2a4 \uc790\uccb4\ub294 \ub7f0\ud0c0\uc784\uc5d0 \uc0ac\ub77c\uc9c0\ubbc0\ub85c \ubd80\ud558 0. \uc5ec\ub7ec \uc778\ud130\ud398\uc774\uc2a4\ub97c implements \ub3c4 \uac00\ub2a5: <code>class X implements A, B, C<\/code>.<\/p>\n\n<h2>readonly \u00b7 getter\/setter<\/h2>\n\n<pre><code>class Config {\n  readonly version: string = \"1.0\";    \/\/ \ud55c \ubc88 \uc815\ud574\uc9c0\uba74 \ubcc0\uacbd \uae08\uc9c0\n\n  \/\/ \uc815\uc801\n  static readonly MAX_RETRY = 3;\n\n  \/\/ getter\/setter\n  private _name: string = \"\";\n  get name(): string { return this._name; }\n  set name(v: string) {\n    if (!v) throw new Error(\"name \ube44\uc6b8 \uc218 \uc5c6\uc74c\");\n    this._name = v;\n  }\n}<\/code><\/pre>\n\n<h2>\ud074\ub798\uc2a4 vs \ud568\uc218 + \uac1d\uccb4 \u2014 \uc5b8\uc81c \ud074\ub798\uc2a4?<\/h2>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804 \uac00\uc774\ub4dc.<\/strong> \ub2e4\uc74c \uc911 <strong>2\uac1c \uc774\uc0c1 \ud574\ub2f9<\/strong>\ud558\uba74 \ud074\ub798\uc2a4, \uc544\ub2c8\uba74 \ud568\uc218 + \uac1d\uccb4:<\/p>\n  <p>\u00b7 \uc0c1\ud0dc(\ud544\ub4dc) \uac00 \uc788\ub2e4.<\/p>\n  <p>\u00b7 \uac19\uc740 \ubaa8\uc591\uc758 \uc778\uc2a4\ud134\uc2a4\uac00 \uc5ec\ub7ec \uac1c \ub9cc\ub4e4\uc5b4\uc9c4\ub2e4.<\/p>\n  <p>\u00b7 \uc0c1\uc18d\u00b7\ub2e4\ud615\uc131\uc774 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n  <p>\u00b7 implements \ub85c \uc778\ud130\ud398\uc774\uc2a4 \uac15\uc81c\uac00 \uc758\ubbf8 \uc788\ub2e4.<\/p>\n  <p>\ud55c \uac00\uc9c0\ub9cc \ud574\ub2f9\ud558\uba74 \ud568\uc218 + \ud074\ub85c\uc800 + \uac1d\uccb4 \ub9ac\ud130\ub7f4 \uc870\ud569\uc774 \ub354 \uac00\ubccd\uc2b5\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>9\ud3b8 \u2014 \ubaa8\ub4c8 \uc2dc\uc2a4\ud15c<\/h3>\n  <p>ESM \/ CJS, import\u00b7export, declaration \ud30c\uc77c\uacfc paths \uc635\uc158.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 7\ud3b8 enum \u00b7 \ud604\uc7ac: <strong>8\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 9\ud3b8 \ubaa8\ub4c8 \u00b7 \uc9c4\ud589: <strong>8\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>class \ud0c0\uc785 + public\/private\/protected\u00b7abstract\u00b7implements. 20\ud3b8 \uad50\uc7ac 8\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":276,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=492"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/276"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}