Interface & Funtion trong Typescript (p1)

Trong bài này, chúng ta cùng tìm hiểu về interface & function trong Typescript.

1. Cài đặt ban đầu:

• NodeJS: https://nodejs.org/en/
• ts-node package

$npm i ts-node
$touch interface.ts

2. Thực hành

Đầu tiên chúng ta tạo file mới & định nghĩa một interface như sau:

index.ts

interface Weather {
  date: Date;
  msg: string;
}

• Diễn giải:
  • Interface thời tiết này có 2 props là date & message thông báo.
  • date có annotation là Date
  • msg có annotation là string

Tiếp theo, chúng ta cần tạo một object thỏa mãn cái interface nêu trên:

const todaysWeather: Weather = {
  date: 'today',
  msg: 'sunny',
};

Lúc này typescript lại thông báo lỗi

The expected type comes from property 'date' which is declared here on type 'Weather'

Bây giờ chúng ta sửa lại cái prop date trong interface weather:

const todaysWeather: Weather = {
  date: new Date(),
  msg: 'sunny',
};

console.log(todaysWeather);

Tiến hành chạy combine run time: $ts-node functions.ts, kết quả trả về như sau:

{ date: 2022-06-29T06:25:51.534Z, msg: 'sunny' }

Bây giờ chúng ta tạo một arrow function như sau:

const logWeather = (args: Weather) => {
  console.log(args.date);
  console.log(args.msg);
};

logWeather(todaysWeather);

Kết quả:

2022-06-29T06:38:19.434Z
sunny

Toàn bộ code

interface Weather {
  date: Date;
  msg: string;
}

const todaysWeather: Weather = {
  date: new Date(),
  msg: 'sunny',
};

console.log(todaysWeather);

const logWeather = (args: Weather) => {
  console.log(args.date);
  console.log(args.msg);
};

logWeather(todaysWeather);

Chúng các bạn thành công nhé 😀