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 interfaceWeather{ date: Date; msg:string;} Diễn giải: Interface thời tiết

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:

$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

interfaceWeather{
  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:newDate(),
  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:

constlogWeather=(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é 😀

Nguồn: viblo.asia

Bài viết liên quan

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp Trong kỷ nguyên s

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x