mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2025-01-17 21:49:22 +01:00
finish translate TypeScript to Thai language
This commit is contained in:
parent
e616d43963
commit
121627522d
@ -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 ในท้ายสุดอยู่ดี
|
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 เริ่มได้ง่าย ๆ โดยเข้าไปที่
|
การทดสอบเขียน TypeScript เริ่มได้ง่าย ๆ โดยเข้าไปที่
|
||||||
[Playground] (http://www.typescriptlang.org/Playground) ซึ่งคุณจะเขียนโค้ดพร้อม autocomplete และเห็นเลยว่ามันจะแปลงมาเป็นผลลัพธ์แบบ JavaScript อย่างไร
|
[Playground](http://www.typescriptlang.org/Playground) ซึ่งคุณจะเขียนโค้ดพร้อม autocomplete และเห็นเลยว่ามันจะแปลงมาเป็นผลลัพธ์แบบ JavaScript อย่างไร
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
// TypeScript มี data type พื้นฐาน 3 แบบ
|
// TypeScript มี data type พื้นฐาน 3 แบบ
|
||||||
@ -62,7 +62,7 @@ let f4 = (i: number) => { return i * i; }
|
|||||||
// เขียนแบบ "Fat arrow" อนุมานชนิดส่งกลับ พร้อมกับไม่มีวงเล็บ แปลว่าไม่ต้องมี return keyword ด้วย
|
// เขียนแบบ "Fat arrow" อนุมานชนิดส่งกลับ พร้อมกับไม่มีวงเล็บ แปลว่าไม่ต้องมี return keyword ด้วย
|
||||||
let f5 = (i: number) => i * i;
|
let f5 = (i: number) => i * i;
|
||||||
|
|
||||||
// Interfaces นั้นเป็นเหมือนเราออกแบบโครงสร้าง คุณสมบัติต่าง ๆ ตอนเอาไปใช้ จะต้องเป็นไปตาม interface นั้น ๆ
|
// Interfaces นั้นเป็นเหมือนเราออกแบบโครงสร้าง คุณสมบัติต่าง ๆ ตอนเอาไปใช้ จะต้องเป็นไปตาม interface นั้น ๆ เหมือนกับเป็นการกำหนดสเป็คของ "ชนิดข้อมูล"
|
||||||
interface Person {
|
interface Person {
|
||||||
name: string;
|
name: string;
|
||||||
// Optional properties กำหนดด้วย "?"
|
// Optional properties กำหนดด้วย "?"
|
||||||
@ -71,70 +71,70 @@ interface Person {
|
|||||||
move(): void;
|
move(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Object that implements the "Person" interface
|
// Object นี้ implements "Person" interface ทำให้มันเป็นชนิด Person และมันก็มี property name และ function move()
|
||||||
// Can be treated as a Person since it has the name and move properties
|
|
||||||
let p: Person = { name: "Bobby", 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: () => { } };
|
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 };
|
let invalidPerson: Person = { name: "Bobby", age: true };
|
||||||
|
|
||||||
// Interfaces can also describe a function type
|
// Interfaces ยังนำมาใช้ในลักษณะของ function ได้อีกด้วย
|
||||||
interface SearchFunc {
|
interface SearchFunc {
|
||||||
(source: string, subString: string): boolean;
|
(source: string, subString: string): boolean;
|
||||||
}
|
}
|
||||||
// Only the parameters' types are important, names are not important.
|
// เฉพาะชนิด parameters เท่านั้นที่สำคัญ ชื่อของมันไม่จำเป็นต้องเหมือน
|
||||||
let mySearch: SearchFunc;
|
let mySearch: SearchFunc;
|
||||||
mySearch = function (src: string, sub: string) {
|
mySearch = function (src: string, sub: string) {
|
||||||
return src.search(sub) != -1;
|
return src.search(sub) != -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Classes - members are public by default
|
// สมาชิกใน class จะเข้าถึงได้แบบ public เป็นค่าปริยาย
|
||||||
class Point {
|
class Point {
|
||||||
// Properties
|
// Properties
|
||||||
|
// ตั้งค่า Properties ของ class นี้
|
||||||
x: number;
|
x: number;
|
||||||
|
|
||||||
// Constructor - the public/private keywords in this context will generate
|
// Constructor
|
||||||
// the boiler plate code for the property and the initialization in the
|
// เราใส่ public/private keywords ตรงนี้ได้ มีผลเหมือนกันกับกำหนด x ด้านบน
|
||||||
// constructor.
|
// ในตัวอย่าง y มีการกำหนดเช่นเดียวกับ x แต่พิมพ์สั้นกว่า
|
||||||
// In this example, "y" will be defined just like "x" is, but with less code
|
// สังเกตว่า มีการกำหนดค่าปริยายให้ parameters ได้ด้วย
|
||||||
// Default values are also supported
|
|
||||||
|
|
||||||
constructor(x: number, public y: number = 0) {
|
constructor(x: number, public y: number = 0) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Functions
|
// 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 members
|
||||||
static origin = new Point(0, 0);
|
static origin = new Point(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Classes can be explicitly marked as implementing an interface.
|
// Classes สามารถระบุชนิด interface ที่ต้องการได้ตรง ๆ ด้วยเช่นโค้ดด้านล่าง
|
||||||
// Any missing properties will then cause an error at compile-time.
|
// แต่อะไรที่จะ implement มานั้น ถ้าไม่ได้กำหนดไว้ใน constructor ก็จะเกิดข้อผิดพลาดตอนคอมไพล์
|
||||||
class PointPerson implements Person {
|
class PointPerson implements Person {
|
||||||
name: string
|
name: string // ตรงนี้จะผิด แก้ไขโดยการไปสร้างตัวรับค่าเข้ามาผ่านทาง constructor
|
||||||
move() {}
|
move() {}
|
||||||
}
|
}
|
||||||
|
|
||||||
let p1 = new Point(10, 20);
|
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 {
|
class Point3D extends Point {
|
||||||
constructor(x: number, y: number, public z: number = 0) {
|
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() {
|
dist() {
|
||||||
let d = super.dist();
|
let d = super.dist();
|
||||||
return Math.sqrt(d * d + this.z * this.z);
|
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 {
|
module Geometry {
|
||||||
export class Square {
|
export class Square {
|
||||||
constructor(public sideLength: number = 0) {
|
constructor(public sideLength: number = 0) {
|
||||||
@ -147,7 +147,7 @@ module Geometry {
|
|||||||
|
|
||||||
let s1 = new Geometry.Square(5);
|
let s1 = new Geometry.Square(5);
|
||||||
|
|
||||||
// Local alias for referencing a module
|
// เราทำให้เรียกใช้ง่ายขึ้นโดยการใช้ alias มาอ้างชื่อ module แบบเดียวกับบางภาษา เช่น Python
|
||||||
import G = Geometry;
|
import G = Geometry;
|
||||||
|
|
||||||
let s2 = new G.Square(10);
|
let s2 = new G.Square(10);
|
||||||
@ -165,37 +165,37 @@ interface Pair<T> {
|
|||||||
item2: T;
|
item2: T;
|
||||||
}
|
}
|
||||||
|
|
||||||
// And functions
|
// และ functions
|
||||||
let pairToTuple = function <T>(p: Pair<T>) {
|
let pairToTuple = function <T>(p: Pair<T>) {
|
||||||
return new Tuple(p.item1, p.item2);
|
return new Tuple(p.item1, p.item2);
|
||||||
};
|
};
|
||||||
|
|
||||||
let tuple = pairToTuple({ item1: "hello", item2: "world" });
|
let tuple = pairToTuple({ item1: "hello", item2: "world" });
|
||||||
|
|
||||||
// Including references to a definition file:
|
// เราเรียกใช้ไฟล์ definition แบบนี้:
|
||||||
/// <reference path="jquery.d.ts" />
|
/// <reference path="jquery.d.ts" />
|
||||||
|
|
||||||
// Template Strings (strings that use backticks)
|
// Template Strings ( คือ strings ที่ใช้ backticks ครอบ — "`" ปุ่มบนซ้ายคีย์บอร์ด )
|
||||||
// String Interpolation with Template Strings
|
// แทรกข้อความใน String ด้วย Template Strings
|
||||||
let name = 'Tyrone';
|
let name = 'Tyrone';
|
||||||
let greeting = `Hi ${name}, how are you?`
|
let greeting = `Hi ${name}, how are you?`
|
||||||
// Multiline Strings with Template Strings
|
// Strings หลายบรรทัดก็ทำได้ใน Template Strings
|
||||||
let multiline = `This is an example
|
let multiline = `This is an example
|
||||||
of a multiline string`;
|
of a multiline string`;
|
||||||
|
|
||||||
// READONLY: New Feature in TypeScript 3.1
|
// READONLY: ความสามารถใหม่ใน TypeScript 3.1
|
||||||
interface Person {
|
interface Person {
|
||||||
readonly name: string;
|
readonly name: string;
|
||||||
readonly age: number;
|
readonly age: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
var p1: Person = { name: "Tyrone", age: 42 };
|
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 p2 = { name: "John", age: 60 }; // สังเกตว่า p2 ไม่ได้กำหนดเป็น Person
|
||||||
var p3: Person = p2; // Ok, read-only alias for p2
|
var p3: Person = p2; // ทำได้ เป็น read-only alias ของ p2 และกำหนดเป็น Person
|
||||||
p3.x = 35; // Error, p3.x is read-only
|
p3.x = 35; // Error p3.x ก็เป็น read-only
|
||||||
p2.x = 45; // Ok, but also changes p3.x because of aliasing
|
p2.x = 45; // Ok ทำได้แต่ก็จะเปลี่ยนค่า p3.x ด้วย เพราะ p3 เป็น alias ของ p2
|
||||||
|
|
||||||
class Car {
|
class Car {
|
||||||
readonly make: string;
|
readonly make: string;
|
||||||
@ -203,17 +203,17 @@ class Car {
|
|||||||
readonly year = 2018;
|
readonly year = 2018;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.make = "Unknown Make"; // Assignment permitted in constructor
|
this.make = "Unknown Make"; // อนุญาตให้กำหนดค่าได้ใน constructor แม้ว่าจะ read-only
|
||||||
this.model = "Unknown Model"; // Assignment permitted in constructor
|
this.model = "Unknown Model"; // อนุญาตให้กำหนดค่าได้ใน constructor แม้ว่าจะ read-only
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let numbers: Array<number> = [0, 1, 2, 3, 4];
|
let numbers: Array<number> = [0, 1, 2, 3, 4];
|
||||||
let moreNumbers: ReadonlyArray<number> = numbers;
|
let moreNumbers: ReadonlyArray<number> = numbers;
|
||||||
moreNumbers[5] = 5; // Error, elements are read-only
|
moreNumbers[5] = 5; // Error, สมาชิกอะเรย์เป็น read-only แปลว่า ห้ามแก้ไข
|
||||||
moreNumbers.push(5); // Error, no push method (because it mutates array)
|
moreNumbers.push(5); // Error, push method ใช้ไม่ได้ เพราะมันจะไปแก้ไข read-only array
|
||||||
moreNumbers.length = 3; // Error, length is read-only
|
moreNumbers.length = 3; // Error, เพราะ length ก็ต้อง read-only
|
||||||
numbers = moreNumbers; // Error, mutating methods are missing
|
numbers = moreNumbers; // Error, method ที่ทำให้อะเรย์เปลี่ยนได้จะไม่อนุญาต
|
||||||
```
|
```
|
||||||
|
|
||||||
## อ่านเพิ่มเติมที่
|
## อ่านเพิ่มเติมที่
|
||||||
|
Loading…
x
Reference in New Issue
Block a user