Lớp enum trong javascript

Xin chào các bạn, bài viết này mình xin trình bày một chút kiến ​​thức kiến ​​thức cơ bản về TypeScript, rất mong mọi người theo dõi

1) Typescript là gì?

  • TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft. Nó có thể được coi là một phiên bản nâng cao của Javascript bằng cách bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có trong Javascript
  • TypeScript có thể được sử dụng để phát triển các ứng dụng chạy ở phía máy khách (Angular) và phía máy chủ (NodeJS)
  • TypeScript sử dụng tất cả các tính năng của ECMAScript 2015 (ES6) như các lớp, mô-đun
  • Trưởng nhóm dự án này là Anders Hejlsberg, người đã đóng góp cũng như tạo ra các ngôn ngữ khác C#, Turbo Pascal và Delphi
  • TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript

Lớp enum trong javascript

2) Tại sao nên sử dụng Typescript

  • TypeScript giúp chúng ta phát triển các dự án một cách dễ dàng
  • Hiện nay có nhiều Javascript Framework khuyến khích sử dụng Typescript. Ví dụ. AngularJS, ion
  • Hỗ trợ các tính năng của Javascript phiên bản mới nhất
  • TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn có một công cụ mã rất mạnh cũng được phát triển bởi Microsoft giúp chúng tôi viết mã Typescript một cách dễ dàng hơn nữa
  • Bản chất của Typescript vẫn là Javascript - TypeScript được biên dịch tạo ra các đoạn mã javascript nên bạn có thể chạy bất kỳ ở đâu miễn phí ở đó có hỗ trợ biên dịch Javascript. Ngoài ra, bạn có thể sử dụng kết hợp và cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn

3) Các kiến ​​thức cơ bản về Typescript

3. 1) Cài đặt và chạy chương trình đầu tiên

  • Cài đặt nodejs tại đây
  • Cài đặt Typescript

cài đặt npm –g bản thảo

  • Typescript has extension extension. ts
  • To compile a file Typescript to javascript ta run command

tsc tên_file --watch

Ví dụ

  • Tệp html. 1. html
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello wordtitle>
    <script src="1.js">script>
head>
<body>
    
body>
html>
  • bản đánh máy tệp. 1. ts
console.log('Hello word');
var a: number;

a = 1;
console.log(a);

When run command

tsc1. ts --watch

then a file 1. js sẽ được tự động sinh ra để chứa mã sau khi biên dịch tệp 1. ts

console.log('Hello word');
var a;
a = 1;
console.log(a);

3. 2) Kiểu dữ liệu và khai báo biến

JavascriptTypescriptKiểu dữ liệu cơ bảnnumber, string, Boolean, array……, enum, tuple, any, void …Cú pháp khai báovar test = 123;var test. sợi dây;
  • Như mình đã nói ở trên thì bản chất của Typescript vẫn là Javascript nên các kiểu dữ liệu cơ bản của java script thì Typescript đều có ngoài Typescript còn một số kiểu dữ liệu khác như enum, tuple, any, void
  • Còn về mặt cú pháp khai báo biến trong Typescript hơi khác một chút đó là khi khai báo chúng ta cần khai báo thêm để nó xem là thuộc kiểu dữ liệu nào

Ví dụ

// KDL string
var string1 : string;
string1 = '1001';

// console.log(string1);

// KDL number

var number1 : number = 10;
console.log(number1);

// KDL mang
//KDL mang string

var arrString : string[];

arrString = ['teo', 'ty', 'tun'];

console.log(arrString[0]);

// KDL mang number

var arrNumber : number[];

arrNumber = [1, 2, 3];

//KDL boolean

var boolean1 : boolean = true;
console.log(boolean1);

// KDL enum

enum Color {Red, Green, Blue}
var c: Color = Color.Green;

// KDl tuple - kieu du lieu hon tap

var x: [string, number];

x = ['ahihi', 10];
for (let i = 0; i < x.length; i++) {
    console.log(x[i]);    
}
console.log(x[0]);

// KDL any

var xyz : any;
xyz = 'ahihi';
console.log(xyz);

At on is a number of data type in the Typescript, there are a other data type so with Javascript

  • Enum là từ khóa dùng để khai báo một kiểu liệt kê (Enumeration). Kiểu liệt kê là một tập hợp các hằng số do người dùng định nghĩa
  • Tuple là một mảng hỗn hợp nhưng đã được khai báo số phần tử

3. 3) Chức năng trong TypeScript

  • Trong typescript, các hàm đều trả về một kết quả, kết quả đó sẽ thuộc về một kiểu dữ liệu nào đó (vd. số, chuỗi, void,…)
  • Ta must only always kiểu dữ liệu trả về cho hàm ngay từ đầu

Ví dụ

// number

function sum (x: number, y: number) : number {
    return x + y;
}

console.log(sum(111, 222));

// string

function showString() : string {
    return 'hello';
}

// array
function showArrNumber() : number[] {
    return [1, 2, 3];
}

Ngoài ra còn có một số chức năng khai báo cú pháp như

var z = function(x: number, y: string) : string {
    return `Chao ${y}, nam nay ban ${x} tuoi phai khong?`;
}

console.log(z(18, 'ahihi'));

var g: (x: number, y: string) => string = function(x, y) { // Khai bao truoc sau do moi dinh nghia
    return `Chao ${y}, nam nay ban ${x} tuoi phai khong?`;
}

console.log(g(18, 'ahihi'));

var h = (x: number) : number => {
    return x + 9;
}

console.log(h(10));

3. 4) Hướng đối tượng trong Typescript

Trong Typescript, chúng tôi hỗ trợ các tính chất hướng đối tượng như

  • Lớp
class NhanVatGame {
    tenNhanVat: string;
    solugan: string;
    mau: number;

    constructor (tenNhanVat: string, solugan: string, mau: number) {
        this.tenNhanVat = tenNhanVat;
        this.solugan = solugan;
        this.mau = mau;
    }

    show() {
        console.log(this.mau);
    }
}

var nhanVat1 = new NhanVatGame('irelia', 'Y chi cua luoi kiem', 697.2);
nhanVat1.show();
  • Công cụ sửa đổi quyền truy cập

Phạm vi truy cập trong lớp. Riêng tư, được bảo vệ, công khai. Mặc định khi không khai báo thì công khai

  • Kế thừa kế thừa
class Tuong {
    ten : string;
    mota : string;
    kinang : string[];

    constructor(ten : string, mota : string, kinang : string[]) {
        this.ten = ten;
        this.mota = mota;
        this.kinang = kinang;
    }

    ShowInfo () {
        let kn = '';
        for (var i = 0; i < this.kinang.length; i++) {
            kn += this.kinang[i] + " | ";
        }
        return `
            Tên Tướng : ${this.ten}
            Mô Tả : ${this.mota}
            Ki Năng : ${kn}
        `;
    }
}

let ashe = new Tuong('Ashe', 'Cung Băng', ['Chú tâm tiễn', 'Tán Xạ tiễn', 'Ưng tiễn', 'Đại băng tiễn']);

console.log(ashe.ShowInfo());

// Class SatThu ke thua tu class tuong
class SatThu extends Tuong {
    donsatthu : string;

    constructor(ten : string, mota : string, kinang : string[], donsatthu : string) {
        super(ten, mota,  kinang);
        this.donsatthu = donsatthu;
    }

    ShowInfo () {
        let kn = '';
        for (var i = 0; i < this.kinang.length; i++) {
            kn += this.kinang[i] + " | ";
        }
        return `
            Tên Tướng : ${this.ten}
            Mô Tả : ${this.mota}
            Kĩ Năng : ${kn}
            Đòn Sát Thủ : ${this.donsatthu}
        `;
    }
}

let talon = new SatThu('Talon', 'Cung Băng', ['Chú tâm tiễn', 'Tán Xạ tiễn', 'Ưng tiễn', 'Đại băng tiễn'], 'Sát Thủ Bóng Đêm');
console.log(talon.ShowInfo());
  • Tính đóng gói

  • Tính đa hình

  • Tính năng hiển thị đối tượng

  • giao diện

Giao diện trong TypeScript thì có thể khai báo được cả thuộc tính

________số 8
  • trừu tượng
interface TuongInterface {
    ten : string;
    mau : number;
    satthuong : number;
    mota : string;

    XemTuong() : void;
    donkinang() : any;
    bienve() : void;
}

//class tuong ke thua lai Interface TuongInterface
class Tuong implements TuongInterface {
    ten : string;
    mau : number;
    satthuong : number;
    mota : string;

    XemTuong () : void {
        console.log('xem');
    }

    donkinang () : any {
        return 'don ky nang';
    }

    bienve () : void {
        console.log('bien ve');
    }
}
  • không gian tên

Đặt tên lớp mà không sợ bị trùng từ khóa. Quản lý theo một nhóm gọi là mô-đun có hệ thống

console.log('Hello word');
var a: number;

a = 1;
console.log(a);
0
  • Generic Hiểu một cách đơn giản là khai báo nhưng không cần chỉ ra kiểu dữ liệu mà khi nào sử dụng thì mới định nghĩa kiểu dữ liệu
console.log('Hello word');
var a: number;

a = 1;
console.log(a);
1

Qua ví dụ ta thấy khi các hàm xem1(), xem2(), xem3() giống nhau về các xử lý chỉ khác kiểu dữ liệu trả về và các tham số kiểu dữ liệu thay vì phải định nghĩa 3 hàm ta chỉ cần viết một hàm xem4 . Một ví dụ khác để bạn có thể hiểu rõ hơn về Generic

console.log('Hello word');
var a: number;

a = 1;
console.log(a);
2

At ví dụ trên hàm XemThongTin() có tham số truyền vào là một mảng có kiểu dữ liệu chung chung. Khi ta gọi hàm XemThongTin() ta phải chỉ ra kiểu dữ liệu T là gì trong trường hợp này là chuỗi thì khi ta truyền tham số vào cũng phải có một chuỗi mảng nếu chương trình bị lỗi. Như đôi khi bạn muốn kiểu dữ liệu T kia không phải là chuỗi mà thay vào đó là một kiểu dữ liệu nào đó giống như bất kỳ hạn chả nhẽ lúc này bạn lại phải viết thêm một hàm mới trong khi mã xử lý như nhau, nhìn

Kết luận

Anders Hejlsberg và các cộng sự của mình khi tạo ra Typescript thì hầu hết các đặc trưng trong C# đều được sử dụng để tạo nên Typescript vì thế nhưng ai mà mã C#, Java (các ngôn ngữ hướng đối tượng) thì việc làm quen với Typescript . Angular - a in the Javascript Framework phỏ biến cũng sử dụng hoàn toàn cú pháp là Typescript

Trên đây là một chút kiến ​​thức mà mình tìm hiểu được về Typescript, rất mong nhận được sự góp ý của mọi người. Cảm ơn mọi người đã theo dõi bài viết của mình