Một số mẹo và thủ thuật TypeScript
M t s m o và th thu t TypeScriptộ ố ẹ ủ ậ
Tip 1. TypeScript & DOM
Khi b n b t đ u s d ng Typescript, b n s nh n th y nó khá thông minh ạ ắ ầ ử ụ ạ ẽ ậ ấ
khi làm vi c v i môi tr ng trình duy t. Gi s , mu n tìm ph n ệ ớ ườ ệ ả ử ố ầ
tử <input> trên trang:
const textEl = document.querySelector('inpot');
console.log(textEl.value);
// � Property 'value' does not exist on type 'Element'.
TypeScript th y l i, b i vì có m t l i syntax trong ph ng ấ ỗ ở ộ ỗ ươ
th cứ querySelector, thay vì "input" tôi đang tìm ki m m t "inpot".ế ộ
Làm th nào nó bi t đi u đó? Câu tr l i n m trong t pế ế ề ả ờ ằ ệ lib.dom.d.ts, m t ộ
ph n c a th vi n TypeScript và, v c b n, nó mô t m i th (đ i t ng, ầ ủ ư ệ ề ơ ả ả ọ ứ ố ượ
hàm, s ki n) x y ra trên trình duy t. M t ph n c a đ nh nghĩa này là giao ự ệ ả ệ ộ ầ ủ ị
di n đ c s d ng trong cách g i c a ph ng th cệ ượ ử ụ ọ ủ ươ ứ querySelectorvà ánh xạ
các chu i ký t c th (nh "div," "table" ho c "input") cho các lo i ph n ỗ ự ụ ể ư ặ ạ ầ
th HTML t ng ng:ử ươ ứ
interface HTMLElementTagNameMap {
"a": HTMLAnchorElement;
"abbr": HTMLElement;
"address": HTMLElement;
"applet": HTMLAppletElement;
"area": HTMLAreaElement;
"article": HTMLElement;
/* ... */
"input": HTMLInputElement;
/* ... */
}
Nó không ph i là m t gi i pháp hoàn h o b i vì nó ch làm vi c v i ả ộ ả ả ở ỉ ệ ớ
các selectors c b n, nh ng v n t t h n là không có gì, đúng ko nào.ơ ả ư ẫ ố ơ
M t ví d khác v hành viộ ụ ề TypeScript "thông minh" này là khi b n làm vi c ạ ệ
v i các s ki n c a trình duy t:ớ ự ệ ủ ệ
textEl.addEventListener('click', e => {
console.log(e.clientX);
});
.clientX trong ví d trên không ph i là m t thu c tính có s n trên b t kỳ s ụ ả ộ ộ ẵ ấ ự
ki n nào - nó ch có s n trênệ ỉ ẵ MouseEvent c th . Và TypeScript đã tìm ra ụ ể
lo i s ki n d a trên "click" đó là đ i s đ u tiên trong ph ng ạ ự ệ ự ố ố ầ ươ
th cứ addEventListener.
Tip 2. Expect Generics
Vì v y, thay vì ch n m t element, b n có th s d ng b t kỳ đi u gì khác:ậ ọ ộ ạ ể ử ụ ấ ề
document.querySelector('input.action');
thì HTMLElementtagNameMap s không h u ích, và TypeScipt s ch tr ẽ ữ ẽ ỉ ả
v m t ki u Element c b n.ề ộ ể ơ ả
Nh v iư ớ querySelector, th ng là tr ng h p m t hàm có th tr v các ườ ườ ợ ộ ể ả ề
c u trúc khác nhau và không th choấ ể TypeScript xác đ nh s là cái nào. ị ẽ
Trong tr ng h p đó, b n có th mong đ i khá nhi u, hàm đó nói chung ườ ợ ạ ể ợ ề
cũng là m tộ generic và b n có th cung c p ki u tr v đó trong m t cú ạ ể ấ ể ả ề ộ
pháp chung thu n ti n:ậ ệ
textEl = document.querySelector<HTMLInputElement>('input.action');
console.log(textEl.value);
// � 'value' is available because we've instructed TS
// about the type the 'querySelector' function works with.
Tip 3. “Did we really find it?”
Ph ng th cươ ứ document.querySelector(...) không ph i lúc nào cũng tr v ả ả ề
cho chúng ta m t đ i t ng. Ph n t v i b tìm ki m đó có th không n mộ ố ượ ầ ử ớ ộ ế ể ằ
trên trang - và thay vì tr v m t đ i t ng thì hàm đó s tr vả ề ộ ố ượ ẽ ả ề null. Và khi
b n c g ng truy c p vào nó, thu c tính .value có th không ph i là t t c ạ ố ắ ậ ộ ể ả ấ ả
nh ng gì đ c l u nh m c đ nh.ữ ượ ư ư ặ ị
Theo m c đ nh, trình ki m tra xem xét vi c vi c gánặ ị ể ệ ệ null và undefined cho
t ngừ type khác nhau. B n có th làm đi u này an toàn h n và h n ch hành ạ ể ề ơ ạ ế
vi này b ng cách thêm ki m traằ ể null trong tsconfig.json:
{
"compilerOptions": {
"strictNullChecks": true
}
}
V i thi t l p đó,ớ ế ậ TypeScript bây gi sờ ẽ complain n u b n c g ng truy c p ế ạ ố ắ ậ
thu c tính trên m t đ i t ng có th làộ ộ ố ượ ể null và b n s ph i "reassure" nó vạ ẽ ả ề
s t n t i c a đ i t ng, ví d : b ng cách gói ph n đó v i đi u ki nự ồ ạ ủ ố ượ ụ ằ ầ ớ ề ệ if
(textE1) {...}
Khác v iớ querySelector, tr ng h p ph bi n khác cho đi u này là ph ng ườ ợ ổ ế ề ươ
th cứ Array.find - k t qu tr v có th làế ả ả ề ể undefinded.
Không ph i đi u gì b n mu n tìm ki m nó cũng s có nhé!!!.ả ề ạ ố ế ẽ
Tip 4. “I’m telling you, TS, it is there!”
Nh chúng ta đã thi t l p, v i vi c ki m tra ch t ch , TypeScript s có ư ế ậ ớ ệ ể ặ ẽ ẽ
nhi u hoài nghi h n v giá tr c a chúng ta. M c khác, đôi khi b n ch bi t ề ơ ề ị ủ ặ ạ ỉ ế
t bên ngoài có nghĩa là giá tr s đ c thi t l p. Trong nh ng tr ng h p ừ ị ẽ ượ ế ậ ữ ườ ợ
ngo i l nh v y, b n có th s d ng "post-fix expression operator" (hay ạ ệ ư ậ ạ ể ử ụ
nói cách d hi u là d u !):ễ ệ ấ
const textEl = document.querySelector('input');
console.log(textEl!.value);
// � with "!" we assure TypeScript
// that 'textEl' is not null/undefined
Tip 5. When migrating to TS…
Thông th ng, khi b n có m t codebase cũ mà b n mu n chuy n sang ườ ạ ộ ạ ố ể
TypeScript, m t trong nh ng đi u m t khá nhi u time là làm cho code cũ ộ ữ ề ấ ề
tuân th các quy t c TSLint c a b n. Nh ng gì b n có th làm là ch nh s a ủ ắ ủ ạ ữ ạ ể ỉ ử
t t c các t p b ng cách thêmấ ả ệ ằ
// tslint:disable
trong dòng đ u tiên c a m i dòng, đ TSLint không ki m tra chúng. Sau đó,ầ ủ ỗ ể ể
ch khi m t developer làm vi c trên m t t p c th , anh ta s b t đ u b ng ỉ ộ ệ ộ ệ ụ ể ẽ ắ ầ ằ
cách xóa dòng này và s a t t c các l iử ấ ả ỗ linting ch trong t p đó. B ng cách ỉ ệ ằ
này, chúng ta không c n làm m t cu c cách m ng mà ch là m t s c i ti n ầ ộ ộ ạ ỉ ộ ự ả ế
- và các codebase d n d n an toàn và đ c c i thi n.ầ ầ ượ ả ệ
Đ thêm các types v i vào mã JS cũ, đây ch c là đi u mà b n không th ngể ớ ắ ề ạ ườ
xuyên làm. Suy lu n ki u c a TypeScript s x lý nó và ch khi b n có m t ậ ể ủ ẽ ử ỉ ạ ộ
s mã khó, ví d : ch đ nh lo i giá tr khác nhau cho cùng m t bi n thì b n ố ụ ỉ ị ạ ị ộ ế ạ
có th g p v n đ . N u tái c u trúc mà không ph i là m t v n đ t m ể ặ ấ ề ế ấ ả ộ ấ ề ầ
th ng b n có th gi i quy t b ng cách s d ngườ ạ ể ả ế ằ ử ụ any:
let mything = 2;
mything = 'hi';
// � Type '"hi"' is not assignable to type 'number'
mything = 'hi' as any;
// � if you say "any", TypeScript says ¯\_(ツ)_/¯
Nh ng th c s , nó nh là m t ph ng sách cu i cùng. Chúng tôi không ư ự ự ư ộ ươ ố
khuy n khích vi c dùngế ệ any trong TypeScript.
Tip 6. More type restrictions
Đôi khi TypeScript không th suy ra type. Tr ng h p ph bi n nh t là ể ườ ợ ổ ế ấ
tham s hàm:ố
function fn(param) {
console.log(param);
}
Trong n i b nó c n đ c gán m t s type cho params đây. Vì mu n gi i ộ ộ ầ ượ ộ ố ở ố ớ
h n s l ngạ ố ượ any đ n m c t i thi u tuy t đ i, nên th ng s h n ch ế ứ ố ể ệ ố ườ ẽ ạ ế
hành vi đó b ng cài đ tằ ặ tsconfig.json:
{
"compilerOptions": {
"noImplicitAny": true
}
}
Th t không may, chúng ta không th đ t lo i dây an toàn đó (yêu c u nh p ậ ể ặ ạ ầ ậ
rõ ràng) trên function tr v type. Vì v y, n u thay vào đó ch c năng ả ề ậ ế ứ
fn(param): string { Tôi s quên ki u đó function fn(param) {), TypeScript s ẽ ể ẽ
không theo dõi nh ng gì tôi tr v , ho c th m chí n u tôi tr v b t c th ữ ả ề ặ ậ ế ả ề ấ ứ ứ
gì t hàm đó. Chính xác h n: nó s ph ng đoán giá tr tr v t b t kỳ giá ừ ơ ẽ ỏ ị ả ề ừ ấ
tr nào b n đã tr l i ho c không tr l i.ị ạ ả ạ ặ ả ạ
R t may m n đó là n iấ ắ ơ TSLint tr giúp. V i quy t cợ ớ ắ typedef b n có th ạ ể
th c t o ra hình th c tr v cho hàm:ự ạ ứ ả ề
{
"rules": {
"typedef": [
true,
"call-signature"
]
}
}
Tip 7. Type Guards
có thể bạn quan tâm
Kỹ thuật giải thuật trong lập trình và ứng dụng
0
761
319
Lập trình
(New)
Tìm hiểu về thuật toán và thuật giải
97
2.153
443
Cơ sở dữ liệu
97
(New)
Kỹ thuật phân tích giải thuật
7
946
326
Lập trình
7
(New)
TỔNG QUAN MỘT SỐ KĨ THUẬT ĐIỀU CHẾ SỐ, TỔNG QUAN MỘT SỐ KĨ THUẬT ĐIỀU...
66
855
441
Kỹ thuật
66
(New)
Khái niệm phân tập và kỹ thuật phân tập đa người dùng, kỹ thuật OFDM,...
62
820
601
Kỹ thuật
62
(New)
Luận văn thạc sỹ kỹ thuật điện: Tổng quan về kỹ thuật WiMAX và giải ph...
93
775
366
Thạc sĩ cao học
93
(New)
nghệ thuật trần thuật trong những đứa con trong gia đình
6
2.697
728
Giáo án, bài giảng lớp 12
6
(New)
Nghiên cứu, đánh giá các giải thuật đối sánh chuỗi. Trên cơ sở đó lựa...
25
1.077
556
Thạc sĩ cao học
25
(New)
thông tin tài liệu
Khi bạn bắt đầu sử dụng Typescript, bạn sẽ nhận thấy nó khá thông minh khi làm việc với môi trường trình duyệt
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
xem nhiều trong tuần
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
BIỂU MẪU ĐỀ NGHỊ NHẬP KHẨU THUỐC CHƯA CÓ GIẤY ĐĂNG KÝ LƯU HÀNH THUỐC TẠI VIỆT NAM KHÔNG VÌ MỤC ĐÍCH THƯƠNG MẠI
Hướng dẫn tự học Access
Giáo trình Quản trị học của Đại học kinh tế quốc dân
Trắc nghiệm Hóa học 10 bài 2: Hạt nhân nguyên tử. Nguyên tố hóa học. Đồng vị
Toán nâng cao bồi dưỡng học sinh giỏi toán lớp 2: Bài toán về nhiều hơn, ít hơn
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
