Bộ câu hỏi phỏng vấn Typescript phần 2

Optional parameters function (hàm tham số tùy chọn) là gì?


Chúng ta có thể chỉ định các thuộc tính tùy chọn trên các inteface và thuộc tính có thể có hoặc thiếu trong 1 object.

//USER INTERFACE
interface User {
  name: string;
  age: number;
  address?: string; // Optional
}

//FUNCTION USING USER INTERFACE

let userInfo = function (user: User) {
  let info =
    "Hello, " +
    user.name +
    " Your Age is - " +
    user.age +
    " and Address is -" +
    user.address;
  return info;
};

//USER INFO JSON OBJECT

let info = { name: "Anil", age: 30 };

//RESULT console.log(userInfo(info));

Rest parameters function là gì?


Rest parameters function không hạn chế số lượng các giá trị mà chúng ta chuyển vào một hàm và các giá trị được truyền phải cùng loại nếu không thì ném lỗi.

//Rest Parameters

let addNumbers = function (...nums: number[]) {
  let p;

  let sum: number = 0;

  for (p = 0; p < nums.length; p++) {
    sum = sum + nums[p];
  }

  return sum;
};

//The Result

addNumbers(1, 2);

addNumbers(1, 2, 3);

addNumbers(1, 12, 10, 18, 17);

Mô tả cách tạo 1 class trong Typescript?


  • Một class là một định nghĩa mẫu của các phương thức và các biến trong một kiểu đối tượng cụ thể. Đó là chương trình, mã và mẫu có thể mở rộng để tạo các đối tượng. TypeScript là JavaScript hướng đối tượng và nó cũng hỗ trợ các tính năng lập trình hướng đối tượng như các class, interface, ...
  • Một class sẽ có các quyền truy cập như: public, private, protected and read-only modifiers và public theo mặc định.

Một lớp có thể chứa:

  • Trường (Fields),
  • Constructors.
  • Hàm (Functions).

Dưới đây là ví dụ về tạo một class đơn giản

class User {
  name: string;

  constructor(nameTxt: string) {
    this.name = nameTxt;
  }

  getName() {
    return "Hello, " + this.name;
  }
}

let user = new User("Anil");
//Creating Instance objects Static class trong Typescript:
export class Constants {
  static baseUrl = "http://localhost:8080/";
  static date = new Date();
}

Public, Private, Protected và Readonly modifiers trong Typescript là gì?


modifiers trong Typescript

Với thuộc tính hoặc phương thức được định nghĩ là public chúng ta có thể thoải mái gọi thuộc tính này từ bất cứ đâu , trong ngoài class nều được. Nếu một thuộc tính hoặc phương thức không được modifiers thì mặc định sẽ là public.

Ngược lại nếu là privite thì chúng ta chỉ có thể truy cập từ bên trong class đó

Ví dụ:

class Animal {
  private name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}

new Animal("Cat").name; // Error: 'name' is private;

Còn đối với protected cũng giống như private chỉ ngoại trừ trường hợp các class con kế thừ từ nó cũng có thể truy cập được. Ví dụ:

class Person {
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }

  public getElevatorPitch() {
    return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

Readonly Ngoài ra chúng ta cũng có thêm một modifier mới là readonly . Khi một thuộc tính có thêm readonly có nghĩ thuộc tính này chỉ có thế lấy được giá trị của chúng mà không thể thay đổi giá trị . Bạn cần phải gán giá trị cho thuộc tính này mới khởi tạo nó hoặc gán trong hàm constructor. Ví dụ:

class Octopus {
  readonly name: string;
  readonly numberOfLegs: number = 8;
  constructor(theName: string) {
    this.name = theName;
  }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // error! name is readonly.

Method Overriding trong Typescript là gì?


TypeScript không cho phép 2 phương thức cùng tên trong một lớp kể cả trường hợp chúng có các tham số khác nhau. Method Overloading cho phép bạn định nghĩa một phương thức với nhiều kiểu tham số khác nhau.

Trong TypeScript, Method Overloading trông khác với trong C++, Java hoặc C#. Ý tưởng chính để nạp chồng (overload) cho phương thức là tạo một phương thức chung để kiểm tra loại tham số nào đã được truyền vào khi phương thức được gọi, và sau đó thực hiện một số logic cho trường hợp thích hợp. Hữu ích là thêm các định nghĩa cho phương thức để giúp các lập trình viên khác biết cách sử dụng nó một cách thích hợp. Ví dụ:

interface IDimension {
  width: number;
  height: number;
}
class MathUtils {
  static getArea(dimension: IDimension): number; // Definition 1
  static getArea(width: number): number; // Definition 2
  static getArea(width: number, height: number): number; // Definition 3
  static getArea(...args: any[]): number {
    if (args.length == 1) {
      if (typeof args[0] == "number") {
        // Use Definition 2
        return args[0] * args[0];
      } else {
        // Use Definition 1
        var dim = args[0] as IDimension;
        return dim.width * dim.height;
      }
    } else if (args.length == 2) {
      return args[0] * args[1];
    } else {
      throw new Error("Arguments Invalid!");
    }
  }
}
function method_overloading_ex1_test() {
  var area1 = MathUtils.getArea({ width: 10, height: 20 }); // 200
  var area2 = MathUtils.getArea(10); // 100
  var area3 = MathUtils.getArea(10, 15); // 150

  console.log(`area1: ${area1}`);
  console.log(`area2: ${area2}`);
  console.log(`area3: ${area3}`);
}
method_overloading_ex1_test(); // Call the function.

Default export trong Typescript là gì? Tại sao sử dụng chúng?


Mỗi module có thể tùy chọn xuất default exportdefault export hoạt động với từ khóa mặc định và chúng ta chỉ có thể sử dụng một default export cho mỗi module.

export class User {
  //Todo your logic here..
}

//And then -

import { User } from "./User"; //OR //BaseUrl.ts

export default "http://localhost:57431/Account/Login";

//Login.ts

import BaseUrl from "../BaseUrl";

console.log(BaseUrl);

//"http://localhost:57431/Account/Login"

Phân biệt Module và Namespace?


Module dành cho các external package và Namespace dành cho các internal package. Trên thực tế, từ khóa Module đã được thay thế bằng từ khóa Namespace. Namespace đơn giản là đặt tên các đối tượng JavaScript trong global namespace. Module có thể chứa cả mã và khai báo. Sự khác biệt chính là các module khai báo các dependency của chúng.

///Example using module -

module System.modules {
  //this function can be accessed from outside the module because using export.

  export function addNumbers(a: number, b: number): number {
    return a + b;
  }

  // this class can be accessed from outside the module because using export.

  export class ExportedClass {
    public subNumbers(a: number, b: number): number {
      return a - b;
    }
  }

  //this class can only be accessed from inside the module because not using export.

  class NotExportedClass {
    mulNumbers(a: number, b: number): number {
      return a * b;
    }
    divNumbers(a: number, b: number): number {
      return a > 0 ? a / b : 0;
    }
  }
}

///Example using namespace –

namespace System.namespaces {
  //this function can be accessed from outside the module because using export.

  export function addNumbers(a: number, b: number): number {
    return a + b;
  }

  // this class can be accessed from outside the module because using export.

  export class ExportedClass {
    public subNumbers(a: number, b: number): number {
      return a - b;
    }
  }

  //this class can only be accessed from inside the module because not using export.

  class NotExportedClass {
    mulNumbers(a: number, b: number): number {
      return a * b;
    }
    divNumbers(a: number, b: number): number {
      return a > 0 ? a / b : 0;
    }
  }
}

Type assertion trong TypeScript là gì?


Đây là một cách để thông báo cho compiler biết kiểu của đối tượng mà mình sử dụng. Nói ngắn gọn là ép kiểu cho đối tương. Có hai cách để sử dụng Type assertions. Một là sử dụng <> (angle bracket):

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

Cách thứ 2 là dùng as:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2 cách này trong TypeScript là tương đương nhau. Nhưng khi dùng TypeScript với JSX thì chỉ dùng được as syntax.

Triple-Slash Directive là gì?


Triple-Slash Directive là dòng comment chứa 1 XML tag. Nội dung của comment này được sử dụng để chỉ thị cho compiler. Nó chỉ có hiệu lực khi đặt ở đầu file chứa nó. Nếu ở dưới một statement hoặc declaration thì chỉ giống như một comment thông thường.

Avatar Techmely Team
VIẾT BỞI

Techmely Team