diff options
| -rw-r--r-- | th-th/typescript.th.html.markdown | 84 |
1 files changed, 42 insertions, 42 deletions
diff --git a/th-th/typescript.th.html.markdown b/th-th/typescript.th.html.markdown index ce1d3bb8..29f9b16e 100644 --- a/th-th/typescript.th.html.markdown +++ b/th-th/typescript.th.html.markdown @@ -9,10 +9,10 @@ lang: th-th TypeScript เป็นภาษาที่มีเป้าหมายเพื่อทำให้การพัฒนาซอฟต์แวร์ขนาดใหญ่ด้วย JavaScript ทำได้ง่ายขึ้น โดยที่ TypeScript ได้เพิ่มแนวคิดที่พบทั่วไป อาทิ classes, modules, interfaces, generics และ static typing (ไม่บังคับ) เข้าไปในภาษา JavaScript ดังนั้น TypeScript ก็เลยเป็น Super Set ของ JavaScript อีกที โค้ด JavaScript ทุกส่วน ก็คือโค้ดที่ทำงานได้ถูกต้องใน TypeScript ทำให้เราเพิ่ม TypeScript เข้าไปใช้ในโปรเจคการพัฒนาของเราได้ไม่ยากเลย เพราะ TypeScript คอมไพล์ผลลัพธ์ออกมาเป็น JavaScript ในท้ายสุดอยู่ดี -บทความนี้จะเน้นเฉพาะ syntax ส่วนขยายของ TypeScript ซึ่งจะไม่รวมกับที่มีใน [JavaScript](/docs/javascript). +บทความนี้จะเน้นเฉพาะ syntax ส่วนขยายของ TypeScript ซึ่งจะไม่รวมกับที่มีใน [JavaScript](/docs/javascript) การทดสอบเขียน TypeScript เริ่มได้ง่าย ๆ โดยเข้าไปที่ -[Playground] (http://www.typescriptlang.org/Playground) ซึ่งคุณจะเขียนโค้ดพร้อม autocomplete และเห็นเลยว่ามันจะแปลงมาเป็นผลลัพธ์แบบ JavaScript อย่างไร +[Playground](http://www.typescriptlang.org/Playground) ซึ่งคุณจะเขียนโค้ดพร้อม autocomplete และเห็นเลยว่ามันจะแปลงมาเป็นผลลัพธ์แบบ JavaScript อย่างไร ```ts // TypeScript มี data type พื้นฐาน 3 แบบ @@ -62,7 +62,7 @@ let f4 = (i: number) => { return i * i; } // เขียนแบบ "Fat arrow" อนุมานชนิดส่งกลับ พร้อมกับไม่มีวงเล็บ แปลว่าไม่ต้องมี return keyword ด้วย let f5 = (i: number) => i * i; -// Interfaces นั้นเป็นเหมือนเราออกแบบโครงสร้าง คุณสมบัติต่าง ๆ ตอนเอาไปใช้ จะต้องเป็นไปตาม interface นั้น ๆ +// Interfaces นั้นเป็นเหมือนเราออกแบบโครงสร้าง คุณสมบัติต่าง ๆ ตอนเอาไปใช้ จะต้องเป็นไปตาม interface นั้น ๆ เหมือนกับเป็นการกำหนดสเป็คของ "ชนิดข้อมูล" interface Person { name: string; // Optional properties กำหนดด้วย "?" @@ -71,70 +71,70 @@ interface Person { move(): void; } -// Object that implements the "Person" interface -// Can be treated as a Person since it has the name and move properties +// Object นี้ implements "Person" interface ทำให้มันเป็นชนิด Person และมันก็มี property name และ function move() let p: Person = { name: "Bobby", move: () => { } }; -// Objects that have the optional property: +// Objects นี้เป็นชนิด Person ด้วย และมี optional property หรือ age?: นั่นเอง let validPerson: Person = { name: "Bobby", age: 42, move: () => { } }; -// Is not a person because age is not a number +// ไม่ใช่ Person เพราะ age: ต้องเป็น number เท่านั้น ตามข้อกำหนดใน interface Person let invalidPerson: Person = { name: "Bobby", age: true }; -// Interfaces can also describe a function type +// Interfaces ยังนำมาใช้ในลักษณะของ function ได้อีกด้วย interface SearchFunc { (source: string, subString: string): boolean; } -// Only the parameters' types are important, names are not important. +// เฉพาะชนิด parameters เท่านั้นที่สำคัญ ชื่อของมันไม่จำเป็นต้องเหมือน let mySearch: SearchFunc; mySearch = function (src: string, sub: string) { return src.search(sub) != -1; } -// Classes - members are public by default +// สมาชิกใน class จะเข้าถึงได้แบบ public เป็นค่าปริยาย class Point { // Properties + // ตั้งค่า Properties ของ class นี้ x: number; - // Constructor - the public/private keywords in this context will generate - // the boiler plate code for the property and the initialization in the - // constructor. - // In this example, "y" will be defined just like "x" is, but with less code - // Default values are also supported + // Constructor + // เราใส่ public/private keywords ตรงนี้ได้ มีผลเหมือนกันกับกำหนด x ด้านบน + // ในตัวอย่าง y มีการกำหนดเช่นเดียวกับ x แต่พิมพ์สั้นกว่า + // สังเกตว่า มีการกำหนดค่าปริยายให้ parameters ได้ด้วย constructor(x: number, public y: number = 0) { this.x = x; } // Functions - dist() { return Math.sqrt(this.x * this.x + this.y * this.y); } + dist() { return Math.sqrt(this.x*this.x + this.y*this.y); } // Static members static origin = new Point(0, 0); } -// Classes can be explicitly marked as implementing an interface. -// Any missing properties will then cause an error at compile-time. +// Classes สามารถระบุชนิด interface ที่ต้องการได้ตรง ๆ ด้วยเช่นโค้ดด้านล่าง +// แต่อะไรที่จะ implement มานั้น ถ้าไม่ได้กำหนดไว้ใน constructor ก็จะเกิดข้อผิดพลาดตอนคอมไพล์ class PointPerson implements Person { - name: string + name: string // ตรงนี้จะผิด แก้ไขโดยการไปสร้างตัวรับค่าเข้ามาผ่านทาง constructor move() {} } let p1 = new Point(10, 20); -let p2 = new Point(25); //y will be 0 +let p2 = new Point(25); //y เป็น 0 เพราะกำหนดค่าปริยายไว้ให้แล้ว -// Inheritance +// Inheritance การสืบทอดคุณสมบัติ class Point3D extends Point { constructor(x: number, y: number, public z: number = 0) { - super(x, y); // Explicit call to the super class constructor is mandatory + super(x, y); // เราจะต้องเรียกใช้ super class constructor โดยตรง } - // Overwrite + // Overwrite ฟังก์ชั่นที่มีอยู่เดิมใน Point dist() { let d = super.dist(); return Math.sqrt(d * d + this.z * this.z); } } -// Modules, "." can be used as separator for sub modules +// Modules ใช้เป็นกลุ่มของ class เราใช้ "." เป็นตัวแบ่ง sub modules +// อย่างกรณีนี้จะเป็น Module.Class เช่น Geometry.Square module Geometry { export class Square { constructor(public sideLength: number = 0) { @@ -147,7 +147,7 @@ module Geometry { let s1 = new Geometry.Square(5); -// Local alias for referencing a module +// เราทำให้เรียกใช้ง่ายขึ้นโดยการใช้ alias มาอ้างชื่อ module แบบเดียวกับบางภาษา เช่น Python import G = Geometry; let s2 = new G.Square(10); @@ -165,37 +165,37 @@ interface Pair<T> { item2: T; } -// And functions +// และ functions let pairToTuple = function <T>(p: Pair<T>) { return new Tuple(p.item1, p.item2); }; let tuple = pairToTuple({ item1: "hello", item2: "world" }); -// Including references to a definition file: +// เราเรียกใช้ไฟล์ definition แบบนี้: /// <reference path="jquery.d.ts" /> -// Template Strings (strings that use backticks) -// String Interpolation with Template Strings +// Template Strings ( คือ strings ที่ใช้ backticks ครอบ — "`" ปุ่มบนซ้ายคีย์บอร์ด ) +// แทรกข้อความใน String ด้วย Template Strings let name = 'Tyrone'; let greeting = `Hi ${name}, how are you?` -// Multiline Strings with Template Strings +// Strings หลายบรรทัดก็ทำได้ใน Template Strings let multiline = `This is an example of a multiline string`; -// READONLY: New Feature in TypeScript 3.1 +// READONLY: ความสามารถใหม่ใน TypeScript 3.1 interface Person { readonly name: string; readonly age: number; } var p1: Person = { name: "Tyrone", age: 42 }; -p1.age = 25; // Error, p1.x is read-only +p1.age = 25; // Error แน่นอน เพราะ p1.x ถูกกำหนดเป็น read-only -var p2 = { name: "John", age: 60 }; -var p3: Person = p2; // Ok, read-only alias for p2 -p3.x = 35; // Error, p3.x is read-only -p2.x = 45; // Ok, but also changes p3.x because of aliasing +var p2 = { name: "John", age: 60 }; // สังเกตว่า p2 ไม่ได้กำหนดเป็น Person +var p3: Person = p2; // ทำได้ เป็น read-only alias ของ p2 และกำหนดเป็น Person +p3.x = 35; // Error p3.x ก็เป็น read-only +p2.x = 45; // Ok ทำได้แต่ก็จะเปลี่ยนค่า p3.x ด้วย เพราะ p3 เป็น alias ของ p2 class Car { readonly make: string; @@ -203,17 +203,17 @@ class Car { readonly year = 2018; constructor() { - this.make = "Unknown Make"; // Assignment permitted in constructor - this.model = "Unknown Model"; // Assignment permitted in constructor + this.make = "Unknown Make"; // อนุญาตให้กำหนดค่าได้ใน constructor แม้ว่าจะ read-only + this.model = "Unknown Model"; // อนุญาตให้กำหนดค่าได้ใน constructor แม้ว่าจะ read-only } } let numbers: Array<number> = [0, 1, 2, 3, 4]; let moreNumbers: ReadonlyArray<number> = numbers; -moreNumbers[5] = 5; // Error, elements are read-only -moreNumbers.push(5); // Error, no push method (because it mutates array) -moreNumbers.length = 3; // Error, length is read-only -numbers = moreNumbers; // Error, mutating methods are missing +moreNumbers[5] = 5; // Error, สมาชิกอะเรย์เป็น read-only แปลว่า ห้ามแก้ไข +moreNumbers.push(5); // Error, push method ใช้ไม่ได้ เพราะมันจะไปแก้ไข read-only array +moreNumbers.length = 3; // Error, เพราะ length ก็ต้อง read-only +numbers = moreNumbers; // Error, method ที่ทำให้อะเรย์เปลี่ยนได้จะไม่อนุญาต ``` ## อ่านเพิ่มเติมที่ |