<?xml version="1.0" encoding="utf-8"?><rss version="2.0"><channel><title>การใช้งาน PHP Ionic Angular NodeJs JavaScript Ajax CSS jQuery MySQL</title><link>http://www.ninenik.com</link><description>คอร์สเรียน เรียนฟรี ออนไลน์ บทความ การใช้งาน PHP Ionic Angular NodeJs JavaScript Ajax CSS jQuery MySQL การ กำหนด รูปแบบ ตัวอย่าง คือ การใช้งาน หมายถึง วิธีการ การแสดง ด้วย คำสั่ง</description><language>th-TH</language><lastBuildDate>Wed, 15 Apr 2026 05:02:41 +0700</lastBuildDate><copyright>Copyright ninenik.com</copyright><image><title>การใช้งาน PHP Ionic Angular NodeJs JavaScript Ajax CSS jQuery MySQL</title><url>http://www.ninenik.com/images/logo_ninenik.gif</url><link>http://www.ninenik.com</link></image><item><title>การใช้งาน HTTP Server และ HTTP Client ใน TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_HTTP_Server_และ_HTTP_Client_ใน_TypeScript_เบื้องต้น-1149.html</link><description><![CDATA[<p data-path-to-node="0">
	ในการใช้งาน <b>HTTP Server</b> และ <b>HTTP Client</b> นั้น TypeScript ไม่ได้มีไลบรารี Core Library แบบรวมศูนย์เหมือน <code>dart:io</code> แต่การทำงานจะขึ้นอยู่กับสภาพแวดล้อมที่โค้ดรัน:</p>
<ol data-path-to-node="1" start="1">
	<li>
		<p data-path-to-node="1,0,0">
			<b>Client:</b> ใช้ <b>Fetch API</b> (มาตรฐาน Web/Node.js)</p>
	</li>
	<li>
		<p data-path-to-node="1,1,0">
			<b>Server:</b> ใช้ <b>Node.js <code>http</code> Module</b> (หรือ Frameworks เช่น Express)</p>
	</li>
</ol>
<p data-path-to-node="2">
	บทความนี้จะแสดงวิธีจัดการทั้ง Client และ Server ในบริบทของ TypeScript โดยเน้นที่ความปลอดภัยของชนิดข้อมูล (Type Safety)<br />
	&nbsp;</p>
<h2>
	1. HTTP Client: การเรียกใช้งาน API (Using <code>fetch</code>)</h2>
<p>
	&nbsp;</p>
<p data-path-to-node="5">
	ในฐานะ Client (เช่น ในเบราว์เซอร์หรือ Node.js environment) TypeScript/JavaScript ใช้ <b>Fetch API</b> ซึ่งเป็น Global Function ในการส่ง HTTP Request</p>
<p data-path-to-node="6">
	&nbsp;</p>
<h4>
	A. การกำหนดชนิดข้อมูล (Type Safety)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="7">
	เราใช้ <b><code>interface</code></b> เพื่อกำหนดโครงสร้างของข้อมูลที่จะได้รับกลับมา (Response Body) ซึ่งเป็นหัวใจสำคัญของ TypeScript ในการจัดการ API</p>
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-442 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQlwY" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_6c0e8dd6d698ad20&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_49160ec8e3e75bf0&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-442 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-442">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// กำหนดโครงสร้างข้อมูลที่คาดหวังจาก API
interface Post {
    userId: number;
    id: number;
    title: string;
    body: string;
}

// กำหนด Generic Function เพื่อให้รับส่งข้อมูลที่มี Type
async function fetchApi&lt;T&gt;(url: string, method: string = &#39;GET&#39;): Promise&lt;T&gt; {
    const response = await fetch(url, { method });

    if (!response.ok) {
        throw new Error(`HTTP Error! Status: ${response.status}`);
    }

    // แปลง Response เป็น JSON และระบุชนิดข้อมูลด้วย &lt;T&gt;
    return response.json() as T;
}</pre>
	</div>
</div>
<p data-path-to-node="9">
	&nbsp;</p>
<h4>
	B. ตัวอย่างการใช้งาน GET และ POST</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="10">
	เราใช้ <code>async/await</code> ร่วมกับ <code>fetch</code> เพื่อให้โค้ดมีความอ่านง่ายและเป็นลำดับ</p>
<p data-path-to-node="2">
	<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-442 ng-star-inserted"></code-block></response-element><response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-443 ng-star-inserted"></code-block></response-element></p>
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-443 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQmAY" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_6c0e8dd6d698ad20&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_49160ec8e3e75bf0&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-443 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-443">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
async function getPostExample() {
    try {
        // ใช้ &lt;Post&gt; เพื่อระบุชนิดข้อมูลที่คาดหวัง
        const post: Post = await fetchApi&lt;Post&gt;(&#39;https://jsonplaceholder.typicode.com/posts/1&#39;);
        
        console.log(`Title: ${post.title}`); // TypeScript รู้จัก post.title
    } catch (error) {
        console.error(&quot;Fetch failed:&quot;, error);
    }
}

async function createPostExample() {
    const newPost = {
        title: &#39;New TS Post&#39;,
        body: &#39;This is body&#39;,
        userId: 1,
    };

    const response = await fetch(&#39;https://jsonplaceholder.typicode.com/posts&#39;, {
        method: &#39;POST&#39;,
        headers: {
            &#39;Content-Type&#39;: &#39;application/json&#39;,
        },
        body: JSON.stringify(newPost), // แปลง Object เป็น JSON String
    });

    const createdPost: Post = await response.json();
    console.log(`Created ID: ${createdPost.id}`);
}</pre>
	</div>
</div>
<h2>
	2. HTTP Server: การสร้าง Web Server (Using Node.js)</h2>
<p>
	&nbsp;</p>
<p data-path-to-node="14">
	สำหรับการสร้าง HTTP Server ใน TypeScript จะใช้ Module หลักของ <b>Node.js</b> ที่ชื่อว่า <b><code>node:http</code></b> ซึ่งจำเป็นต้องมีการ <code>import</code> ก่อนใช้งาน</p>
<p data-path-to-node="15">
	&nbsp;</p>
<h4>
	A. การสร้าง Server</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="16">
	เราใช้เมธอด <b><code>http.createServer()</code></b> ที่รับ Callback Function ที่มีพารามิเตอร์ <code>req</code> (Request) และ <code>res</code> (Response)</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-444 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-444 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQmQY" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_6c0e8dd6d698ad20&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_49160ec8e3e75bf0&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-444 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-444">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ต้องติดตั้ง @types/node ก่อน: npm install @types/node
import * as http from &#39;node:http&#39;; 
import { IncomingMessage, ServerResponse } from &#39;node:http&#39;; // Import Types

const hostname: string = &#39;127.0.0.1&#39;;
const port: number = 3000;

// กำหนดชนิดข้อมูลให้กับ req และ res เพื่อให้ TypeScript ช่วยตรวจสอบ
const server = http.createServer((req: IncomingMessage, res: ServerResponse) =&gt; {
    // 1. การกำหนด HTTP Status Code
    res.statusCode = 200; 

    // 2. การกำหนด Header
    res.setHeader(&#39;Content-Type&#39;, &#39;application/json&#39;); 

    // 3. การจัดการ Routing (อย่างง่าย)
    if (req.url === &#39;/hello&#39; &amp;&amp; req.method === &#39;GET&#39;) {
        const data = { message: &#39;Hello from TypeScript Node.js Server!&#39; };
        res.end(JSON.stringify(data)); // ส่ง Response กลับ
    } else {
        res.statusCode = 404;
        res.end(JSON.stringify({ error: &#39;Not Found&#39; }));
    }
});

// การเริ่มฟัง (Listen)
server.listen(port, hostname, () =&gt; {
    console.log(`Server running at http://${hostname}:${port}/`);
});</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Fri, 28 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน JSON String Data ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_JSON_String_Data_ในภาษา_TypeScript_เบื้องต้น-1148.html</link><description><![CDATA[<p data-path-to-node="4">
	<b>JSON (JavaScript Object Notation)</b> เป็นรูปแบบข้อมูลมาตรฐานที่ใช้สำหรับการแลกเปลี่ยนข้อมูลระหว่าง Client (เช่น Web/Mobile App) และ Server ข้อมูล JSON เป็นเพียง Text String ที่มีโครงสร้างแบบ Object หรือ Array</p>
<p data-path-to-node="5">
	ใน TypeScript การจัดการ JSON ทำได้ง่าย เนื่องจากมีฟังก์ชัน <b>Global</b> ที่รองรับการทำงานนี้โดยตรง</p>
<p data-path-to-node="6">
	&nbsp;</p>
<h3>
	1. การแปลงข้อมูลพื้นฐาน (Parsing &amp; Stringifying)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="7">
	TypeScript/JavaScript ใช้ Global Object ที่ชื่อว่า <b><code>JSON</code></b> ในการแปลงข้อมูล</p>
<p data-path-to-node="8">
	&nbsp;</p>
<h4>
	A. JSON Decoding: แปลง String เป็น Object</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="9">
	ใช้ฟังก์ชัน <b><code>JSON.parse()</code></b> เพื่อแปลง JSON String ที่ได้รับมาให้เป็น Object ที่สามารถเรียกใช้งานได้</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-419 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-419 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ9AU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-419 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-419">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// 1. JSON String Data ที่ได้รับจาก Server
const jsonString: string = `
    [
        { &quot;score&quot;: 40, &quot;overtime&quot;: false },
        { &quot;score&quot;: 80, &quot;overtime&quot;: true }
    ]
`;

// 2. แปลง JSON String ให้เป็น Object (Array of Objects)
const scores = JSON.parse(jsonString);

// scores จะถูกอนุมานชนิดเป็น Array of any (any[])
console.log(scores.length); // 2
console.log(`First score is ${scores[0].score}`); // First score is 40</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="11">
	&nbsp;</p>
<h4>
	B. JSON Encoding: แปลง Object เป็น String</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="12">
	ใช้ฟังก์ชัน <b><code>JSON.stringify()</code></b> เพื่อแปลง TypeScript Object ให้เป็น JSON String สำหรับส่งไปยัง Server</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-420 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-420 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ9QU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-420 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-420">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Object หรือ Array ที่ต้องการแปลง
const scores = [
    { score: 40 },
    { score: 80, overtime: true, specialGuest: null } // รองรับ null, boolean
];

// แปลง Object ให้เป็น JSON String
const jsonText: string = JSON.stringify(scores);

console.log(typeof jsonText); // string
// Output: [{&quot;score&quot;:40},{&quot;score&quot;:80,&quot;overtime&quot;:true,&quot;specialGuest&quot;:null}]</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="14" />
<p data-path-to-node="15">
	&nbsp;</p>
<h3>
	2. การสร้าง Model เพื่อความปลอดภัยของชนิดข้อมูล (Type Safety)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="16">
	ความท้าทายหลักใน TypeScript คือการทำให้ข้อมูล JSON ที่ถูก <code>JSON.parse()</code> กลายเป็น <b>Object ที่มีชนิดข้อมูลที่ชัดเจน (Strongly-Typed)</b> เราใช้ <b>Interface</b> หรือ <b>Class</b> ในการกำหนดโครงสร้าง (Model)</p>
<p data-path-to-node="17">
	&nbsp;</p>
<h4>
	A. การกำหนด Model ด้วย Interface</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="18">
	Interface เป็นวิธีที่ง่ายที่สุดในการกำหนดโครงสร้างข้อมูล JSON:</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-421 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-421 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ9gU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-421 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-421">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Interface สำหรับโครงสร้างข้อมูล
interface Address {
    street: string;
    city: string;
}

interface User {
    firstName: string;
    address: Address; // ใช้ Interface ที่ซ้อนกัน
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="20">
	เมื่อได้รับ JSON String มาแล้ว เราสามารถประกาศตัวแปรให้เป็นชนิด <code>User</code> ได้ แต่ต้องแน่ใจว่าโครงสร้างตรงกัน:</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-422 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-422 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ9wU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-422 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-422">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
const jsonString = &#39;{&quot;firstName&quot;:&quot;Ebiwayo&quot;,&quot;address&quot;:{&quot;street&quot;:&quot;My Str.&quot;,&quot;city&quot;:&quot;New York&quot;}}&#39;;

// ประกาศตัวแปรเป็นชนิด User หลังจาก parse
const user: User = JSON.parse(jsonString); 

console.log(user.address.city); // New York</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="22">
	&nbsp;</p>
<h4>
	B. การแปลงเป็น Class Object ด้วย Factory Method</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="23">
	สำหรับการทำงานที่ซับซ้อนขึ้น (เช่น ต้องมี Methods ภายใน Object) เราจะใช้ <b>Class</b> และสร้าง <b>Static Factory Method</b> ที่ชื่อว่า <code>fromJson</code> เพื่อแปลงข้อมูล <code>Map</code> (หรือ Object) ที่ได้จากการ <code>parse</code> ให้เป็น Instance ของ Class</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-423 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-423 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ-AU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-423 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-423">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class User {
    constructor(
        public firstName: string, 
        public address: Address // ใช้ Interface เป็นชนิดข้อมูล
    ) {}

    // Static Factory Method: ใช้รับ Object ที่ถูกแปลงมาแล้ว (JSON Object)
    static fromJson(json: { [key: string]: any }): User {
        // ตรวจสอบและแปลงข้อมูล Address ที่ซ้อนกัน
        const addressData = json[&#39;address&#39;];
        const address = new Address(addressData.street, addressData.city);
        
        return new User(json[&#39;firstName&#39;], address);
    }
    
    // Method สำหรับแปลงกลับไปเป็น JSON-ready Object (ถ้าต้องการ)
    public toJson(): any {
        return {
            firstName: this.firstName,
            address: this.address
        };
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="25" />
<p data-path-to-node="26">
	&nbsp;</p>
<h3>
	3. การจัดการ JSON Array (List of Objects)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="27">
	เมื่อข้อมูล JSON มาในรูปแบบ Array (หลายรายการ) เราต้องใช้ฟังก์ชัน <b><code>.map()</code></b> ของ Array ในการวนซ้ำเพื่อแปลง Object ทีละตัวให้เป็น Instance ของ Model Class</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-424 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-424 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ-QU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_485936bc05371c95&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5caf1096998e1534&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-424 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-424">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
const jsonArray = `[
    { &quot;firstName&quot;: &quot;Alice&quot;, &quot;address&quot;: {...} },
    { &quot;firstName&quot;: &quot;Bob&quot;, &quot;address&quot;: {...} }
]`;

// 1. แปลง JSON String เป็น Array of generic objects
const jsonObjects: any[] = JSON.parse(jsonArray);

// 2. ใช้ .map() เพื่อแปลง Array of any เป็น Array of User (User[])
const userList: User[] = jsonObjects.map(obj =&gt; User.fromJson(obj));

console.log(userList[0].firstName); // Alice
console.log(userList.length);       // 2</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="29">
	<p data-path-to-node="29,0">
		<b>ข้อแตกต่างจาก Dart:</b> TypeScript <b>ไม่มีระบบ Code Generation</b> อย่าง <code>json_serializable</code> ที่ทำงานในขั้นตอน Build Time โดยตรง สำหรับงานซับซ้อน นักพัฒนา TS อาจใช้ไลบรารี Runtime เช่น <code>class-transformer</code> เพื่อทำหน้าที่แปลงข้อมูล Object อัตโนมัติ แต่โดยทั่วไปการใช้ <b>Interfaces</b> และ <b>Static Factory Methods</b> ถือเป็นวิธีมาตรฐานและเพียงพอต่อการทำ Type Safety ในโค้ดพื้นฐาน</p>
</blockquote>
]]></description><pubDate>Thu, 27 Nov 2025 08:00:00 +0700</pubDate></item><item><title>ข้อมูล Stream: การสร้างและการใช้งานข้อมูลแบบต่อเนื่องใน TypeScript</title><link>https://www.ninenik.com/ข้อมูล_Stream:_การสร้างและการใช้งานข้อมูลแบบต่อเนื่องใน_TypeScript-1147.html</link><description><![CDATA[<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript/JavaScript ข้อมูลแบบ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Stream</b> หรือ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Asynchronous Sequence</b> คือชุดของค่าที่จะถูกส่งออกมาเมื่อเวลาผ่านไป (Events over time) คล้ายกับการดูวิดีโอ Live หรือการรอรับข้อมูลจากเครือข่าย</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. ประเภทและแนวคิดของ Stream</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	แนวคิดของ Stream ใน TS/JS ถูกแบ่งออกตามลักษณะการทำงาน โดยมีแนวคิดเทียบเคียงกับ Dart ดังนี้:</p>
<table data-path-to-node="7" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Dart Stream</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">TypeScript/RxJS Equivalent</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ลักษณะการทำงาน</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="7,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Single Subscription</b></td>
			<td data-path-to-node="7,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Cold Observable</b></td>
			<td data-path-to-node="7,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ข้อมูลจะถูกส่งออกมาใหม่ทุกครั้งที่มีผู้เริ่มฟัง (Listener) มักใช้ในการอ่านไฟล์หรือทำ HTTP Request เพียงครั้งเดียว</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="7,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Broadcast Stream</b></td>
			<td data-path-to-node="7,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Hot Observable/Subject</b></td>
			<td data-path-to-node="7,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ข้อมูลจะถูกส่งออกมาอย่างต่อเนื่อง โดยผู้ฟัง (Listener) คนใดเข้ามาฟัง ณ เวลาใด ก็จะได้รับข้อมูลที่ส่งออกมา ณ เวลานั้น ๆ (เช่น Mouse Events, Live Data)</td>
		</tr>
	</tbody>
</table>
<hr data-path-to-node="8" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การสร้าง Stream ด้วย Async Generator</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Async Generator</b> เป็นคุณสมบัติของภาษา TypeScript/JavaScript ที่เป็นรูปแบบที่ใกล้เคียงกับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async*</code> และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">yield</code> ใน Dart มากที่สุด ใช้สำหรับสร้าง Stream แบบ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Async Iterable</b> ที่ผู้ใช้งานสามารถดึงข้อมูลออกมาได้ทีละส่วน (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">pull</code> stream)</p>
<p data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การกำหนด Async Generator</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">async function*</b> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">yield</b> ในการส่งค่าแต่ละชุดออกมา:</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-387 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-387 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQwAU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_81e40153b9b92a2e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7c8296c3653f59e9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-387 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-387" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันสร้าง Stream ของข้อความ 5 บรรทัด
async function* generateLines(to: number): AsyncIterable&lt;string&gt; {
    for (let i = 1; i &lt;= to; i++) {
        // yield จะส่งค่าออกมาทีละชุด แล้วหยุดรอการเรียกครั้งถัดไป
        yield `This is Line ${i}`; 
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การติดตาม Stream ด้วย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">for await...of</code></h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้คำสั่ง <b style="line-height: 1.15 !important; margin-top: 0px !important;">for await...of</b> เพื่อวนลูปและรอรับค่าจาก Async Iterable ทีละค่า จนกว่า Stream จะสิ้นสุด (Complete)</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-388 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-388 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQwQU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_81e40153b9b92a2e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7c8296c3653f59e9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-388 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-388" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
async function processStream() {
    const stream = generateLines(3);
    
    // for await...of จะหยุดรอจนกว่า yield จะส่งค่าออกมา
    for await (const line of stream) {
        console.log(line);
    }
    console.log(&#39;Stream completed.&#39;);
}

processStream();
// Output: 
// This is Line 1
// This is Line 2
// This is Line 3
// Stream completed.</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. การสร้างและจัดการ Stream ด้วย Observables (RxJS)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	สำหรับงานที่ซับซ้อน เช่น การจัดการเหตุการณ์ (Events), การรวม Stream, และการควบคุม Flow ของข้อมูล <b style="line-height: 1.15 !important; margin-top: 0px !important;">ไลบรารี RxJS</b> ที่ใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Observable</b> คือเครื่องมือหลักในโลก TypeScript</p>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การสร้าง Observable (Source)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	แทนที่จะใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">StreamController</code> ใน Dart เราใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Observable</code> หรือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Subject</code> ใน RxJS เพื่อสร้างแหล่งกำเนิดข้อมูล:</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-389 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-389 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQwgU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_81e40153b9b92a2e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7c8296c3653f59e9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-389 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-389" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
import { Observable, Subject } from &#39;rxjs&#39;; // ต้องมีการติดตั้ง RxJS

// 1. สร้าง Subject (Hot Observable/Broadcast Stream)
const mySubject = new Subject&lt;number&gt;();

// 2. ส่งข้อมูล (Pushing Events)
mySubject.next(1); // ข้อมูลถูกส่งออกมาทันที

// 3. Subscription (การฟัง)
mySubject.subscribe(value =&gt; {
    console.log(`Listener A: ${value}`);
});

mySubject.next(2); // ผู้ฟัง A จะได้รับค่า 2
mySubject.next(3); // ผู้ฟัง A จะได้รับค่า 3

mySubject.subscribe(value =&gt; {
    console.log(`Listener B: ${value}`);
});

mySubject.next(4); 
// Listener A: 4
// Listener B: 4</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การติดตาม Stream ด้วย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">.subscribe()</code></h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เทียบเท่ากับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">.listen()</code> ใน Dart โดย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">subscribe()</code> จะรับ Callback Functions 3 ตัว:</p>
<ol data-path-to-node="25" start="1" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="25,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">onNext</code> (onData):</b> สำหรับรับข้อมูลแต่ละชุด</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="25,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">onError</code> (onError):</b> สำหรับจัดการข้อผิดพลาด</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="25,2,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">onComplete</code> (onDone):</b> สำหรับทำงานเมื่อ Stream เสร็จสิ้น</p>
	</li>
</ol>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-390 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-390 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQwwU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_81e40153b9b92a2e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7c8296c3653f59e9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-390 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-390" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// สมมติ myObservable คือ Observable&lt;string&gt; ที่ถูกสร้างไว้
const subscription = mySubject.subscribe({
    next: (data) =&gt; console.log(&#39;Data:&#39;, data), // เมื่อมีข้อมูลมา
    error: (err) =&gt; console.error(&#39;Error:&#39;, err), // เมื่อเกิดข้อผิดพลาด
    complete: () =&gt; console.log(&#39;Done.&#39;), // เมื่อ Stream เสร็จสิ้น
});

// การยกเลิก Stream (คล้าย StreamSubscription)
subscription.unsubscribe();</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	C. การแปลงข้อมูลด้วย Operators (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">transform</code> Equivalent)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="28" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน RxJS เราใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Operators</b> (เช่น <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">map</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">filter</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">scan</code>) ผ่าน Method <b style="line-height: 1.15 !important; margin-top: 0px !important;">.pipe()</b> เพื่อแปลงและจัดการข้อมูล Stream อย่างมีประสิทธิภาพ</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-391 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-391 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQxAU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_81e40153b9b92a2e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7c8296c3653f59e9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-391 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-391" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
import { of } from &#39;rxjs&#39;;
import { map, filter } from &#39;rxjs/operators&#39;;

of(1, 2, 3, 4, 5) // สร้าง Observable จากค่า [1, 2, 3, 4, 5]
    .pipe(
        // 1. Filter: กรองเฉพาะเลขคู่เท่านั้น
        filter(value =&gt; value % 2 === 0), 
        // 2. Map: แปลงค่าเป็นข้อความ
        map(value =&gt; `Number is ${value}`) 
    )
    .subscribe(result =&gt; console.log(result)); 
// Output:
// Number is 2
// Number is 4</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Wed, 26 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Standard Library และ Global Objects ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_Standard_Library_และ_Global_Objects_ในภาษา_TypeScript_เบื้องต้น-1146.html</link><description><![CDATA[<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript &quot;Core Library&quot; เทียบได้กับ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Standard Built-in Objects</b> ของ ECMAScript (JavaScript) ซึ่งมีให้ใช้งานทันทีในทุกสภาพแวดล้อม (เช่น เบราว์เซอร์ หรือ Node.js) โดยไม่จำเป็นต้องใช้คำสั่ง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">import</code> ใด ๆ</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. การจัดการ Module และการ Output</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การใช้งาน Module (Imports)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในขณะที่ Dart ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">import &#39;dart:math&#39;;</code> สำหรับ Core Library, TypeScript/JavaScript ใช้คำสั่ง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">import</code> เฉพาะกับ <b style="line-height: 1.15 !important; margin-top: 0px !important;">External Modules</b> หรือ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Files</b> ที่เราสร้างขึ้นเท่านั้น</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-356 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-356 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQggU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-356 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-356" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// การ import ไฟล์หรือ Module ภายนอกเท่านั้น
import { MyClass } from &#39;./my_module&#39;;
import * as MathUtils from &#39;lodash&#39;; // ตัวอย่าง External Package</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การแสดงข้อความทาง Console</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	แทนที่จะใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">print()</code> เหมือน Dart ใน TypeScript/JavaScript จะใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">console.log()</b> และสามารถใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">console.error()</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">console.warn()</code> ได้ด้วย</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-357 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-357 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQgwU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-357 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-357" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let myStr: string = &quot;Hello TS&quot;;
let obj: any; // ค่าเริ่มต้นคือ undefined (ไม่ใช้ null เหมือน Dart)

console.log(myStr);          // Hello TS
console.log(typeof myStr);   // string (ใช้ typeof แทน runtimeType สำหรับ primitive)
console.log(typeof obj);     // undefined</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การจัดการตัวเลข (Number)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript มีชนิดข้อมูลตัวเลขเพียงชนิดเดียวคือ <b style="line-height: 1.15 !important; margin-top: 0px !important;">number</b> (รวมทั้งเลขจำนวนเต็มและทศนิยม)</p>
<p data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การแปลงข้อความ (String) เป็นตัวเลข</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้ Global Function หรือ Object Methods ในการแปลงข้อความ (String) เป็นตัวเลข:</p>
<table data-path-to-node="17" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">การทำงาน</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Dart</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">TypeScript/JavaScript</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				แปลงเป็นจำนวนเต็ม</td>
			<td data-path-to-node="17,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">int.parse(str)</code></td>
			<td data-path-to-node="17,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">parseInt(str, radix)</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				แปลงเป็นทศนิยม</td>
			<td data-path-to-node="17,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">double.parse(str)</code></td>
			<td data-path-to-node="17,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">parseFloat(str)</b></td>
		</tr>
	</tbody>
</table>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-358 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-358 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQhwU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-358 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-358" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let a: string = &quot;37&quot;;
let hexValue: string = &quot;42&quot;; // 42 ในเลขฐาน 16

console.log(parseInt(a));          // 37 (ชนิด number)
console.log(parseInt(hexValue, 16)); // 66 (ระบุฐาน 16 ด้วย radix)
console.log(parseFloat(&quot;42.1&quot;));   // 42.1</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การแปลงตัวเลขกลับเป็นข้อความ (String)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<table data-path-to-node="20" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">การทำงาน</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Dart</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">TypeScript/JavaScript</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="20,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				แสดงทศนิยมตามจำนวน</td>
			<td data-path-to-node="20,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">toStringAsFixed(n)</code></td>
			<td data-path-to-node="20,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">toFixed(n)</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="20,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				แปลงเป็น String ธรรมดา</td>
			<td data-path-to-node="20,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">toString()</code></td>
			<td data-path-to-node="20,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">toString()</b></td>
		</tr>
	</tbody>
</table>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-359 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-359 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQiwU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-359 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-359" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let numA: number = 123.456;
let fixedStr: string = numA.toFixed(2); // String ทศนิยม 2 ตำแหน่ง

console.log(fixedStr); // &quot;123.46&quot; (มีการปัดเศษ)</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="22" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. การจัดการข้อความ (String) และ Regular Expression</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	String ใน TypeScript/JavaScript เป็น Object ที่มี Method ในการจัดการข้อความเหมือนกับ Dart</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-360 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-360 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQjAU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-360 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-360" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let title: string = &quot; ภาษา TypeScript เบื้องต้น &quot;;

console.log(title.trim());      // &quot;ภาษา TypeScript เบื้องต้น&quot; (ลบช่องว่างหัวท้าย)
console.log(title.trimStart()); // &quot;ภาษา TypeScript เบื้องต้น &quot;
console.log(title.trimEnd());   // &quot; ภาษา TypeScript เบื้องต้น&quot;

// การแทนที่ข้อความ (ไม่เปลี่ยน String เดิม แต่สร้าง String ใหม่)
let greetingTemplate = &#39;สวัสดี, NAME!&#39;;
let greeting = greetingTemplate.replace(new RegExp(&#39;NAME&#39;), &#39;Ebiwayo&#39;);
// หรือใช้ replaceAll สำหรับแทนที่ทั้งหมดที่ตรงกัน (ถ้ามีหลายตัว)

console.log(greeting); // สวัสดี, Ebiwayo!</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="26" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	4. การจัดการคอลเลกชัน (Collections)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="28" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. Array (เทียบเท่า Dart List)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="29" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้โครงสร้าง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">[]</code> หรือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Array&lt;Type&gt;</code></p>
<table data-path-to-node="30" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">การทำงาน</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Dart (List)</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">TypeScript (Array)</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="30,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				เพิ่มรายการ</td>
			<td data-path-to-node="30,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">list.add(value)</code></td>
			<td data-path-to-node="30,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">array.push(value)</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="30,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				เพิ่มหลายรายการ</td>
			<td data-path-to-node="30,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">list.addAll([v1, v2])</code></td>
			<td data-path-to-node="30,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">array.push(...[v1, v2])</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="30,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ลบรายการที่ Index</td>
			<td data-path-to-node="30,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">list.removeAt(index)</code></td>
			<td data-path-to-node="30,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">array.splice(index, 1)</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="30,4,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				หาจำนวน</td>
			<td data-path-to-node="30,4,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">list.length</code></td>
			<td data-path-to-node="30,4,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">array.length</b></td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="31" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. Set</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="32" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้คลาส <b style="line-height: 1.15 !important; margin-top: 0px !important;">Set</b> ในการเก็บกลุ่มข้อมูลที่ไม่ซ้ำกัน</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-361 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-361 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQkAU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-361 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-361" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let ingredients: Set&lt;string&gt; = new Set();
ingredients.add(&#39;gold&#39;);
ingredients.add(&#39;titanium&#39;);
ingredients.add(&#39;gold&#39;); // ไม่เพิ่มเพราะซ้ำ

console.log(ingredients.size); // 2 (ใช้ .size แทน .length)
console.log(ingredients.has(&#39;titanium&#39;)); // true (ใช้ .has() แทน .contains())

// การหาค่าที่ซ้ำกัน (Intersection) ต้องทำผ่านการแปลงเป็น Array
let nobleGases = new Set([&#39;xenon&#39;, &#39;argon&#39;, &#39;gold&#39;]);
let intersection = [...ingredients].filter(x =&gt; nobleGases.has(x));

console.log(intersection); // [&#39;gold&#39;]</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="34" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	C. Map</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="35" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้คลาส <b style="line-height: 1.15 !important; margin-top: 0px !important;">Map</b> ในการจัดเก็บข้อมูลแบบ Key-Value คู่กัน โดยสามารถกำหนดชนิดข้อมูลของ Key และ Value ได้อย่างชัดเจน</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-362 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-362 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQkQU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-362 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-362" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Map&lt;Key Type, Value Type&gt;
let searchTerms = new Map&lt;string, number&gt;();

searchTerms.set(&#39;Oahu&#39;, 1); // กำหนดค่า
searchTerms.set(&#39;Kauai&#39;, 2);

console.log(searchTerms.get(&#39;Kauai&#39;));      // 2
console.log(searchTerms.has(&#39;Kauai&#39;));      // true (ใช้ .has() แทน .containsKey())
searchTerms.delete(&#39;Kauai&#39;);               // ลบข้อมูล
console.log(searchTerms.has(&#39;Kauai&#39;));      // false</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="37" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="38" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	5. การจัดการ URI (URL Class)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="39" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	แทนที่จะใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Uri</code> Class เหมือนใน Dart ใน TypeScript/JavaScript (สภาพแวดล้อม Web/Node.js) จะใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">URL</code> Class</b> ซึ่งเป็น Global Object สำหรับจัดการที่อยู่เว็บ (URL)</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-363 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-363 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQkgU" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_bd0e37efa03ef8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_db5e0e5d40be95e7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-363 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-363" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// การสร้าง Object URL
const url = new URL(&#39;https://example.com:8080/path?query=1#hash&#39;);

console.log(url.hostname); // example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path
console.log(url.searchParams.get(&#39;query&#39;)); // 1</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Tue, 25 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การจัดการข้อผิดพลาด (Exception Handling) ในภาษา TypeScript</title><link>https://www.ninenik.com/การจัดการข้อผิดพลาด_(Exception_Handling)_ในภาษา_TypeScript-1145.html</link><description><![CDATA[<p data-path-to-node="3">
	ใน TypeScript การจัดการข้อผิดพลาด (หรือที่เรียกว่า <b>Errors</b>) เป็นกลไกที่ช่วยให้โปรแกรมทำงานต่อไปได้ แทนที่จะหยุดทำงานทันทีเมื่อเกิดปัญหาที่ไม่คาดคิด</p>
<p data-path-to-node="4">
	&nbsp;</p>
<h3>
	1. การกำหนดข้อผิดพลาดด้วย <code>throw</code></h3>
<p>
	&nbsp;</p>
<p data-path-to-node="5">
	ใน TypeScript การสร้างและส่งข้อผิดพลาดออกไปใช้คีย์เวิร์ด <b><code>throw</code></b> โดยข้อปฏิบัติที่ดีที่สุดคือการส่ง <b>Object</b> ที่สืบทอดมาจากคลาส <b><code>Error</code></b></p>
<p data-path-to-node="6">
	&nbsp;</p>
<h4>
	A. การสร้าง Custom Error</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="7">
	TS แนะนำให้สร้างคลาสข้อผิดพลาดเฉพาะเจาะจงโดยการ <b><code>extends Error</code></b> (เทียบเท่ากับการ <code>implements Exception</code> ใน Dart แต่เป็นมาตรฐานของ JS/TS)</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-323 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-323 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ0gQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-323 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-323">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Custom Error Class
class WithdrawError extends Error {
    constructor(message?: string) {
        super(message); // เรียก constructor ของ Error class
        this.name = &#39;WithdrawError&#39;; // กำหนดชื่อ Error (สำคัญในการระบุชนิด)
        // Object.setPrototypeOf(this, WithdrawError.prototype); // สำหรับ JS เก่า
    }
}

// การโยนข้อผิดพลาด (Throwing)
function checkWithdraw(deposit: number, withdraw: number): void {
    if (withdraw &gt; deposit) {
        // โยน Custom Error
        throw new WithdrawError(&#39;ยอดเงินไม่เพียงพอ&#39;); 
    }
    if (withdraw &lt;= 0) {
        // โยน Base Error
        throw new Error(&#39;ยอดเงินที่ต้องการถอนต้องมากกว่า 0&#39;); 
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="9">
	<p data-path-to-node="9,0">
		<b>ข้อควรจำ:</b> ใน TS/JS สามารถ <code>throw</code> ค่าพื้นฐาน (เช่น <code>throw &quot;String&quot;</code>) ได้ แต่ <b>ไม่ควรทำ</b> เพราะจะทำให้การตรวจสอบชนิดของข้อผิดพลาดทำได้ยาก</p>
</blockquote>
<hr data-path-to-node="10" />
<p data-path-to-node="11">
	&nbsp;</p>
<h3>
	2. การตรวจจับและจัดการด้วย <code>try...catch</code></h3>
<p>
	&nbsp;</p>
<p data-path-to-node="12">
	เราใช้บล็อก <b><code>try</code></b> เพื่อครอบโค้ดที่อาจเกิดข้อผิดพลาด และใช้ <b><code>catch</code></b> เพื่อจัดการข้อผิดพลาดที่ถูกโยนมา</p>
<p data-path-to-node="13">
	&nbsp;</p>
<h4>
	A. การใช้งาน <code>try...catch</code> พื้นฐาน</h4>
<p>
	&nbsp;</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-324 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-324 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ0wQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-324 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-324">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
function runTransaction() {
    try {
        checkWithdraw(200, 300); // โค้ดที่อาจเกิดข้อผิดพลาด
    } catch (e) {
        // e คือ error object ที่ถูก throw ออกมา
        console.error(&quot;Transaction failed:&quot;, e.message); 
        // Output: Transaction failed: ยอดเงินไม่เพียงพอ
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="15">
	&nbsp;</p>
<h4>
	B. การระบุชนิดข้อผิดพลาด (ใช้ <code>instanceof</code> แทน Dart <code>on</code>)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="16">
	TypeScript <b>ไม่มีคีย์เวิร์ด <code>on</code></b> เหมือน Dart ในการระบุชนิดของ Exception โดยตรงใน <code>catch</code> block แต่เราใช้วิธีการตรวจสอบชนิดของ Error Object ด้วย <b><code>instanceof</code></b> แทน</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-325 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-325 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1AQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-325 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-325">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
function runSpecificCatch() {
    try {
        checkWithdraw(200, 300); 
    } catch (error) {
        // 1. ตรวจสอบชนิด Custom Error ก่อน
        if (error instanceof WithdrawError) {
            console.warn(`[Withdraw Check] - ${error.message}`);
        } 
        // 2. ตรวจสอบชนิด Base Error
        else if (error instanceof Error) {
            console.error(`[Base Error] - ${error.message}`);
        } 
        // 3. จัดการกรณีที่ throw มาเป็น String หรือค่าอื่น ๆ (ซึ่งไม่แนะนำ)
        else {
            console.error(&quot;Unknown Error type:&quot;, error);
        }
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="18">
	&nbsp;</p>
<h4>
	C. การเข้าถึง Stack Trace</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="19">
	Stack Trace ซึ่งแสดงลำดับการเรียกฟังก์ชันที่ทำให้เกิดข้อผิดพลาด จะเป็น Property หนึ่งของ Object ที่สืบทอดจาก <code>Error</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-326 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-326 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1QQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-326 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-326">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
try {
    throw new Error(&quot;Detailed failure.&quot;);
} catch (error) {
    if (error instanceof Error) {
        console.log(`Error Name: ${error.name}`);
        console.log(`Stack Trace:n ${error.stack}`); // เข้าถึง Stack Trace
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="21" />
<p data-path-to-node="22">
	&nbsp;</p>
<h3>
	3. การใช้งาน <code>rethrow</code> (ส่งต่อข้อผิดพลาด)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="23">
	ใน TypeScript เราไม่มีคีย์เวิร์ด <code>rethrow</code> โดยตรง แต่ใช้คีย์เวิร์ด <b><code>throw</code></b> ภายในบล็อก <code>catch</code> เพื่อโยนข้อผิดพลาดเดิมออกไปให้ Handler ที่อยู่สูงกว่า (Outer Handler) จัดการต่อ</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-327 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-327 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1gQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-327 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-327">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
function handleAndRethrow(deposit: number, withdraw: number) {
    try {
        checkWithdraw(deposit, withdraw);
    } catch (e) {
        if (e instanceof WithdrawError) {
            // ทำการบันทึกข้อผิดพลาดในระดับนี้ (Log)
            console.warn(`[Local Handler] Logged withdrawal error for user.`);
            // แล้วส่งต่อข้อผิดพลาดนี้ไปให้ Handler ภายนอก
            throw e; 
        } 
        // Error อื่น ๆ จะถูกส่งต่อโดยอัตโนมัติหากไม่ถูกจับ
    }
}

try {
    handleAndRethrow(200, 300);
} catch (e) {
    // Handler ภายนอกจะได้รับ WithdrawError ต่อจาก handleAndRethrow
    console.error(`[Global Handler] Transaction failed completely.`);
}</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="25" />
<p data-path-to-node="26">
	&nbsp;</p>
<h3>
	4. การใช้งาน <code>finally</code></h3>
<p>
	&nbsp;</p>
<p data-path-to-node="27">
	บล็อก <b><code>finally</code></b> จะทำงานเสมอ ไม่ว่าในบล็อก <code>try</code> จะเกิดข้อผิดพลาดหรือไม่ หรือเกิดแล้วถูกจัดการด้วย <code>catch</code> หรือไม่ก็ตาม มักใช้สำหรับโค้ดทำความสะอาด (Cleanup) เช่น การปิดไฟล์ หรือปิดการเชื่อมต่อฐานข้อมูล</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-328 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-328 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1wQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_29a9309813ebf425&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_3156dbe1c5ef7f84&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-328 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-328">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
function runWithCleanup() {
    let connectionStatus = &#39;open&#39;;
    try {
        // โค้ดที่อาจเกิด error
        console.log(&#39;Attempting operation...&#39;); 
        // throw new Error(&quot;Connection lost&quot;); 
        
    } catch (e) {
        console.error(&quot;Operation failed.&quot;);
    } finally {
        // โค้ดใน finally จะทำงานเสมอ
        connectionStatus = &#39;closed&#39;;
        console.log(`Connection is now: ${connectionStatus}`); 
    }
}

runWithCleanup();</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Mon, 24 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Asynchronous Programming ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_Asynchronous_Programming_ในภาษา_TypeScript_เบื้องต้น-1144.html</link><description><![CDATA[<p data-path-to-node="3" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Asynchronous Programming</b> คือรูปแบบการทำงานที่ช่วยให้โปรแกรมสามารถดำเนินการอื่นต่อไปได้ทันที โดยไม่ต้องรอผลลัพธ์จากคำสั่งที่ใช้เวลานาน (เช่น การเรียก API, การอ่านไฟล์) ทำให้โปรแกรมไม่หยุดนิ่ง (Non-blocking)</p>
<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript เราใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Promise</b>, <b style="line-height: 1.15 !important; margin-top: 0px !important;">async</b>, และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">await</b> ในการจัดการการทำงานแบบ Asynchronous</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. ความเข้าใจพื้นฐาน: Promise</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Promise</b> คือ Object ใน TypeScript/JavaScript ที่เป็นตัวแทนของผลลัพธ์ที่จะเกิดขึ้นในอนาคต (คล้ายกับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Future</code> ใน Dart) <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Promise</code> มี 3 สถานะ:</p>
<ol data-path-to-node="7" start="1" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="7,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Pending:</b> กำลังรอผลลัพธ์</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="7,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Fulfilled (Resolved):</b> ทำงานสำเร็จและส่งค่ากลับมา</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="7,2,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Rejected:</b> เกิดข้อผิดพลาด</p>
	</li>
</ol>
<p data-path-to-node="8" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ปัญหาของการเรียกใช้แบบ Synchronous</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	หากเราเรียกใช้ฟังก์ชัน Asynchronous โดยตรงเหมือนฟังก์ชันทั่วไป จะได้ผลลัพธ์เป็น Object ที่ยังไม่เสร็จสมบูรณ์ (Pending Promise)</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-300 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-300 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQtAQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f2351a47cbb4ca0e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_f7a468662cc9a0de&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-300 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-300" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันจำลองการทำงานที่ใช้เวลา 4 วินาที และคืนค่าเป็น Promise
function getUserOrder(): Promise&lt;string&gt; {
    return new Promise((resolve) =&gt; {
        // ใช้ setTimeout จำลองการทำงานที่ต้องรอ
        setTimeout(() =&gt; {
            resolve(&#39;Large Latte&#39;);
        }, 4000);
    });
}

// ฟังก์ชันนี้ไม่ได้ถูกกำหนดให้เป็น async
function createOrderMessage() {
    // การเรียกใช้แบบนี้จะไม่ได้รอผลลัพธ์
    const order = getUserOrder(); 
    return &#39;Your order is: &#39; + order;
}

console.log(createOrderMessage()); 
// Output: Your order is: [object Promise] หรือ Promise { &lt;pending&gt; } 
// ซึ่งไม่ใช่ผลลัพธ์ &quot;Large Latte&quot; ที่เราต้องการ</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async</code> และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await</code></h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เพื่อแก้ปัญหาข้างต้น เราใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">async</b> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">await</b> เพื่อเปลี่ยนรูปแบบการเขียน Asynchronous ให้ดูเหมือนการทำงานแบบลำดับ (Sequential)</p>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async</code> Keyword</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<ul data-path-to-node="15" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="15,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			ใช้กำกับหน้าฟังก์ชันเพื่อประกาศว่าเป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Asynchronous Function</b></p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="15,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			ฟังก์ชัน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async</code> จะคืนค่าเป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Promise&lt;T&gt;</b> เสมอ (โดยที่ <span class="math-inline" data-math="T" style="line-height: 1.15 !important; margin-top: 0px !important;">$T$</span> คือชนิดข้อมูลที่ฟังก์ชันควรจะคืนค่าตามปกติ)</p>
	</li>
</ul>
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await</code> Keyword</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<ul data-path-to-node="17" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="17,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			ใช้กำกับหน้า <b style="line-height: 1.15 !important; margin-top: 0px !important;">Promise</b> เพื่อบอกให้โปรแกรม <b style="line-height: 1.15 !important; margin-top: 0px !important;">หยุดรอ</b> จนกว่า <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Promise</code> นั้นจะสำเร็จ (Resolved) แล้วจึงนำค่าสุดท้ายมาใช้</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="17,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			สามารถใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">await</b> ได้เฉพาะ <b style="line-height: 1.15 !important; margin-top: 0px !important;">ภายใน</b> ฟังก์ชันที่ถูกกำหนดด้วย <b style="line-height: 1.15 !important; margin-top: 0px !important;">async</b> เท่านั้น</p>
	</li>
</ul>
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างการปรับใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async</code>/<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await</code>:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-301 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-301 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQtQQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f2351a47cbb4ca0e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_f7a468662cc9a0de&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-301 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-301" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// 1. กำหนดให้ฟังก์ชันเป็น async และระบุชนิดข้อมูลที่คืนค่าเป็น Promise&lt;string&gt;
async function createOrderMessage(): Promise&lt;string&gt; {
    // 2. ใช้ await เพื่อรอค่าสุดท้ายจาก Promise ก่อนนำไปใช้งาน
    const order = await getUserOrder(); 
    
    // โค้ดจะหยุดที่บรรทัดบนจนกว่าจะได้ค่า order
    return &#39;Your order is: &#39; + order;
}

// เพื่อให้สามารถใช้ await ใน Top-Level (เช่น main/เริ่มต้นโปรแกรม) 
// เราต้องกำหนดให้ฟังก์ชันหลักเป็น async ด้วย
async function main() {
    console.log(&quot;Run 1: Starting order...&quot;);
    
    // 3. ใช้ await เพื่อรอผลลัพธ์ของ createOrderMessage() ก่อนไปคำสั่งถัดไป
    console.log(await createOrderMessage()); 
    
    console.log(&quot;Run 2: Order completed.&quot;);
}

main();</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. ลำดับการทำงาน (Flow Control)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await</code> ไม่ได้ทำให้โปรแกรมทั้งหมดหยุดทำงาน แต่จะทำให้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">ฟังก์ชัน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">async</code> นั้น ๆ</b> หยุดรอชั่วคราว เพื่อให้คำสั่งอื่นที่ไม่เกี่ยวข้องสามารถทำงานต่อไปได้ก่อน</p>
<p data-path-to-node="22" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในตัวอย่างนี้ (สมมติ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">getUserOrder</code> ใช้เวลา 4 วินาที):</p>
<ol data-path-to-node="23" start="1" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="23,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Run 1: Starting order...</code> จะแสดงทันที</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="23,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			โปรแกรมจะเข้าสู่ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await createOrderMessage()</code> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">ปล่อยให้ฟังก์ชัน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">main</code> หยุดรอ</b></p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="23,2,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			หลังจาก 4 วินาที <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">createOrderMessage</code> ทำงานเสร็จสิ้นและคืนค่า</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="23,3,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			ข้อความ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Your order is: Large Latte</code> จะแสดง</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="23,4,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Run 2: Order completed.</code> จะแสดงเป็นลำดับสุดท้าย</p>
	</li>
</ol>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	4. การจัดการข้อผิดพลาด (Error Handling)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="25" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในการจัดการข้อผิดพลาด (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Rejected</code> Promise) ที่เกิดขึ้นจากการทำงานแบบ Asynchronous เราใช้คำสั่ง <b style="line-height: 1.15 !important; margin-top: 0px !important;">try...catch</b> รอบคำสั่ง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">await</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-302 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-302 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQtgQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f2351a47cbb4ca0e&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_f7a468662cc9a0de&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-302 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-302" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
async function fetchUser(id: number): Promise&lt;string&gt; {
    if (id !== 1) {
        // หากเกิดข้อผิดพลาด ให้ reject Promise
        return Promise.reject(new Error(&quot;User not found&quot;)); 
    }
    return &quot;User: Alice&quot;; // resolve Promise
}

async function runFetch() {
    try {
        const user = await fetchUser(99); // จะเกิด error
        console.log(user);
    } catch (error) {
        // ดักจับ error จาก Promise.reject()
        console.error(&quot;Error fetching data:&quot;, error.message);
    }
}

runFetch(); // Output: Error fetching data: User not found</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Sun, 23 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Static Property และ Static Method ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_Static_Property_และ_Static_Method_ในภาษา_TypeScript_เบื้องต้น-1143.html</link><description><![CDATA[<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript สมาชิกที่กำหนดด้วยคีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">static</b> จะผูกอยู่กับ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Class</b> โดยตรง ไม่ใช่กับ Object ที่สร้างจาก Class นั้น (Instance Object) ดังนั้น Static Member จึงทำหน้าที่เป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Shared Member</b> ที่ทุก Instance ของ Class สามารถเข้าถึงได้ผ่านชื่อ Class เท่านั้น</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. Static Method (เมธอดระดับ Class)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Method</b> คือฟังก์ชันที่ใช้คีย์เวิร์ด <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">static</code> กำกับไว้ด้านหน้า ซึ่งสามารถเรียกใช้งานได้โดยตรงผ่านชื่อ Class โดยไม่ต้องสร้าง Object ก่อน</p>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การประกาศและการเรียกใช้</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="8" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Static Method มักใช้สำหรับฟังก์ชันที่เป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Utility</b> หรือเครื่องมือที่ไม่ได้ขึ้นอยู่กับสถานะ (State) ของ Object ใด ๆ</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-265 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-265 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ-AM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_aa9483af687c2a6a&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_1fb825b4917e57b7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-265 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-265" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Calculator {
    // Static Method: ใช้ในการเปรียบเทียบราคาของ Object สองตัว
    // โดยที่ method นี้ไม่จำเป็นต้องใช้ข้อมูลภายใน instance
    static comparePrice(car1: { price: number }, car2: { price: number }): number {
        return car1.price - car2.price;
    }
}

class Car {
    color: string;
    price: number;

    constructor(color: string, price: number) {
        this.color = color;
        this.price = price;
    }
}

const car1 = new Car(&#39;red&#39;, 2000);
const car2 = new Car(&#39;blue&#39;, 1500);

// ต้องเรียกใช้งานผ่านชื่อ Class (Calculator) เท่านั้น
const priceDiff = Calculator.comparePrice(car1, car2);

console.log(`Price difference: ${priceDiff}`); // Output: 500

// const calc = new Calculator(); 
// calc.comparePrice(car1, car2); // Error: Cannot access static method via instance</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. Static Property (คุณสมบัติระดับ Class)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Property</b> คือตัวแปรที่ใช้คีย์เวิร์ด <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">static</code> กำกับไว้ ทำให้ตัวแปรนั้นเป็นตัวแปรที่ <b style="line-height: 1.15 !important; margin-top: 0px !important;">ใช้ร่วมกัน</b> สำหรับ Class นั้น ๆ และมีสำเนาเพียงชุดเดียวในหน่วยความจำ</p>
<p data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การประกาศและการเรียกใช้</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Static Property มักใช้สำหรับกำหนดค่า <b style="line-height: 1.15 !important; margin-top: 0px !important;">Constant</b> หรือค่าคงที่ที่เกี่ยวข้องกับ Class นั้น</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-266 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-266 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ-QM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_aa9483af687c2a6a&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_1fb825b4917e57b7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-266 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-266" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Circle {
    radius: number; // Instance Property (แต่ละ Object มีค่าต่างกัน)
    
    // Static Property: ค่า PI เป็นค่าเดียวกันสำหรับทุกวงกลม
    static PI: number = 3.14159; 
    
    // Static Readonly Property: ค่าคงที่ที่แก้ไขไม่ได้
    static readonly MAX_RADIUS = 100;

    constructor(radius: number) {
        this.radius = radius;
        // this.MAX_RADIUS = 50; // Error: ไม่สามารถกำหนดค่าให้ static member ภายใน constructor ได้
    }

    getArea(): number {
        // สามารถเรียกใช้ Static Property ภายใน Instance Method ได้
        return Circle.PI * (this.radius * this.radius); 
    }
}

console.log(`Global PI: ${Circle.PI}`); // Output: 3.14159
// Circle.MAX_RADIUS = 500; // Error: Cannot assign to &#39;MAX_RADIUS&#39; because it is a read-only property.</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. กฎการเข้าถึง Static vs. Instance</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	กฎการเข้าถึงสมาชิกภายใน Class ใน TypeScript เป็นไปตามหลักการ OOP ทั่วไป ดังนี้:</p>
<table data-path-to-node="19" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">จากภายใน...</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">สามารถเข้าถึง...</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ตัวอย่างการใช้งาน</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="19,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Method</b></td>
			<td data-path-to-node="19,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Property และ Static Method เท่านั้น</b></td>
			<td data-path-to-node="19,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">static methodA() { return ClassName.staticProp; }</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="19,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Instance Method</b></td>
			<td data-path-to-node="19,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static และ Instance Members ทั้งหมด</b></td>
			<td data-path-to-node="19,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">instanceMethod() { return this.instanceProp + ClassName.staticProp; }</code></td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างกฎการเข้าถึง:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-267 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-267 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ_QM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_aa9483af687c2a6a&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_1fb825b4917e57b7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-267 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-267" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Report {
    // Instance Property
    private instanceCount: number = 0; 

    // Static Property
    static totalReports: number = 0;

    constructor() {
        this.instanceCount++;
        Report.totalReports++; // Instance สามารถเพิ่มค่า Static ได้
    }
    
    // Instance Method
    public getInfo(): string {
        // สามารถเข้าถึง Static ได้
        return `Instance: ${this.instanceCount}, Total: ${Report.totalReports}`;
    }

    // Static Method
    static clearReports(): void {
        // Report.instanceCount = 0; // Error: Static method cannot access instance property
        Report.totalReports = 0; // ทำได้
        console.log(&quot;Total reports cleared.&quot;);
    }
}

Report.clearReports(); // เรียกใช้ Static Method
const r1 = new Report();
r1.getInfo();</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Sat, 22 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Interface และ Abstract Class ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งาน_Interface_และ_Abstract_Class_ในภาษา_TypeScript_เบื้องต้น-1142.html</link><description><![CDATA[<p data-path-to-node="3" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript <b style="line-height: 1.15 !important; margin-top: 0px !important;">Interface</b> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Abstract Class</b> เป็นเครื่องมือหลักในการสร้าง <b style="line-height: 1.15 !important; margin-top: 0px !important;">สัญญา (Contract)</b> และพิมพ์เขียวของโค้ดเชิงวัตถุ (OOP) เพื่อให้เกิดความสอดคล้องและยืดหยุ่นในการพัฒนา</p>
<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. การใช้งาน Interface</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	แตกต่างจาก Dart ที่ Class ทุกตัวเป็น Interface โดยปริยาย ใน TypeScript เราใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">interface</b> ในการกำหนดโครงสร้างของ Object, Properties และ Methods อย่างชัดเจน</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Interface</b> ใช้เพื่อกำหนด <b style="line-height: 1.15 !important; margin-top: 0px !important;">สัญญา</b> ว่า Class หรือ Object ใด ๆ ที่นำไปใช้จะต้องมีคุณสมบัติตามที่กำหนด</p>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การกำหนด Interface</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-244 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-244 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQzQM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f4441b29ff84196d&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_8e4159293e330340&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-244 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-244" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// การกำหนด Interface
interface Shape {
    // ต้องมี property นี้
    width: number;
    height: number;
    // ต้องมี method นี้ โดยมีการกำหนด parameter และ return type
    area(): number;
    perimeter(): number;
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">implements</code></h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เราใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">implements</b> เพื่อให้ Class รับสัญญาจาก Interface มาใช้ Class ที่ implements Interface จะต้องทำการกำหนดรายละเอียดของ Properties และ Methods ทั้งหมดตามที่ Interface กำหนดไว้</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-245 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-245 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQzgM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f4441b29ff84196d&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_8e4159293e330340&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-245 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-245" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Class Rectangle implements สัญญาจาก Shape
class Rectangle implements Shape {
    // ต้องประกาศ Properties ทั้งหมดตามสัญญา
    width: number; 
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    // ต้องกำหนด Body ให้กับ Method area()
    area(): number {
        return this.width * this.height;
    }

    // ต้องกำหนด Body ให้กับ Method perimeter()
    perimeter(): number {
        return (this.width * 2) + (this.height * 2);
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	C. Multiple Interface Implementation</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript อนุญาตให้ Class หนึ่งสามารถ implements Interface ได้หลายตัวพร้อมกัน ซึ่งช่วยให้ Object นั้นสามารถมีคุณสมบัติและพฤติกรรมตามสัญญาได้หลายแบบ</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-246 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-246 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQzwM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f4441b29ff84196d&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_8e4159293e330340&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-246 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-246" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
interface HasVolume {
    volume(): number;
}

// Cylinder implements ทั้ง Shape และ HasVolume
class Cylinder implements Shape, HasVolume {
    // ... ต้องประกาศ property และ method ทั้งหมดของ Shape และ HasVolume
    
    // ... (โค้ดส่วนอื่น ๆ)

    area(): number { /* ... */ return 0; }
    perimeter(): number { /* ... */ return 0; }
    volume(): number { /* ... */ return 0; }
}</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การใช้งาน Abstract Class</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Abstract Class</b> คือ Class ที่ไม่สามารถนำไปสร้าง Object ได้โดยตรง (ไม่สามารถใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">new</code> ได้) แต่มีจุดประสงค์หลักเพื่อเป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Base Class</b> ที่ Class ลูกอื่น ๆ จะต้องนำไปสืบทอด (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">extends</code>) หรือ implements ต่อไป</p>
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การกำหนด Abstract Class</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">abstract</b> นำหน้าชื่อ Class</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-247 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-247 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ0AM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f4441b29ff84196d&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_8e4159293e330340&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-247 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-247" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Abstract Class รูปร่าง
abstract class Form {
    // 1. Normal Property (มีค่าได้)
    protected color: string = &#39;gray&#39;; 

    // 2. Normal Method (มี Body ได้)
    public getColor(): string {
        return this.color;
    }

    // 3. Abstract Method (ต้องไม่มี Body และมี abstract keyword)
    abstract area(): number; // ต้องถูก implements/override ใน Class ลูก
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. Abstract Method</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="22" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Abstract Method</b> คือ Method ที่ถูกประกาศไว้ใน Abstract Class โดย <b style="line-height: 1.15 !important; margin-top: 0px !important;">ไม่มีการกำหนด Body</b> (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">{}</code>) ซึ่งบังคับให้ Class ลูกทั้งหมดที่สืบทอด (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">extends</code>) จะต้องทำการกำหนด Body ให้กับ Method นั้น ๆ</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-248 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-248 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ0QM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_f4441b29ff84196d&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_8e4159293e330340&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-248 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-248" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Class ลูกต้อง extends
class Triangle extends Form {
    base: number;
    height: number;

    constructor(base: number, height: number) {
        super();
        this.base = base;
        this.height = height;
    }

    // ต้อง Override และกำหนด Body ให้กับ abstract method &#39;area()&#39;
    override area(): number {
        return 0.5 * this.base * this.height;
    }
}

// const f = new Form(); // Error: Cannot create an instance of an abstract class.
const t = new Triangle(10, 5);
console.log(t.area()); // 25</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="25" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. Interface vs. Abstract Class</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<table data-path-to-node="26" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">คุณสมบัติ</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Interface</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Abstract Class</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">คีย์เวิร์ด</b></td>
			<td data-path-to-node="26,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">interface</code></td>
			<td data-path-to-node="26,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">abstract class</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">การสร้าง Object</b></td>
			<td data-path-to-node="26,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ไม่ได้</td>
			<td data-path-to-node="26,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ไม่ได้</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">การรับสัญญา</b></td>
			<td data-path-to-node="26,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">implements</code> (รับได้หลายตัว)</td>
			<td data-path-to-node="26,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">extends</code> (รับได้ตัวเดียว) หรือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">implements</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,4,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">มี Logic/Body</b></td>
			<td data-path-to-node="26,4,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ไม่ได้</b> (กำหนดเพียงโครงสร้าง)</td>
			<td data-path-to-node="26,4,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ได้</b> (มี Normal Method ที่มี Body ได้)</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,5,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ใช้ Access Modifier</b></td>
			<td data-path-to-node="26,5,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ไม่ได้ (ทุกอย่างเป็น <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">public</code> โดยปริยาย)</td>
			<td data-path-to-node="26,5,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ได้ (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">public</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">private</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">protected</code>)</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="26,6,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ใช้ Constructor</b></td>
			<td data-path-to-node="26,6,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ไม่ได้</td>
			<td data-path-to-node="26,6,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ได้</td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Interface</b> มักถูกใช้เพื่อกำหนด <b style="line-height: 1.15 !important; margin-top: 0px !important;">Contracts</b> ที่หลากหลายสำหรับ Object หรือ Class ที่ไม่จำเป็นต้องมีความเกี่ยวข้องกันโดยตรง (Polymorphism)</p>
<p data-path-to-node="28" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Abstract Class</b> มักถูกใช้เป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">Base Class</b> ที่มี Logic หรือ Properties ร่วมกันบางส่วน และต้องการบังคับให้ Class ลูกมีพฤติกรรมบางอย่างที่จำเป็น (Template Method Pattern)</p>
]]></description><pubDate>Fri, 21 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งานการสืบทอด (Inheritance) Class ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้งานการสืบทอด_(Inheritance)_Class_ในภาษา_TypeScript_เบื้องต้น-1141.html</link><description><![CDATA[<p data-path-to-node="3" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">การสืบทอด (Inheritance)</b> เป็นหลักการสำคัญของ OOP ที่ช่วยให้ Class หนึ่ง (Class ลูก หรือ Subclass) สามารถรับคุณสมบัติ (Properties) และพฤติกรรม (Methods) จาก Class อื่น (Class แม่ หรือ Superclass) มาใช้ซ้ำได้ ซึ่งช่วยลดความซ้ำซ้อนของโค้ด</p>
<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. การกำหนด Inheritance ด้วย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">extends</code></h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในการสืบทอด Class เราใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">extends</b></p>
<ul data-path-to-node="6" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="6,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Superclass / Parent Class:</b> Class ที่ถูกสืบทอด</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="6,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Subclass / Child Class:</b> Class ที่ทำการสืบทอด</p>
	</li>
</ul>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript (และ JavaScript) ใช้หลักการ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Single Inheritance</b> คือ Class ลูกสามารถสืบทอดจาก Class แม่ได้เพียง <b style="line-height: 1.15 !important; margin-top: 0px !important;">Class เดียวเท่านั้น</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-221 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-221 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQowM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_15101a15712821d3&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7e88c70929fb9078&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-221 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-221" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Superclass / Parent Class
class Animal {
    name: string;
    
    constructor(name: string) {
        this.name = name;
    }

    eat(): void {
        console.log(`${this.name} is eating.`);
    }
}

// Subclass / Child Class สืบทอดจาก Animal
class Dog extends Animal {
    breed: string; // คุณสมบัติใหม่

    constructor(name: string, breed: string) {
        // ต้องกำหนด constructor ใหม่
        super(name); // ต้องเรียก constructor ของ Class แม่
        this.breed = breed;
    }
    
    bark(): void { // พฤติกรรมใหม่
        console.log(`${this.name} is barking.`);
    }
}

// การเรียกใช้งาน
const myDog = new Dog(&quot;Buddy&quot;, &quot;Pug&quot;);
myDog.eat();  // เรียกใช้ method ที่สืบทอดมาจาก Animal (Output: Buddy is eating.)
myDog.bark(); // เรียกใช้ method ของ Dog เอง</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การเรียกใช้ Constructor ของ Class แม่ (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super()</code>)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เมื่อ Class ลูกมี Constructor ของตัวเอง จะต้องเรียกใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">super()</b> เป็นคำสั่ง <b style="line-height: 1.15 !important; margin-top: 0px !important;">แรก</b> ภายใน Constructor เพื่อส่งผ่าน Argument ที่จำเป็นไปยัง Constructor ของ Class แม่</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-222 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-222 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpAM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_15101a15712821d3&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7e88c70929fb9078&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-222 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-222" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// (ดูตัวอย่างด้านบน)
class Dog extends Animal {
    // ...
    constructor(name: string, breed: string) {
        // ต้องเรียก super(name) เพื่อให้ Animal constructor กำหนดค่า this.name
        super(name); 
        this.breed = breed;
    }
    // ...
}</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. การกำหนด Overriding และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super</code> Keyword</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Overriding</b> คือการที่ Class ลูกกำหนด Property หรือ Method ที่มีชื่อและ Signature (รูปแบบพารามิเตอร์) เหมือนกับ Class แม่ เพื่อให้มีพฤติกรรมที่แตกต่างไปจากเดิม</p>
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">override</code> Keyword (แนะนำใน TS)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ในเวอร์ชันใหม่ (ตั้งแต่ 4.3 เป็นต้นไป) รองรับคีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">override</b> ซึ่งช่วยให้มั่นใจว่า Method นั้นมีอยู่จริงใน Class แม่ หากไม่มีจะแสดง Error (เทียบเท่ากับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">@override</code> ใน Dart)</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-223 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-223 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpQM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_15101a15712821d3&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7e88c70929fb9078&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-223 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-223" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Animal {
    move(distance: number = 0): void {
        console.log(`Animal moved ${distance}m.`);
    }
}

class Horse extends Animal {
    // ใช้ &#39;override&#39; เพื่อให้ TypeScript ตรวจสอบว่ามี move() ใน Animal จริง
    override move(distance: number = 40): void {
        // 1. super.move() เรียกใช้ method move() ของ Class แม่
        super.move(distance); 
        
        // 2. พฤติกรรมที่แตกต่างของ Class ลูก
        console.log(&quot;Horse galloped!&quot;);
    }
}

const myHorse = new Horse();
myHorse.move(50);
// Output: Animal moved 50m.
// Output: Horse galloped!</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. การใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super</code> ในการเข้าถึง Class แม่</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<ul data-path-to-node="20" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="20,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super()</code>:</b> ใช้ใน Constructor เพื่อเรียก Constructor ของ Class แม่</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="20,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super.method()</code>:</b> ใช้ใน Method เพื่อเรียก Method ที่ถูก Overridden ของ Class แม่</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="20,2,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;"><code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super.property</code>:</b> ใช้เพื่อเข้าถึง Property ของ Class แม่</p>
	</li>
</ul>
<hr data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="22" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	4. การควบคุมการเข้าถึงใน Inheritance</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การใช้ Access Modifiers มีความสำคัญเมื่อทำงานกับการสืบทอด:</p>
<table data-path-to-node="24" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Modifier</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Class แม่</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Class ลูก (extends)</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ภายนอก</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="24,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">public</b></td>
			<td data-path-to-node="24,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
			<td data-path-to-node="24,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
			<td data-path-to-node="24,1,3,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="24,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">private</b></td>
			<td data-path-to-node="24,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
			<td data-path-to-node="24,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				❌</td>
			<td data-path-to-node="24,2,3,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				❌</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="24,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">protected</b></td>
			<td data-path-to-node="24,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
			<td data-path-to-node="24,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				✔️</td>
			<td data-path-to-node="24,3,3,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				❌</td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="25" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">protected</b> เป็นตัว Modifier ที่มีความสำคัญที่สุดในการ Inheritance เพราะมันอนุญาตให้ Class ลูกเข้าถึง Property หรือ Method ที่ถูกป้องกันได้ แต่ยังคงซ่อนจากโค้ดภายนอก</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-224 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-224 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQqQM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_15101a15712821d3&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_7e88c70929fb9078&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-224 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-224" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Vehicle {
    protected speed: number = 0; // Class ลูกเข้าถึงได้

    protected accelerate(amount: number): void {
        this.speed += amount;
    }
}

class Car extends Vehicle {
    public drive(): void {
        super.accelerate(50); // Car เข้าถึง protected accelerate ได้
        console.log(`Car speed: ${this.speed} km/h`); // Car เข้าถึง protected speed ได้
    }
}

const myCar = new Car();
myCar.drive();
// myCar.accelerate(10); // Error: &#39;accelerate&#39; is protected</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Thu, 20 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Getter, Setter และ Private Variable ในภาษา TypeScript</title><link>https://www.ninenik.com/การใช้งาน_Getter,_Setter_และ_Private_Variable_ในภาษา_TypeScript-1140.html</link><description><![CDATA[<p data-path-to-node="3">
	ในแนวคิดการเขียนโปรแกรมเชิงวัตถุ (OOP) การควบคุมการเข้าถึงข้อมูลของวัตถุ (Encapsulation) เป็นสิ่งสำคัญ TypeScript ใช้ <b>Access Modifiers</b> ในการซ่อนข้อมูล (Private Variables) และใช้ <b>Custom Accessors</b> (<code>get</code> และ <code>set</code>) เพื่อควบคุมการอ่านและเขียนค่าอย่างปลอดภัย</p>
<p data-path-to-node="4">
	&nbsp;</p>
<h3>
	1. การกำหนด Private Variable (Encapsulation)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="5">
	ใน TypeScript เราใช้คีย์เวิร์ด <b><code>private</code></b> เพื่อกำหนดให้คุณสมบัติ (Property) หรือเมธอด (Method) เข้าถึงได้เฉพาะภายใน Class นั้น ๆ เท่านั้น ซึ่งแตกต่างจาก Dart ที่ใช้เครื่องหมาย <code>_</code> (Underscore) นำหน้าเพื่อกำหนดความเป็นส่วนตัวในระดับ Library</p>
<p data-path-to-node="6">
	การใช้ <code>private</code> เป็นมาตรฐาน OOP สากล และเป็นวิธีที่แนะนำในการซ่อนข้อมูลที่สำคัญ เช่น ยอดเงิน หรือรหัสผ่าน</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-204 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-204 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQgQM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_44abdc2d2247f9b4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_48f6fd741ecae6d7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-204 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-204">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Product {
    // 1. Private Variable: ใช้ _ นำหน้าชื่อเพื่อเป็นธรรมเนียม แต่ &#39;private&#39; คือคีย์เวิร์ดที่ทำให้มันเป็น Private จริงๆ
    private _price: number; 

    constructor(initialPrice: number) {
        this._price = initialPrice;
    }

    // Method สาธารณะที่เข้าถึงตัวแปรส่วนตัวได้
    public getDetail(): string {
        return `Product price is ${this._price} THB.`;
    }
}

const item = new Product(500);

// item._price; // Error (ใน TypeScript): Property &#39;_price&#39; is private.
item.getDetail(); // ทำงานได้</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="8" />
<p data-path-to-node="9">
	&nbsp;</p>
<h3>
	2. การใช้งาน Getter (Accessors)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="10">
	<b>Getter</b> หรือ <b>Accessor</b> คือฟังก์ชันที่ใช้คีย์เวิร์ด <b><code>get</code></b> เพื่ออนุญาตให้อ่านค่าคุณสมบัติที่เป็น <code>private</code> หรือคำนวณค่าใด ๆ ก่อนส่งกลับออกไป โดยภายนอกจะเข้าถึงเหมือนเป็นตัวแปร (Property) ปกติ</p>
<p data-path-to-node="11">
	<b>ประโยชน์:</b> ใช้ในการ <i>คำนวณ</i> ข้อมูล หรือใช้ในการ <i>แปลง</i> ข้อมูลก่อนส่งออก</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-205 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-205 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQggM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_44abdc2d2247f9b4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_48f6fd741ecae6d7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-205 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-205">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Robot {
    private _height: number; // ความสูงเป็นหน่วย cm
    private _calcWeight: number; // น้ำหนักที่ถูกคำนวณ

    constructor(height: number) {
        this._height = height;
        this._calcWeight = 0; // ค่าเริ่มต้น
    }

    // Custom Getter: เข้าถึงผ่าน robot.weight
    public get weight(): number {
        // สามารถเพิ่มตรรกะหรือการตรวจสอบก่อนคืนค่าได้
        return this._calcWeight;
    }
    
    // Default Getter: สำหรับความสูง เข้าถึงผ่าน robot.height (ถ้าไม่มี set/get กำหนดไว้)
    public get height(): number {
        return this._height;
    }
    
    // ... Custom Setter จะอยู่ด้านล่าง
}

const humanoidA = new Robot(200);
// console.log(humanoidA._height); // Error เพราะเป็น private
console.log(`Height (via getter): ${humanoidA.height}`); // Output: 200
console.log(`Weight (via getter): ${humanoidA.weight}`); // Output: 0</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="13" />
<p data-path-to-node="14">
	&nbsp;</p>
<h3>
	3. การใช้งาน Setter (Accessors)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="15">
	<b>Setter</b> คือฟังก์ชันที่ใช้คีย์เวิร์ด <b><code>set</code></b> เพื่อควบคุมการกำหนดค่าให้กับคุณสมบัติที่เป็น <code>private</code> หรือเพื่อเพิ่มการตรวจสอบความถูกต้องของข้อมูลก่อนการกำหนดค่า</p>
<p data-path-to-node="16">
	<b>ประโยชน์:</b> ใช้ในการ <i>ตรวจสอบ</i> (Validation) ความถูกต้องของข้อมูล หรือใช้ในการ <i>คำนวณ</i> ค่าอื่น ๆ จากข้อมูลที่ส่งเข้ามา</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-206 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-206 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQgwM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_44abdc2d2247f9b4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_48f6fd741ecae6d7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-206 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-206">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ต่อจาก Class Robot เดิม:

class Robot {
    private _height: number;
    private _calcWeight: number;

    constructor(height: number) {
        this._height = height;
        this._calcWeight = 0;
    }
    
    // Custom Getter (เหมือนเดิม)
    public get weight(): number {
        return this._calcWeight;
    }

    // Custom Setter: เข้าถึงผ่าน robot.weight = value
    // รับค่า percent เพื่อคำนวณน้ำหนักจากเปอร์เซ็นต์ของความสูง
    public set weight(percent: number) {
        // การตรวจสอบความถูกต้อง (Validation)
        if (percent &lt; 0 || percent &gt; 100) {
            console.error(&quot;Error: Weight percentage must be between 0 and 100.&quot;);
            return;
        }
        // การคำนวณก่อนกำหนดค่า
        this._calcWeight = (this._height * percent) / 100;
        console.log(`Weight set to ${percent}% of height.`);
    }
}

const humanoidB = new Robot(200);

humanoidB.weight = 50; // เรียกใช้ Setter
console.log(`Calculated Weight: ${humanoidB.weight}`); // Output: 100

humanoidB.weight = 120; // เรียกใช้ Setter (จะแสดง Error ใน Console)
console.log(`Calculated Weight: ${humanoidB.weight}`); // Output: 100 (ค่าเดิม)</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="18" />
<p data-path-to-node="19">
	&nbsp;</p>
<h3>
	4. คุณสมบัติ <code>readonly</code> (ค่าคงที่)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="20">
	ใน TypeScript มีคีย์เวิร์ด <b><code>readonly</code></b> ซึ่งเป็นอีกรูปแบบของการควบคุมการเข้าถึง โดยใช้กำหนดให้คุณสมบัตินั้นสามารถ <b>อ่านได้เท่านั้น</b> และสามารถกำหนดค่าได้เพียงครั้งเดียวภายใน <code>constructor</code> หรือตอนประกาศ</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-207 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-207 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQhAM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_44abdc2d2247f9b4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_48f6fd741ecae6d7&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-207 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-207">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class User {
    // กำหนดให้ id สามารถอ่านได้ แต่ไม่สามารถแก้ไขได้หลังจากการสร้าง
    public readonly id: number; 
    public name: string;

    constructor(id: number, name: string) {
        this.id = id; // สามารถกำหนดค่าได้ใน constructor
        this.name = name;
    }
}

const userA = new User(101, &quot;Alice&quot;);
// userA.id = 102; // Error: Cannot assign to &#39;id&#39; because it is a read-only property.
userA.name = &quot;Bob&quot;; // ทำได้</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Wed, 19 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้งาน Class และแนวคิดการเขียนโปรแกรมเชิงวัตถุ (OOP) ในภาษา TypeScript</title><link>https://www.ninenik.com/การใช้งาน_Class_และแนวคิดการเขียนโปรแกรมเชิงวัตถุ_(OOP)_ในภาษา_TypeScript-1139.html</link><description><![CDATA[<p data-path-to-node="3" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">การเขียนโปรแกรมเชิงวัตถุ (Object-Oriented Programming: OOP)</b> เป็นแนวคิดที่มองทุกสิ่งในโปรแกรมเป็น &quot;วัตถุ&quot; (Object) โดย Object จะถูกสร้างขึ้นจาก &quot;พิมพ์เขียว&quot; ที่เรียกว่า <b style="line-height: 1.15 !important; margin-top: 0px !important;">Class</b> TypeScript รองรับหลักการ OOP ได้อย่างสมบูรณ์ ทำให้โค้ดมีโครงสร้างที่ชัดเจนและสามารถนำกลับมาใช้ใหม่ได้ง่าย</p>
<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. การกำหนด Class และ Object</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Class</b> คือพิมพ์เขียวหรือแม่แบบ (Blueprint) ที่กำหนดคุณสมบัติ (Properties) และพฤติกรรม (Methods) ของ Object</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Object</b> คือสิ่งที่ถูกสร้างขึ้นจาก Class นั้น ๆ (Instance)</p>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ตัวอย่างการกำหนด Class</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-179 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-179 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ0AI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-179 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-179" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Rectangle {
    // 1. Properties (คุณสมบัติ/ตัวแปรสมาชิก) พร้อมกำหนดชนิดข้อมูล
    width: number;
    height: number;
    
    // 2. Constructor (ตัวสร้าง) - ใช้ในการกำหนดค่าเริ่มต้นเมื่อสร้าง Object
    constructor(w: number, h: number) {
        this.width = w; // กำหนดค่า w ที่รับเข้ามาให้กับ property width ของ Object
        this.height = h;
    }

    // 3. Methods (เมธอด/ฟังก์ชัน) - พฤติกรรมของ Object
    area(): number {
        return this.width * this.height;
    }
}

// การสร้าง Object (Instance)
const myRectangle = new Rectangle(50, 20);

// การเรียกใช้ Properties และ Methods
console.log(`Width: ${myRectangle.width}`); // Output: 50
console.log(`Area: ${myRectangle.area()}`);   // Output: 1000</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. Access Modifiers (การควบคุมการเข้าถึง)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript มีคุณสมบัติในการควบคุมการเข้าถึง (Encapsulation) ของ Properties และ Methods อย่างชัดเจน โดยใช้คีย์เวิร์ด 3 ตัว ซึ่งเป็นคุณสมบัติที่สำคัญและไม่มีใน JavaScript มาตรฐาน (แตกต่างจาก Dart ที่ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">_</code> นำหน้าเพื่อหมายถึง private)</p>
<table data-path-to-node="11" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">Modifier</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">คำอธิบาย</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="11,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">public</b></td>
			<td data-path-to-node="11,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				สามารถเข้าถึงได้จากทุกที่ (ค่าเริ่มต้นหากไม่ระบุ)</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="11,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">private</b></td>
			<td data-path-to-node="11,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				สามารถเข้าถึงได้เฉพาะภายใน Class นั้น ๆ เท่านั้น</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="11,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">protected</b></td>
			<td data-path-to-node="11,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				สามารถเข้าถึงได้ภายใน Class นั้น และ Class ลูกที่สืบทอดไปเท่านั้น</td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่าง:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-180 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-180 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1AI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-180 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-180" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class BankAccount {
    public owner: string; // เข้าถึงได้จากภายนอก
    private _balance: number; // เข้าถึงได้เฉพาะใน Class เท่านั้น

    constructor(owner: string, initialBalance: number) {
        this.owner = owner;
        this._balance = initialBalance;
    }

    // Public method
    public deposit(amount: number): void {
        this._balance += amount;
    }

    // Public method ที่เข้าถึง private property
    public getBalance(): number {
        return this._balance;
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. Shorthand Initialization (การประกาศคุณสมบัติแบบย่อ)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript มีวิธีที่กระชับในการประกาศ Properties และกำหนดค่าเริ่มต้นพร้อมกันใน <b style="line-height: 1.15 !important; margin-top: 0px !important;">Constructor</b> โดยการใส่ Access Modifier (เช่น <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">public</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">private</code>) ไว้หน้าพารามิเตอร์ของ Constructor</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-181 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-181 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1QI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-181 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-181" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Circle {
    // TypeScript จะประกาศ public radius: number; ให้โดยอัตโนมัติ
    constructor(public radius: number) {
        // ไม่จำเป็นต้องใช้ this.radius = radius; อีกต่อไป
    }

    public circumference(): number {
        return 2 * Math.PI * this.radius;
    }
}

const myCircle = new Circle(7);
console.log(myCircle.circumference());</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	4. การสืบทอด (Inheritance)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Inheritance</b> คือการสร้าง Class ใหม่ (Class ลูก หรือ Subclass) ที่รับเอาคุณสมบัติและพฤติกรรมทั้งหมดของ Class เดิม (Class แม่ หรือ Superclass) มาใช้ โดยใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">extends</b></p>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	A. การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">extends</code> และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">super()</code></h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เมื่อ Class ลูกมี Constructor ของตัวเอง จะต้องเรียกใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">super()</b> เป็นคำสั่งแรกภายใน Constructor เพื่อเรียกตัวสร้างของ Class แม่ก่อน</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-182 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-182 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1gI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-182 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-182" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Animal {
    name: string;
    
    constructor(name: string) {
        this.name = name;
    }

    move(distance: number = 0): void {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    // Override Constructor ของ Class แม่
    constructor(name: string) {
        super(name); // เรียก constructor ของ Animal (name)
    }

    // Override Method ของ Class แม่
    move(distance: number = 5): void {
        super.move(distance); // เรียก method move() ของ Class แม่
        console.log(&quot;...and wagged its tail!&quot;);
    }
    
    // New Method
    bark(): void {
        console.log(&quot;Woof! Woof!&quot;);
    }
}

const puppy = new Dog(&quot;Buddy&quot;);
puppy.move(10); 
// Output: Buddy moved 10m.
// Output: ...and wagged its tail!</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	B. Static Members</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Members</b> เป็น Properties หรือ Methods ที่เป็นของ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Class นั้น ๆ เอง</b> ไม่ใช่ของ Object ที่ถูกสร้างขึ้นมา (Instance) โดยใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">static</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-183 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-183 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ1wI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-183 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-183" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Configuration {
    // Static Property: เข้าถึงผ่านชื่อ Class
    static version: string = &#39;1.0.0&#39;; 
    
    // Static Method
    static getVersionInfo(): string {
        return `App Version: ${Configuration.version}`;
    }
}

// เรียกใช้โดยตรงจากชื่อ Class
console.log(Configuration.getVersionInfo()); // Output: App Version: 1.0.0

// ไม่สามารถเรียกผ่าน Object ได้
// const config = new Configuration(); 
// config.version; // Error</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="26" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	5. การใช้ Getters และ Setters</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">Getters</b> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Setters</b> คือ Methods ที่ใช้เพื่อควบคุมการเข้าถึงหรือการเปลี่ยนแปลงค่าของ Properties ภายใน Class (มักใช้กับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">private</code> properties) ซึ่งช่วยให้สามารถใส่เงื่อนไขหรือตรรกะก่อนการอ่านหรือเขียนค่าได้</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-184 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-184 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ2AI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_82bda982305a42d7&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ce34b1fcad64301d&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-184 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-184" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Product {
    private _price: number;

    constructor(initialPrice: number) {
        this._price = initialPrice;
    }

    // Getter: ใช้ &#39;get&#39; เพื่อเข้าถึงค่าแบบ property (product.price)
    public get price(): number {
        return this._price;
    }

    // Setter: ใช้ &#39;set&#39; เพื่อกำหนดค่าแบบ property (product.price = 150)
    public set price(newPrice: number) {
        if (newPrice &lt; 0) {
            console.error(&quot;Price cannot be negative.&quot;);
            return;
        }
        this._price = newPrice;
    }
}

const item = new Product(100);
item.price = 150;     // เรียกใช้ Setter
console.log(item.price); // เรียกใช้ Getter (Output: 150)
item.price = -50;     // เรียกใช้ Setter (จะแสดง Error ใน Console)</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Tue, 18 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การกำหนดและใช้งาน Function ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การกำหนดและใช้งาน_Function_ในภาษา_TypeScript_เบื้องต้น-1138.html</link><description><![CDATA[<p data-path-to-node="3">
	ใน TypeScript <b>ฟังก์ชัน (Function)</b> เป็นกลุ่มคำสั่งที่สามารถนำกลับมาใช้ใหม่ได้ โดยฟังก์ชันใน TS ถูกจัดเป็น <b>First-Class Citizens</b> หมายความว่าสามารถกำหนดให้เป็นตัวแปร ส่งเป็น Argument หรือคืนค่าจากฟังก์ชันอื่นได้ เช่นเดียวกับ Object ทั่วไป</p>
<p data-path-to-node="4">
	&nbsp;</p>
<h3>
	1. โครงสร้างและการกำหนดชนิดข้อมูล (Type Annotation)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="5">
	หัวใจสำคัญของการใช้ฟังก์ชันใน TypeScript คือการกำหนดชนิดข้อมูลของพารามิเตอร์ (Parameters) และชนิดข้อมูลที่คืนค่า (Return Type) เพื่อให้โค้ดมีความปลอดภัย (Type Safety)</p>
<p data-path-to-node="6">
	<b>รูปแบบ:</b> <code>function name(parameter1: Type, parameter2: Type): ReturnType { ... }</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-146 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-146 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQoAI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-146 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-146">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันที่มีการกำหนดชนิดข้อมูลของพารามิเตอร์และการคืนค่าอย่างชัดเจน
function findArea(width: number, height: number): number {
    return width * height;
}

// ฟังก์ชันที่ไม่มีการคืนค่า (ใช้ void)
function printResult(area: number): void {
    console.log(`Area: ${area}`);
}

// การเรียกใช้งาน
let area: number = findArea(20, 100);
printResult(area); // Area: 2000</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="8">
	<p data-path-to-node="8,0">
		<b>Note:</b> การกำหนด <code>void</code> หมายถึงฟังก์ชันนั้นไม่มีการคืนค่าใดๆ กลับมา (หรือคืนค่าเป็น <code>undefined</code> ในทางปฏิบัติของ JavaScript)</p>
</blockquote>
<hr data-path-to-node="9" />
<p data-path-to-node="10">
	&nbsp;</p>
<h3>
	2. รูปแบบฟังก์ชันแบบย่อ (Arrow Functions)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="11">
	TypeScript รองรับ <b>Arrow Functions</b> (หรือ <b>Fat Arrow Functions</b> <code>=&gt;</code>) ซึ่งเป็นรูปแบบย่อของฟังก์ชันที่มีความกระชับมากขึ้น โดยเฉพาะอย่างยิ่งสำหรับฟังก์ชันที่มีชุดคำสั่งเดียว</p>
<p data-path-to-node="12">
	<b>รูปแบบ:</b> <code>const name = (parameter): ReturnType =&gt; expression</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-147 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-147 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQoQI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-147 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-147">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันหาพื้นที่วงกลม (Single Expression)
const circleArea = (radius: number): number =&gt; {
    // ใน TS ใช้ Math.PI
    return Math.PI * (radius * radius);
};

// ฟังก์ชันหาปริมาตรทรงกระบอกในรูปแบบ Arrow Function
const cylinderVolume = (area: number, height: number): number =&gt; area * height;

let volume = cylinderVolume(circleArea(10), 15);
console.log(`Volume of cylinder: ${volume.toFixed(2)}`);
// Output: Volume of cylinder: 4712.39</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="14" />
<p data-path-to-node="15">
	&nbsp;</p>
<h3>
	3. ประเภทของพารามิเตอร์ (Parameter Types)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="16">
	ใน TypeScript พารามิเตอร์จะถูกแยกเป็น 3 ประเภทหลัก:</p>
<p data-path-to-node="17">
	&nbsp;</p>
<h4>
	A. Required Parameters (พารามิเตอร์ที่จำเป็น)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="18">
	คือพารามิเตอร์ที่ต้องมีการส่งค่ามาให้เสมอ ซึ่งเป็นค่าตั้งต้นของการกำหนดพารามิเตอร์</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-148 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-148 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQogI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-148 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-148">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ทั้ง width และ height ต้องส่งค่ามาเสมอ
function calculateArea(width: number, height: number): number {
    return width * height;
}

// calculateArea(10); // Error: Expected 2 arguments, but got 1.</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="20">
	&nbsp;</p>
<h4>
	B. Optional Parameters (พารามิเตอร์ทางเลือก)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="21">
	ใช้เครื่องหมาย <b><code>?</code></b> ต่อท้ายชื่อพารามิเตอร์ เพื่อระบุว่าเป็นทางเลือกที่ผู้เรียกใช้งานจะส่งมาหรือไม่ก็ได้ โดยค่าเริ่มต้นจะเป็น <code>undefined</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-149 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-149 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQowI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-149 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-149">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// email เป็น optional parameter
function customer(name: string, phone: string, email?: string): void {
    console.log(`Name: ${name}`);
    console.log(`Phone: ${phone}`);
    console.log(`Email: ${email ?? &#39;N/A&#39;}`); // ใช้ Nullish Coalescing เพื่อแสดงค่าเริ่มต้น
}

customer(&quot;Ebiwayo&quot;, &quot;0812345678&quot;, &quot;ebiwa@google.com&quot;);
// Output: Email: ebiwa@google.com

customer(&quot;Ebiwayo&quot;, &quot;0812345678&quot;);
// Output: Email: N/A</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="23">
	&nbsp;</p>
<h4>
	C. Default Parameters (การกำหนดค่าเริ่มต้น)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="24">
	เป็นการกำหนดค่าให้กับพารามิเตอร์ หากผู้เรียกไม่ได้ส่งค่า Argument มาให้ พารามิเตอร์นั้นจะใช้ค่าเริ่มต้นที่กำหนดไว้</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-150 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-150 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpAI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-150 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-150">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// phone มีค่าเริ่มต้นเป็น &#39;000-000-0000&#39;
function customer(name: string, phone: string = &#39;000-000-0000&#39;): void {
    console.log(`Name: ${name}`);
    console.log(`Phone: ${phone}`);
}

customer(&quot;Ebiwayo&quot;);
// Output: Phone: 000-000-0000</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="26">
	<p data-path-to-node="26,0">
		<b>Optional Positional / Named Parameters:</b> TypeScript/JavaScript <b>ไม่มี</b> รูปแบบ Positional Parameters (<code>[]</code>) หรือ Named Parameters (<code>{}</code>) เหมือน Dart โดยตรง แต่สามารถทำ <b>Named Parameters</b> ได้โดยใช้เทคนิค <b>Object Destructuring</b> และ <b>Default Parameters</b> ร่วมกัน (เป็นแนวทางที่ซับซ้อนกว่าในบทความพื้นฐาน)</p>
</blockquote>
<hr data-path-to-node="27" />
<p data-path-to-node="28">
	&nbsp;</p>
<h3>
	4. พารามิเตอร์ส่วนที่เหลือ (Rest Parameters)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="29">
	เป็นคุณสมบัติที่ใช้เครื่องหมาย <b><code>...</code></b> เพื่อรวบรวม Argument ที่เหลือทั้งหมดที่ส่งมายังฟังก์ชันให้เป็น Array เดียว ซึ่งมีประโยชน์เมื่อไม่ทราบจำนวน Argument ที่แน่นอน</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-151 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-151 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpQI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-151 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-151">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
function sumAll(...numbers: number[]): number {
    return numbers.reduce((total, num) =&gt; total + num, 0);
}

console.log(sumAll(10, 20, 30, 40)); // Output: 100</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="31" />
<p data-path-to-node="32">
	&nbsp;</p>
<h3>
	5. การใช้ฟังก์ชัน Overloading (Function Overloading)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="33">
	เป็นคุณสมบัติของ TypeScript ที่ช่วยให้สามารถกำหนด <b>Multiple Signatures</b> (รูปแบบพารามิเตอร์และการคืนค่า) ให้กับฟังก์ชันที่มีชื่อเดียวกันได้ โดยมักใช้เมื่อฟังก์ชันมีการทำงานหลายรูปแบบตามชนิดข้อมูลที่รับเข้ามา</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-152 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-152 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpgI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-152 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-152">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// 1. Overload Signatures
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;

// 2. Implementation Signature (ต้องรองรับทุกรูปแบบ)
function combine(a: any, b: any): any {
    if (typeof a === &#39;number&#39; &amp;&amp; typeof b === &#39;number&#39;) {
        return a + b;
    }
    if (typeof a === &#39;string&#39; &amp;&amp; typeof b === &#39;string&#39;) {
        return a + &quot; &quot; + b;
    }
}

let sum = combine(5, 10);      // sum เป็น number
let text = combine(&quot;Hello&quot;, &quot;TS&quot;); // text เป็น string

console.log(sum);   // 15
console.log(text);  // Hello TS</pre>
	</div>
</div>
</code-block></response-element>
<hr data-path-to-node="35" />
<p data-path-to-node="36">
	&nbsp;</p>
<h3>
	6. ฟังก์ชัน Callback (Function as Argument)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="37">
	เนื่องจากฟังก์ชันเป็น Object จึงสามารถส่งฟังก์ชันหนึ่งเข้าไปเป็น Argument ในฟังก์ชันอื่นได้ ซึ่งเป็นพื้นฐานสำคัญของ <b>Callback Functions</b> ใน JavaScript/TypeScript</p>
<response-element ng-version="0.0.0-PLACEHOLDER"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-153 ng-star-inserted">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-153 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpwI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_2386af995295e6ea&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5e883da20de81e25&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-153 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-153">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันที่รับฟังก์ชันอื่นเป็นพารามิเตอร์
function executeOperation(a: number, b: number, callback: (result: number) =&gt; void): void {
    const result = a * b;
    callback(result); // เรียกใช้ callback function
}

// ฟังก์ชัน callback ที่ถูกส่งเข้าไป
function logResult(value: number): void {
    console.log(`The result is: ${value}`);
}

executeOperation(10, 5, logResult);
// Output: The result is: 50</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Mon, 17 Nov 2025 08:00:00 +0700</pubDate></item><item><title>การใช้คำสั่งควบคุมการทำงานของโปรแกรมในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/การใช้คำสั่งควบคุมการทำงานของโปรแกรมในภาษา_TypeScript_เบื้องต้น-1137.html</link><description><![CDATA[<p data-path-to-node="3">
	ใน TypeScript คำสั่งควบคุมการทำงาน (Control Flow Statements) ใช้เพื่อกำหนดทิศทางและลำดับการประมวลผลของโค้ด ตามเงื่อนไขหรือการวนซ้ำที่ต้องการ คำสั่งเหล่านี้เป็นพื้นฐานร่วมกันของภาษาในตระกูล C-style (รวมถึง JavaScript และ TypeScript)</p>
<p data-path-to-node="4">
	คำสั่งควบคุมการทำงานหลักที่เราจะกล่าวถึงได้แก่:</p>
<ul data-path-to-node="5">
	<li>
		<p data-path-to-node="5,0,0">
			<b>Conditional Statements:</b> <code>if</code>/<code>else</code>, <code>switch</code>/<code>case</code></p>
	</li>
	<li>
		<p data-path-to-node="5,1,0">
			<b>Looping Statements:</b> <code>for</code>, <code>while</code>, <code>do-while</code>, <code>for...of</code>, <code>for...in</code></p>
	</li>
	<li>
		<p data-path-to-node="5,2,0">
			<b>Control Keywords:</b> <code>break</code>, <code>continue</code></p>
	</li>
</ul>
<hr data-path-to-node="6" />
<p data-path-to-node="7">
	&nbsp;</p>
<h3>
	1. การตรวจสอบเงื่อนไข (Conditional Statements)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="8">
	&nbsp;</p>
<h4>
	A. การใช้งาน <code>if</code> และ <code>else</code></h4>
<p>
	&nbsp;</p>
<p data-path-to-node="9">
	ใช้สำหรับตรวจสอบเงื่อนไขที่เป็นจริง (<code>true</code>) หรือเป็นเท็จ (<code>false</code>)</p>
<blockquote data-path-to-node="10">
	<p data-path-to-node="10,0">
		<b>ข้อแตกต่างจาก Dart:</b> ใน TypeScript (และ JavaScript) เงื่อนไขในคำสั่ง <code>if</code> <b>ไม่จำเป็นต้องเป็นค่า Boolean เสมอไป</b> แต่สามารถเป็นค่าใด ๆ ก็ได้ ซึ่งจะถูกแปลงเป็น <b>Truthy</b> (เป็นจริง) หรือ <b>Falsy</b> (เป็นเท็จ) โดยอัตโนมัติ</p>
</blockquote>
<p data-path-to-node="11">
	<b>ค่า Falsy ใน TypeScript/JavaScript ได้แก่:</b></p>
<ul data-path-to-node="12">
	<li>
		<p data-path-to-node="12,0,0">
			<code>false</code></p>
	</li>
	<li>
		<p data-path-to-node="12,1,0">
			<code>0</code> (ตัวเลขศูนย์)</p>
	</li>
	<li>
		<p data-path-to-node="12,2,0">
			<code>&quot;&quot;</code> หรือ <code>&#39;&#39;</code> (สตริงว่าง)</p>
	</li>
	<li>
		<p data-path-to-node="12,3,0">
			<code>null</code></p>
	</li>
	<li>
		<p data-path-to-node="12,4,0">
			<code>undefined</code></p>
	</li>
	<li>
		<p data-path-to-node="12,5,0">
			<code>NaN</code> (Not a Number)</p>
	</li>
</ul>
<p data-path-to-node="13">
	<b>ตัวอย่างการใช้งาน <code>if</code> / <code>else if</code> / <code>else</code>:</b></p>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-107 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ5QE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-107 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-107">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let score: number = 75;

if (score &gt;= 80 &amp;&amp; score &lt;= 100) {
    console.log(&quot;Grade A&quot;);
} else if (score &gt;= 70) {
    console.log(&quot;Grade B&quot;);
} else if (score &gt;= 60) {
    console.log(&quot;Grade C&quot;);
} else {
    // เงื่อนไขอื่นๆ หรือค่าที่ไม่ได้อยู่ในช่วงที่กำหนด
    console.log(&quot;Grade F&quot;);
}

let name: string = &#39;Ebiwayo&#39;;
if (name) { // ตรวจสอบว่า name เป็นค่า Truthy (ไม่เป็นสตริงว่าง)
    console.log(`Hello! ${name}.`);
} else {
    console.log(&quot;Please fill your name.&quot;);
}</pre>
	</div>
</div>

<p data-path-to-node="15">
	&nbsp;</p>
<h4>
	B. Ternary Operator (Condition Expression)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="16">
	ใช้สำหรับกำหนดเงื่อนไข <code>if</code>/<code>else</code> แบบสั้น ๆ ในบรรทัดเดียว มักใช้ในการกำหนดค่าตัวแปร</p>
<p data-path-to-node="17">
	<b>รูปแบบ:</b> <code>condition ? expression_if_true : expression_if_false</code></p>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-108 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ5gE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-108 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-108">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let graduated: boolean = true;
let msg: string = graduated ? &quot;Congratulation!&quot; : &quot;Study harder&quot;;
console.log(msg); // Congratulation!</pre>
	</div>
</div>

<p data-path-to-node="19">
	&nbsp;</p>
<h4>
	C. Nullish Coalescing Operator (<code>??</code>)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="20">
	ใช้สำหรับตรวจสอบว่าค่าตัวแปรเป็น <code>null</code> หรือ <code>undefined</code> หรือไม่ ถ้าใช่ให้ใช้ค่าสำรองที่กำหนดไว้</p>
<p data-path-to-node="21">
	<b>รูปแบบ:</b> <code>expr1 ?? expr2</code></p>
<blockquote data-path-to-node="22">
	<p data-path-to-node="22,0">
		<b>Note:</b> Operator นี้เหมือนกับ <code>??</code> ในภาษา Dart และมีประโยชน์อย่างมากในการจัดการค่าว่างใน TypeScript</p>
</blockquote>
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-109 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ5wE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-109 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-109">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let username: string | null = null;
// หาก username เป็น null หรือ undefined ให้ใช้ &quot;Guest&quot;
let greetingMsg: string = username ?? &quot;Guest&quot;; 
console.log(greetingMsg); // Guest</pre>
	</div>
</div>

<hr data-path-to-node="24" />
<p data-path-to-node="25">
	&nbsp;</p>
<h3>
	2. คำสั่งวนซ้ำ (Looping Statements)</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="26">
	&nbsp;</p>
<h4>
	A. Standard <code>for</code> Loop</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="27">
	ใช้สำหรับการวนซ้ำตามจำนวนครั้งที่กำหนด มักใช้ในการเข้าถึงสมาชิกของ Array ด้วย Index</p>
<p data-path-to-node="28">
	<b>รูปแบบ:</b> <code>for (ค่าเริ่มต้น; เงื่อนไข; การเพิ่ม/ลดค่า)</code></p>
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-110 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ6AE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-110 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-110">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
for (let step = 0; step &lt; 3; step++) {
    console.log(&quot;Hello, World!&quot;);
}

let dayName: string[] = [&#39;Sunday&#39;, &#39;Monday&#39;, &#39;Tuesday&#39;];
for (let i = 0; i &lt; dayName.length; i++) {
    console.log(dayName[i]); // Sunday, Monday, Tuesday
}</pre>
	</div>
</div>

<p data-path-to-node="30">
	&nbsp;</p>
<h4>
	B. <code>for...of</code> Loop (การวนซ้ำค่า)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="31">
	ใช้สำหรับวนซ้ำเพื่อดึง <b>ค่า (Value)</b> ของสมาชิกแต่ละตัวจากโครงสร้างข้อมูลที่สามารถวนซ้ำได้ (<code>Iterable</code>) เช่น Array หรือ String</p>
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-111 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ6QE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-111 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-111">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;, &#39;Shopping&#39;];

for (const item of hobby) {
    console.log(item);
}
// Output: Reading, Jogging, Shopping</pre>
	</div>
</div>

<p data-path-to-node="33">
	&nbsp;</p>
<h4>
	C. <code>for...in</code> Loop (การวนซ้ำ Key/Index)</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="34">
	ใช้สำหรับวนซ้ำเพื่อดึง <b>คีย์ (Key)</b> หรือ <b>Index</b> ของสมาชิกจาก Object หรือ Array (ไม่แนะนำให้ใช้กับ Array)</p>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-112 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ6gE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-112 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-112">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let person = { name: &#39;Ebiwayo&#39;, age: 24, city: &#39;Bangkok&#39; };

for (const key in person) {
    // Key คือชื่อ Property
    console.log(`${key}: ${person[key]}`); 
}
// Output: name: Ebiwayo, age: 24, city: Bangkok</pre>
	</div>
</div>

<p data-path-to-node="36">
	&nbsp;</p>
<h4>
	D. <code>while</code> และ <code>do-while</code> Loops</h4>
<p>
	&nbsp;</p>
<p data-path-to-node="37">
	ใช้สำหรับการวนซ้ำในกรณีที่ไม่ทราบจำนวนรอบที่แน่นอน และจะหยุดเมื่อเงื่อนไขเป็นเท็จ</p>
<ul data-path-to-node="38">
	<li>
		<p data-path-to-node="38,0,0">
			<b><code>while</code>:</b> ตรวจสอบเงื่อนไขก่อนการทำงาน</p>
	</li>
	<li>
		<p data-path-to-node="38,1,0">
			<b><code>do-while</code>:</b> ทำงานอย่างน้อยหนึ่งครั้ง ก่อนตรวจสอบเงื่อนไข</p>
	</li>
</ul>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-113 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ6wE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-113 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-113">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let count = 0;

// while loop
while (count &lt; 3) {
    console.log(`While Count: ${count}`);
    count++;
}

// do-while loop (ทำงานอย่างน้อย 1 ครั้ง)
let i = 0;
do {
    console.log(`Do-While Count: ${i}`);
    i++;
} while (i &lt; 0); // จะแสดงผล 0 แม้เงื่อนไขเป็นเท็จ</pre>
	</div>
</div>

<p data-path-to-node="40">
	&nbsp;</p>
<h4>
	E. <code>break</code> และ <code>continue</code></h4>
<p>
	&nbsp;</p>
<ul data-path-to-node="41">
	<li>
		<p data-path-to-node="41,0,0">
			<b><code>break</code>:</b> ใช้สำหรับ <b>หยุด</b> การทำงานของ Loop หรือ <code>switch</code> ทันที และออกจากบล็อกคำสั่งนั้น</p>
	</li>
	<li>
		<p data-path-to-node="41,1,0">
			<b><code>continue</code>:</b> ใช้สำหรับ <b>ข้าม</b> การทำงานรอบปัจจุบันของ Loop และเริ่มการทำงานในรอบถัดไปทันที</p>
	</li>
</ul>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-114 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ7AE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-114 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-114">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
for (let i = 0; i &lt; 5; i++) {
    if (i === 2) {
        continue; // ข้ามการทำงานเมื่อ i = 2
    }
    if (i === 4) {
        break; // หยุด Loop เมื่อ i = 4
    }
    console.log(i); // 0, 1, 3
}</pre>
	</div>
</div>

<blockquote data-path-to-node="43">
	<p data-path-to-node="43,0">
		<b>Labels (ป้ายกำกับ):</b> TypeScript รองรับการใช้ป้ายกำกับ (Labels) เพื่อใช้ <code>break</code> หรือ <code>continue</code> ควบคุมการทำงานของ Loop นอกสุดในการวนซ้ำซ้อนกัน (Nested Loops) เช่นเดียวกับ Dart แต่ในทางปฏิบัติมักไม่นิยมใช้เนื่องจากทำให้โค้ดอ่านยาก</p>
</blockquote>
<hr data-path-to-node="44" />
<p data-path-to-node="45">
	&nbsp;</p>
<h3>
	3. การเลือกหลายทางด้วย <code>switch</code> Statement</h3>
<p>
	&nbsp;</p>
<p data-path-to-node="46">
	คำสั่ง <code>switch</code> ใช้สำหรับการเปรียบเทียบค่าเดียวกับหลาย ๆ กรณี (<code>case</code>) ที่เป็นไปได้</p>
<blockquote data-path-to-node="47">
	<p data-path-to-node="47,0">
		<b>ข้อแตกต่างสำคัญจาก Dart (Fall-through):</b> ใน TypeScript/JavaScript เมื่อโค้ดเข้าเงื่อนไข <code>case</code> ใดแล้ว จะทำงานต่อไปยัง <code>case</code> ถัดไปเรื่อย ๆ (Fall-through) หากไม่มีคำสั่ง <b><code>break</code></b> กำกับไว้ ซึ่งแตกต่างจาก Dart ที่ต้องการการควบคุมอย่างชัดเจนเพื่อป้องกัน Fall-through</p>
</blockquote>
<p data-path-to-node="48">
	<b>ตัวอย่างการใช้งาน <code>switch/case</code>:</b></p>

<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-115 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQ7QE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7676f0d902b73891&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_5dca6a4f1a20ddf3&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-115 ng-star-inserted">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-115">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let command: string = &#39;OPEN&#39;;

switch (command) {
    case &#39;CLOSED&#39;:
        console.log(&quot;Closed&quot;);
        break;
    case &#39;PENDING&#39;:
    case &#39;APPROVED&#39;: // หากไม่มี break จะทำงานต่อจาก PENDING มา APPROVED
        console.log(&quot;Pending or Approved&quot;);
        break;
    case &#39;OPEN&#39;:
        console.log(&quot;Open&quot;);
        // *** จำเป็นต้องมี break; เพื่อหยุดการทำงานของ switch ***
        break;
    default:
        console.log(&quot;Something else&quot;);
        // break; (ที่ default ไม่จำเป็นต้องมี แต่ใส่ไว้ได้)
}
// Output: Pending or Approved (ถ้า command = &#39;PENDING&#39;)
// Output: Open (ถ้า command = &#39;OPEN&#39;)</pre>
	</div>
</div>
]]></description><pubDate>Sun, 16 Nov 2025 08:00:00 +0700</pubDate></item><item><title>ประเภทข้อมูลและการใช้งานตัวแปร (Variable) ในภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/ประเภทข้อมูลและการใช้งานตัวแปร_(Variable)_ในภาษา_TypeScript_เบื้องต้น-1136.html</link><description><![CDATA[<p data-path-to-node="3" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript (TS) ตัวแปรเป็นเครื่องมือสำคัญในการจัดเก็บข้อมูล โดย TS เพิ่มความสามารถในการระบุ <b style="line-height: 1.15 !important; margin-top: 0px !important;">ชนิดข้อมูล (Type Annotation)</b> ให้กับตัวแปร เพื่อให้โค้ดมีความปลอดภัยและสามารถตรวจจับข้อผิดพลาดได้ตั้งแต่ขั้นตอนการเขียน</p>
<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	1. การประกาศตัวแปร (Variable Declaration)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ใช้รูปแบบการประกาศตัวแปรเดียวกับ JavaScript โดยมี 3 คีย์เวิร์ดหลัก คือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">var</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let</code>, และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code></p>
<table data-path-to-node="6" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">คีย์เวิร์ด</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ขอบเขต (Scope)</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">การกำหนดค่าใหม่ (Reassignment)</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="6,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">var</b></td>
			<td data-path-to-node="6,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				Function Scope</td>
			<td data-path-to-node="6,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ทำได้</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="6,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">let</b></td>
			<td data-path-to-node="6,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Block Scope</b> (แนะนำ)</td>
			<td data-path-to-node="6,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ทำได้</b></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="6,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">const</b></td>
			<td data-path-to-node="6,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Block Scope</b> (แนะนำ)</td>
			<td data-path-to-node="6,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">ทำไม่ได้</b> (ค่าคงที่)</td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่าง:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-72 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-72 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQoAE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-72 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-72" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let name1: string; // การประกาศแบบไม่กำหนดค่าเริ่มต้น
let name2: string = &#39;Ebiwayo&#39;; // ประกาศพร้อมกำหนดค่า (Type Annotation)

// ตัวแปรที่ประกาศโดยไม่กำหนดค่าเริ่มต้นจะมีค่าเป็น undefined
let price; // TypeScript จะอนุมาน (Inference) ว่าเป็นชนิด any

if (true) {
    let message = &#39;Hello&#39;; // ถูกจำกัดขอบเขตในบล็อก if นี้เท่านั้น
}
// console.log(message); // จะเกิด Error: Cannot find name &#39;message&#39;</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="9" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<p data-path-to-node="9,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<b style="line-height: 1.15 !important; margin-top: 0px !important;">ข้อควรจำใน TypeScript:</b></p>
	<ul data-path-to-node="9,1" style="padding-inline-start: 32px; line-height: 1.15 !important; margin-top: 0px !important;">
		<li style="line-height: 1.15 !important; margin-top: 0px !important;">
			<p data-path-to-node="9,1,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
				ตัวแปรที่ไม่ได้กำหนดค่าจะมีค่าเริ่มต้นเป็น <b style="line-height: 1.15 !important; margin-top: 0px !important;">undefined</b> (ไม่ใช่ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">null</code> เหมือน Dart เว้นแต่เราจะกำหนดเอง)</p>
		</li>
		<li style="line-height: 1.15 !important; margin-top: 0px !important;">
			<p data-path-to-node="9,1,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
				หากเราประกาศตัวแปรและกำหนดค่าเริ่มต้น TS จะใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Type Inference</b> ในการอนุมานชนิดข้อมูลโดยอัตโนมัติ (เช่น <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let age = 25;</code> จะถูกอนุมานเป็น <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">number</code>)</p>
		</li>
	</ul>
</blockquote>
<hr data-path-to-node="10" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	2. การกำหนดชนิดข้อมูลแบบชัดเจน (Type Annotations)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="12" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	หัวใจของ TypeScript คือการใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">:</code> ตามหลังชื่อตัวแปรเพื่อระบุชนิดข้อมูลอย่างชัดเจน (Type Annotation)</p>
<table data-path-to-node="13" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ชนิดข้อมูล (Type)</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">คำอธิบาย</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ตัวอย่าง</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="13,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">string</b></td>
			<td data-path-to-node="13,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ข้อความ (ใช้ตัวพิมพ์เล็ก)</td>
			<td data-path-to-node="13,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let name: string = &#39;Ebiwayo&#39;;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="13,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">number</b></td>
			<td data-path-to-node="13,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ตัวเลขทั้งหมด (จำนวนเต็ม/ทศนิยม)</td>
			<td data-path-to-node="13,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let age: number = 25;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="13,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">boolean</b></td>
			<td data-path-to-node="13,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ค่าตรรกะ (<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">true</code> หรือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">false</code>)</td>
			<td data-path-to-node="13,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let graduated: boolean = true;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="13,4,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">any</b></td>
			<td data-path-to-node="13,4,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ยอมรับได้ทุกชนิด (คล้าย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">dynamic</code> ใน Dart)</td>
			<td data-path-to-node="13,4,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let data: any = &#39;mixed value&#39;;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="13,5,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">unknown</b></td>
			<td data-path-to-node="13,5,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				เหมือน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">any</code> แต่ปลอดภัยกว่า (ต้องตรวจสอบชนิดข้อมูลก่อนใช้)</td>
			<td data-path-to-node="13,5,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let unknownData: unknown = 10;</code></td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="14" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างการระบุชนิดข้อมูล:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-73 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-73 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQpAE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-73 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-73" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let name: string = &#39;Ebiwayo&#39;;
let age: number = 25;
let weight: number = 48.5; // ทั้งจำนวนเต็มและทศนิยมใช้ number

// ถ้าค่าที่กำหนดไม่ตรงตามชนิดที่ประกาศ จะเกิด Error ตั้งแต่ตอน Compile
// name = 123; // Error: Type &#39;number&#39; is not assignable to type &#39;string&#39;.</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	3. ชนิดข้อมูลเพิ่มเติมที่สำคัญ (Key TypeScript Types)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<table data-path-to-node="17" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ชนิดข้อมูล</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">คำอธิบาย</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ตัวอย่าง</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Array</b></td>
			<td data-path-to-node="17,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				กลุ่มข้อมูลชนิดเดียวกัน (คล้าย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">List</code> ใน Dart)</td>
			<td data-path-to-node="17,1,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;];</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Tuple</b></td>
			<td data-path-to-node="17,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				Array ที่มีขนาดและชนิดข้อมูลของแต่ละตำแหน่งที่ตายตัว</td>
			<td data-path-to-node="17,2,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let position: [number, string] = [1, &#39;first&#39;];</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Union</b></td>
			<td data-path-to-node="17,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				ตัวแปรสามารถเป็นได้หลายชนิดข้อมูลที่กำหนดไว้</td>
			<td data-path-to-node="17,3,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				`let id: string</td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,4,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Enum</b></td>
			<td data-path-to-node="17,4,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				กลุ่มของค่าคงที่ที่มีชื่อเป็นมิตร</td>
			<td data-path-to-node="17,4,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">enum Direction { Up, Down, Left, Right }</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="17,5,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Object/Map</b></td>
			<td data-path-to-node="17,5,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				คล้าย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Map</code> ใน Dart, ใช้ Interface หรือ Type Alias</td>
			<td data-path-to-node="17,5,2,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let person: { city: string, country: string } = { ... };</code></td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="18" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	4. ตัวแปรคงที่ (Immutable Variables)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในการกำหนดตัวแปรที่เราไม่ต้องการเปลี่ยนแปลงค่า เราใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code> สำหรับตัวแปร และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">readonly</b> สำหรับคุณสมบัติ (Property) ภายใน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">class</code> หรือ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">interface</code></p>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code></h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code> ถูกใช้เพื่อป้องกันการ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Reassign</b> (กำหนดค่าใหม่) ให้กับตัวแปรหลักหลังจากการประกาศครั้งแรก</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-74 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-74 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQqAE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-74 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-74" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
const PI: number = 3.14159;
// PI = 3.14; // Error: Cannot assign to &#39;PI&#39; because it is a constant.

const list = [1, 2, 3];
// list = [4, 5, 6]; // Error: เปลี่ยนค่าตัวแปรหลักไม่ได้
list.push(4); // แต่ยังสามารถเปลี่ยนแปลงข้อมูลภายใน Array ได้ (Mutability)</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">readonly</code> ในคลาส</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript จะใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">readonly</b> ภายในคลาส เพื่อป้องกันการแก้ไขค่าของ Property หลังจากที่ Object ถูกสร้างขึ้น</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-75 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-75 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQqQE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-75 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-75" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Shape {
    readonly name: string;
    static readonly PI: number = 3.14; // static readonly สำหรับค่าคงที่ใน Class

    constructor(name: string) {
        this.name = name;
    }
}

let circle = new Shape(&#39;Circle&#39;);
// circle.name = &#39;Square&#39;; // Error: &#39;name&#39; is readonly.</pre>
	</div>
</div>
</code-block></response-element>
<blockquote data-path-to-node="26" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<p data-path-to-node="26,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<b style="line-height: 1.15 !important; margin-top: 0px !important;">ข้อสังเกต:</b> ใน TypeScript ไม่มีการจำแนกหน่วยความจำที่ซับซ้อนระหว่าง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">final</code> และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code> เหมือน Dart แนวคิดหลักคือการใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">const</b> สำหรับความไม่เปลี่ยนแปลงของตัวแปรในระดับ Block Scope</p>
</blockquote>
<hr data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;" />
<p data-path-to-node="28" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	5. ข้อมูลประเภทคอลเลกชัน (Collections: Array, Set, Map)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="29" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ใช้ Generics ในการกำหนดชนิดข้อมูลของสมาชิกในคอลเลกชัน ซึ่งช่วยเสริมความปลอดภัยของชนิดข้อมูล</p>
<p data-path-to-node="30" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Arrays (Lists)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="31" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Array</code> (วงเล็บเหลี่ยม <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">[]</code>) ในการจัดกลุ่มข้อมูล โดยมีการระบุชนิดข้อมูลของสมาชิกอย่างชัดเจน</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-76 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-76 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQqgE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-76 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-76" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// รูปแบบที่แนะนำ: ชนิดข้อมูล[]
let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;, &#39;Shopping&#39;];

// รูปแบบ Generics (คล้าย Dart): Array&lt;T&gt;
let numbers: Array&lt;number&gt; = [1, 2, 3];

// hobby.push(10); // Error: Argument of type &#39;number&#39; is not assignable to parameter of type &#39;string&#39;.</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="33" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Maps (Objects/Dictionaries)</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="34" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ใน TypeScript เราสามารถกำหนดโครงสร้างของ Object (คล้าย <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">Map</code> ใน Dart) ได้หลายวิธี โดยวิธีที่ง่ายที่สุดคือการใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Literal Object Type</b> หรือใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Interface/Type Alias</b> (ซึ่งเป็นหัวข้อในเชิงลึก)</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-77 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-77 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwidqd3A1_CQAxUAAAAAHQAAAAAQqwE" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_e1dd2c077e62c8a4&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_ad42a520c32d0c3c&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-77 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-77" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// Literal Object Type
let address: { [key: string]: string | string[] } = {
    &#39;city&#39;: [&#39;Bangkok&#39;, &#39;Nonthaburi&#39;], // key เป็น string, value เป็น string[]
    &#39;country&#39;: &#39;Thailand&#39;              // key เป็น string, value เป็น string
};

console.log(address[&#39;country&#39;]); // การเข้าถึงข้อมูลด้วย Key

// การใช้ Map Class (สำหรับ Key ที่ซับซ้อนกว่า string)
let userAges: Map&lt;string, number&gt; = new Map();
userAges.set(&#39;Ebiwayo&#39;, 24);
console.log(userAges.get(&#39;Ebiwayo&#39;)); // 24</pre>
	</div>
</div>
</code-block></response-element>]]></description><pubDate>Sat, 15 Nov 2025 08:00:00 +0700</pubDate></item><item><title>เรียนรู้การเขียนโปรแกรมและใช้งานโปรแกรมภาษา TypeScript เบื้องต้น</title><link>https://www.ninenik.com/เรียนรู้การเขียนโปรแกรมและใช้งานโปรแกรมภาษา_TypeScript_เบื้องต้น-1135.html</link><description><![CDATA[<p data-path-to-node="4" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript (TS)</b> คือภาษาโปรแกรมที่พัฒนาโดย Microsoft เป็นซูเปอร์เซต (Superset) ของ <b style="line-height: 1.15 !important; margin-top: 0px !important;">JavaScript</b> หมายความว่าโค้ด JavaScript ที่ถูกต้องทั้งหมดถือเป็นโค้ด TypeScript ที่ถูกต้องด้วย สิ่งที่ TypeScript เพิ่มเข้ามาคือระบบ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Static Typing</b> ที่เข้มงวด ทำให้สามารถตรวจจับข้อผิดพลาดในโค้ดได้ตั้งแต่ขั้นตอนการพัฒนา (Compile-Time) ก่อนที่โปรแกรมจะเริ่มทำงานจริง</p>
<p data-path-to-node="5" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เนื่องจากเบราว์เซอร์หรือ Node.js ยังไม่สามารถรันโค้ด TypeScript ได้โดยตรง จึงต้องมีการแปลง (Compile) โค้ด TS ให้เป็น JavaScript (JS) ก่อนใช้งาน</p>
<p data-path-to-node="6" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เราสามารถทดสอบโค้ดและรันคำสั่งภาษาโปรแกรม TypeScript ได้ผ่านเว็บไซต์ <response-element ng-version="0.0.0-PLACEHOLDER" style="line-height: 1.15 !important; margin-top: 0px !important;"><link-block _nghost-ng-c3977019300="" class="ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;"><a _ngcontent-ng-c3977019300="" _nghost-ng-c3491004705="" class="ng-star-inserted" data-hveid="0" data-ved="0CAAQ_4QMahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQWA" decode-data-ved="1" externallink="" href="https://www.typescriptlang.org/play" jslog="197247;track:generic_click,impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" rel="noopener" style="line-height: 1.15 !important; margin-top: 0px !important;" target="_blank">TypeScript Playground</a></link-block></response-element></p>
<link-block _nghost-ng-c3977019300="" class="ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;"><link-block _nghost-ng-c3977019300="" class="ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<p data-path-to-node="7" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	เริ่มต้น TypeScript Programming</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="8" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ในโปรแกรม TypeScript การเริ่มต้นเขียนโค้ดจะคล้ายกับ JavaScript โดยสามารถเริ่มด้วยการใช้ฟังก์ชัน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">console.log()</code> เพื่อแสดงข้อความ</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-37 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-37 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQWQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-37 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-37" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span>
		<div _ngcontent-ng-c4015166184="" class="buttons ng-tns-c4015166184-37 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
			&nbsp;</div>
	</div>
	<div _ngcontent-ng-c4015166184="" class="formatted-code-block-internal-container ng-tns-c4015166184-37" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<div _ngcontent-ng-c4015166184="" class="animated-opacity ng-tns-c4015166184-37" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<pre _ngcontent-ng-c4015166184="" class="jscript:controls" name="code" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">

// unction main() ไม่จำเป็น แต่ก็สามารถใช้ได้หากต้องการกำหนดขอบเขต
console.log(&#39;Hello, TypeScript World!&#39;);</pre>
		</div>
	</div>
</div>
</code-block></response-element>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ตัวแปร (Variables) และชนิดข้อมูล (Data Types)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="11" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript มีการกำหนดตัวแปรด้วยคำสั่ง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">var</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let</code>, และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">const</code> เหมือน JavaScript แต่จุดสำคัญคือความสามารถในการกำหนด <b style="line-height: 1.15 !important; margin-top: 0px !important;">ชนิดข้อมูล (Type Annotation)</b> ให้กับตัวแปรอย่างชัดเจน</p>
<table data-path-to-node="12" style="margin-bottom: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<thead style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ชนิดข้อมูลพื้นฐาน</strong></td>
			<td style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<strong style="line-height: 1.15 !important; margin-top: 0px !important; margin-bottom: 0px !important;">ตัวอย่าง</strong></td>
		</tr>
	</thead>
	<tbody style="line-height: 1.15 !important; margin-top: 0px !important;">
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,1,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">string</b> (ข้อความ)</td>
			<td data-path-to-node="12,1,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let name: string = &#39;Ninenik&#39;;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,2,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">number</b> (ตัวเลข)</td>
			<td data-path-to-node="12,2,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let age: number = 24;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,3,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">boolean</b> (ตรรกะ)</td>
			<td data-path-to-node="12,3,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let isActive: boolean = true;</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,4,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Array</b> (รายการ)</td>
			<td data-path-to-node="12,4,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;];</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,5,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">Tuple</b> (อาร์เรย์ที่มีชนิดข้อมูลและจำนวนจำกัด)</td>
			<td data-path-to-node="12,5,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let position: [number, string] = [1, &#39;first&#39;];</code></td>
		</tr>
		<tr style="line-height: 1.15 !important; margin-top: 0px !important;">
			<td data-path-to-node="12,6,0,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<b style="line-height: 1.15 !important; margin-top: 0px !important;">any</b> (ยอมรับได้ทุกชนิด)</td>
			<td data-path-to-node="12,6,1,0" style="border-style: solid; border-color: initial; line-height: 1.15 !important; margin-top: 0px !important;">
				<code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">let data: any = &#39;mixed data&#39;;</code></td>
		</tr>
	</tbody>
</table>
<p data-path-to-node="13" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างการกำหนดชนิดข้อมูล:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-38 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-38 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQXQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-38 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-38" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let name: string = &#39;Ebiwayo&#39;;
let age: number = 24;
let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;, &#39;Shopping&#39;];

// การกำหนด Object จะใช้ Interface หรือ Type Alias
let address: { city: string[], country: string } = {
    city: [&#39;Bangkok&#39;],
    country: &#39;Thailand&#39;
};

console.log(`Name type: ${typeof name}`);
console.log(`Age type: ${typeof age}`);</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="15" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การควบคุมชุดคำสั่ง (Control Flow Statements)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="16" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	รูปแบบการควบคุมการทำงานของโปรแกรมใน TypeScript ใช้รูปแบบชุดคำสั่งเดียวกับ Dart/JavaScript ทั่วไป เช่น การใช้งาน <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">if/else</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">for loops</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">while/do-while loops</code>, <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">break/continue</code>, และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">switch/case</code></p>
<p data-path-to-node="17" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างการควบคุม:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-39 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-39 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQXg" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-39 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-39" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
let age = 24;
let hobby: string[] = [&#39;Reading&#39;, &#39;Jogging&#39;, &#39;Shopping&#39;];

for (let i = 0; i &lt; hobby.length; i++) {
    console.log(hobby[i]);
}

if (age &gt; 18) {
    console.log(&#39;You are old enough.&#39;);
} else {
    console.log(&#39;Still young.&#39;);
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="19" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	ฟังก์ชัน (Functions)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="20" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	สำหรับการใช้งานฟังก์ชันใน TypeScript เราสามารถ (และควร) กำหนดชนิดข้อมูลของ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Arguments (พารามิเตอร์)</b> และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Return Type (ชนิดข้อมูลที่คืนค่า)</b> เพื่อเพิ่มความปลอดภัยของโค้ด</p>
<p data-path-to-node="21" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่างฟังก์ชันที่มีการกำหนดชนิดข้อมูล:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-40 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-40 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQXw" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-40 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-40" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// สร้างฟังก์ชันหาปี พ.ศ. เกิดจาก อายุ
function yearBorned(age: number): number {
    const currentYear = new Date().getFullYear();
    // คืนค่าเป็นปี พ.ศ. (ปี ค.ศ. + 543)
    return (currentYear - age) + 543;
}

let name: string = &#39;Ebiwayo&#39;;
let age: number = 24;
let bornedYear = yearBorned(age);

console.log(`${name} เกิดปี พ.ศ. ${bornedYear}`);
// ผลลัพธ์: Ebiwayo เกิดปี พ.ศ. 25XX</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="23" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การคอมเมนต์ (Comments)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="24" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การคอมเมนต์หรือปิดการทำงานของโค้ดบางส่วนใช้รูปแบบเดียวกับภาษา Dart/JavaScript:</p>
<ul data-path-to-node="25" style="padding-inline-start: 32px; font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="25,0,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Single-line:</b> ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">//</code> ไว้หน้าบรรทัด</p>
	</li>
	<li style="line-height: 1.15 !important; margin-top: 0px !important;">
		<p data-path-to-node="25,1,0" style="line-height: 1.15 !important; margin-top: 0px !important;">
			<b style="line-height: 1.15 !important; margin-top: 0px !important;">Multi-line:</b> ใช้ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">/*</code> เปิด และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">*/</code> ปิด สำหรับการคอมเมนต์หลายบรรทัด</p>
	</li>
</ul>
<p data-path-to-node="26" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การจัดการโมดูล (Imports/Exports)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="27" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ใช้ระบบโมดูล (Module) ของ ES6 ในการนำเข้าและส่งออกโค้ดจากไฟล์อื่น โดยใช้คำสั่ง <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">import</code> และ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">export</code></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-41 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-41 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQYA" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-41 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-41" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ไฟล์ math.ts
export const PI = 3.14159;
export function calculate(a: number): number {
    return a * 2;
}

// ไฟล์หลัก index.ts
import { PI, calculate } from &#39;./math&#39;;
// import * as MathUtils from &#39;./math&#39;; // การ import พร้อมกำหนดชื่ออ้างอิง

console.log(PI); // แสดงค่า PI
// console.log(MathUtils.PI); // หากใช้การ import แบบ * as</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="29" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	คลาส (Classes)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="30" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การกำหนด <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">class</code> เป็นรูปแบบการเขียนโปรแกรมเชิงวัตถุ (OOP) ใน TypeScript ซึ่งรองรับคุณสมบัติเต็มรูปแบบของ OOP รวมถึงการกำหนดตัวสร้าง (Constructor) และเมธอด (Method)</p>
<p data-path-to-node="31" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่าง Class เบื้องต้น:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-42 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-42 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQYQ" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-42 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-42" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Rectangle {
    // กำหนด Property และชนิดข้อมูล
    private width: number;
    private height: number;

    // Constructor: กำหนดตัวสร้างเมื่อมีการสร้าง Object
    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    // Method: ฟังก์ชันสำหรับการหาพื้นที่
    public area(): number {
        return this.width * this.height;
    }
}

// ทดสอบใช้งาน Rectangle class
let myRect = new Rectangle(100, 50);
console.log(myRect.area()); // 5000</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="33" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	อินเทอร์เฟซ (Interfaces) และ Abstract Class</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="34" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Interfaces</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="35" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript ใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">interface</b> ในการกำหนดโครงสร้าง (Contract) ของ Object อย่างชัดเจน ต่างจาก Dart ที่ทุกคลาสเป็น Interface โดยปริยาย Interface เป็นคุณสมบัติที่สำคัญมากใน TypeScript</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-43 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-43 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQYg" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-43 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-43" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
interface Shape {
    width: number;
    height: number;
    area(): number;
    perimeter(): number;
}

class Square implements Shape {
    width: number;
    height: number;

    constructor(size: number) {
        this.width = size;
        this.height = size;
    }

    area(): number {
        return this.width * this.height;
    }

    perimeter(): number {
        return this.width * 4;
    }
}</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="37" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h4 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	Abstract Class</h4>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="38" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">abstract class</b> ใช้เพื่อกำหนดคลาสที่เป็นพิมพ์เขียวโดยตรง ซึ่งไม่สามารถสร้างเป็น Object ได้เอง และต้องมีคลาสลูก (Child Class) มาสืบทอด (Extend) เท่านั้น มักใช้ร่วมกับ <code style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">abstract method</code> ที่ต้องถูก Override ในคลาสลูก</p>
<p data-path-to-node="39" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การสืบทอด (Inheritance)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="40" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การสืบทอดใช้คีย์เวิร์ด <b style="line-height: 1.15 !important; margin-top: 0px !important;">extends</b> เพื่อให้คลาสลูกสามารถนำ Property และ Method จากคลาสแม่ (Parent Class) มาใช้ซ้ำได้ โดยใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">super</b> เพื่ออ้างถึง Method ของคลาสแม่</p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-44 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-44 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQYw" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-44 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-44" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
class Tv {
    turnOn() {
        console.log(&quot;Illuminate Display&quot;);
        console.log(&quot;Activate IR Sensor&quot;);
    }
}

// สืบทอด class ย่อยด้วยการ extends จาก parent class
class SmartTv extends Tv {
    turnOn() {
        super.turnOn(); // เรียกใช้ method ของ parent class
        console.log(&quot;Boot Network Interface&quot;);
        console.log(&quot;Initialize Memory&quot;);
    }
}

new Tv().turnOn();
// Output: Illuminate Display, Activate IR Sensor

new SmartTv().turnOn();
// Output: Illuminate Display, Activate IR Sensor, Boot Network Interface, Initialize Memory</pre>
	</div>
</div>
</code-block></response-element>
<p data-path-to-node="42" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<h3 style="font-family: &quot;Google Sans&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	การทำงานแบบอะซิงโครนัส (Asynchronous Programming)</h3>
<p style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	&nbsp;</p>
<p data-path-to-node="43" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	TypeScript (และ JavaScript ยุคใหม่) จัดการกับการดำเนินการแบบ Asynchronous (เช่น การเรียกข้อมูลจาก API, การอ่านไฟล์) โดยใช้ <b style="line-height: 1.15 !important; margin-top: 0px !important;">Promises</b>, <b style="line-height: 1.15 !important; margin-top: 0px !important;">async</b>, และ <b style="line-height: 1.15 !important; margin-top: 0px !important;">await</b> เพื่อให้โค้ดมีความอ่านง่ายและทำงานแบบ Non-blocking</p>
<p data-path-to-node="44" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;">
	<b style="line-height: 1.15 !important; margin-top: 0px !important;">ตัวอย่าง Async/Await:</b></p>
<response-element ng-version="0.0.0-PLACEHOLDER" style="font-family: &quot;Google Sans Text&quot;, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"><code-block _nghost-ng-c4015166184="" class="ng-tns-c4015166184-45 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
<div _ngcontent-ng-c4015166184="" class="code-block ng-tns-c4015166184-45 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwidqd3A1_CQAxUAAAAAHQAAAAAQZA" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_7621d351e131e524&quot;,&quot;c_f15f14dca7650df5&quot;,null,&quot;rc_4e6566b2e48e2de9&quot;,null,null,&quot;th&quot;,null,1,null,null,1,0]]" style="line-height: 1.15 !important; margin-top: 0px !important;">
	<div _ngcontent-ng-c4015166184="" class="code-block-decoration header-formatted gds-title-s ng-tns-c4015166184-45 ng-star-inserted" style="line-height: 1.15 !important; margin-top: 0px !important;">
		<span _ngcontent-ng-c4015166184="" class="ng-tns-c4015166184-45" style="line-height: 1.15 !important; margin-top: 0px !important;">TypeScript</span><br />
		<pre class="jscript:controls" name="code">
// ฟังก์ชันจำลองการดึงข้อมูลที่ใช้เวลา 1 วินาที และคืนค่าเป็น Promise&lt;string&gt;
function getUserOrder(): Promise&lt;string&gt; {
    return new Promise((resolve) =&gt; {
        setTimeout(() =&gt; {
            resolve(&#39;Big Mac and Fries&#39;);
        }, 1000);
    });
}

// ฟังก์ชันหลักที่ใช้ async/await
async function createOrderMessage(): Promise&lt;string&gt; {
    try {
        // await ทำให้โค้ดหยุดรอจนกว่า Promise จะเสร็จสมบูรณ์ (เหมือนกับการทำงานแบบ Synchronous)
        const order = await getUserOrder();
        return `Your order is: ${order}`;
    } catch (error) {
        return &#39;Could not retrieve order.&#39;;
    }
}

// เรียกใช้งาน
createOrderMessage().then(message =&gt; {
    console.log(message);
    // ผลลัพธ์จะปรากฏหลังจากผ่านไป 1 วินาที
});</pre>
	</div>
</div>
</code-block></response-element></link-block></link-block>]]></description><pubDate>Fri, 14 Nov 2025 10:24:52 +0700</pubDate></item></channel></rss>