So sánh một vài kiểu dữ liệu trong Typescript

1. Const vs Readonly

1.1 Const được sử dụng cho các biến

const message = 'Hello';

// Does not work
message = 'World';

Trong khi đó readonly được sử dụng cho các thuộc tính củaclass,

class Triangle {
    public readonly numberOfVertices = 3;
}

const triangle = new Triangle();

// Does not work
triangle.numberOfVertices = 4; 

hoặc type, interface

interface Person {
    firstName: string;
    lastName: string;
    readonly fullName: string;
}

2.2 Khai báo const phải có giá trị khởi tạo, và không thể thay đổi giá trị đó, trong khi thuộc tính readonly có thể đc gán lại giá trị mới trong contructor function.

class Square {
    readonly numberOfVertices: number;

    constructor() {
        this.numberOfVertices = 4;
    }
}

Các thuộc tính readonly có thể bị thay đổi nếu chúng ta không chuyển trực tiếp class hoặc interface của chúng mà chuyển một alias.

const updatePerson = (person: {
    firstName: string,
    lastName: string,
    fullName: string,
}) => {
    person.fullName = `${firstName}, ${lastName}`;
};

=> Chúng ta có thể cập nhật thuộc tính fullName vì đó là thuộc tính của tham số Person:

let person: Person = {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar',
}

updatePerson(person);

person.fullName;    // `Foo, Bar`

Trình biên dịch sẽ báo lỗi nếu chúng ta chuyển kiểu ban đầu là Person:

const updatePerson = (person: Person) => {
    // Error: Cannot assign to 'fullName' because it is a read only property
    person.fullName = `${person.firstName}, ${person.lastName}`;
}

3.3 Những điều nên biết

• Trong một class, nếu một thuộc tính chỉ có phương thức getter và không đi kèm với phương thức setter, nó sẽ được coi là readonly.

class Square {
    side: number = 0;

    get area() {
        return this.side * this.side;
    }
}

const s = new Square();

Đặt s.area = 100 sẽ gây ra lỗi vì area là thuộc tính readonly.

• Trong thư viện React, chúng ta không thể thay đổi trực tiếp các props và state của một component. Bởi vì props là immutable và state có thể đc cập nhật thông qua phương thức setState()

// P, S đại diện cho các props và state tương ứng.
class Component<P, S> {
    constructor(props: Readonly<P>);

    readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;
    state: Readonly<S>;
}

2. Function vs Property trong interface

• Có 2 cách để định nghĩa một method trong một interface

Khai báo như là một thuộc tính với type là function

interface Logger {
    log: (message: string) => void;
}

Khai báo như một function bình thường

interface Logger {
    log(message: string): void;
}

2.1 Sự khác nhau

• Nếu method được khai báo là interface function, bạn có thể thêm nhiều overload

interface Logger {
    log(message: string): void;
}

// In other places
interface Logger {
    log(message: string, level: string): void;
}

• Khai báo method như là một thuộc tính, giúp bạn tránh khỏi khai báo các thuộc tính overload.

interface Logger {
    log: (message: string) => void;
}

// Does not work
interface Logger {
    log: (message: string, level: string) => void;
}

• readonly chỉ ảnh hưởng tới cách khai báo method là khai báo thuộc tính.

interface Person {
    firstName: string;
    lastName: string;

    readonly fullName: () => string;

    // Doesn't work
    // readonly fullName(): string;
}

3. Const vs enum

Một enum có thể được khai báo kèm hoặc không kèm từ khoá const

enum thông thường 
enum Direction {
    Up,
    Down,
    Left,
    Right
}

enum const 
const enum Light {
    Red,
    Green,
    Blue
}

3.1 Sự khác nhau

• TypeScript biên dịch enum thông thường thành các objects JavaScript

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

Mặt khác, Light enum sẽ không được chuyển đổi

• Vì không phải là JS object khi biên dịch nên chúng ta không thể dùng loop đối với const enum

// ERROR
for (let i in Light) {
    console.log(i);
}

Kết

Xin chào và hẹn gặp lại !

• tài liệu tham khảo
  https://www.typescriptlang.org/docs/handbook/2/objects.html