Posted 2021-03-30 web鍓嶇寮€鍙?/a>

鑻辨枃 | https://www.sangle7.com/

1銆?nbsp;TypeScript 鍜?DOM

褰撲綘寮€濮嬩娇鐢?TypeScript 鏃讹紝浣犱細鍙戠幇鍦ㄦ祻瑙堝櫒鐜涓娇鐢ㄥ畠锛屼綘闇€瑕侀潪甯镐簡瑙ｅ畠銆傚亣璁炬垜鎯冲湪椤甸潰鎼滅储妗嗛噷鎵惧埌涓€涓?/span> 鍏冪礌锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
  
  
    
    
  
const textEl = document.querySelector('inpot');console.log(textEl.value);// 馃洃 Property 'value' does not exist on type 'Element'.
 
   
   
 

Oops鈥︹€?鎶涘嚭浜嗕竴涓敊璇紝鍥犱负鎴戞妸 鈥榠nput鈥?鎵撴垚浜?鈥榠npot鈥?/span>

瀹冩€庝箞鐭ラ亾鐨勶紵绛旀鍦ㄤ簬 lib.dom.d.ts 鏂囦欢锛岃鏂囦欢鏄?TypeScript 搴撶殑涓€閮ㄥ垎锛屽苟涓斿熀鏈笂鎻忚堪浜嗘祻瑙堝櫒涓彂鐢熺殑鎵€鏈変簨鎯咃紙瀵硅薄锛屽嚱鏁帮紝浜嬩欢锛夈€?nbsp;

璇ュ畾涔夌殑涓€閮ㄥ垎鏄湪 querySelector 鏂规硶鐨勮緭鍏ヤ腑浣跨敤鐨勬帴鍙ｏ紝骞跺皢鐗瑰畾鐨勫瓧绗︿覆鏂囧瓧锛堜緥濡傗€檇iv鈥? 鈥榯able鈥欐垨鈥檌nput鈥欙級鏄犲皠鍒扮浉搴旂殑 HTML 鍏冪礌绫诲瀷锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
interface htmlElementTagNameMap { a: HTMLAnchorElement; abbr: HTMLElement; address: HTMLElement; applet: HTMLAppletElement; area: HTMLAreaElement; article: HTMLElement; /* ... */ input: HTMLInputElement; /* ... */}
 
   
   
 

杩欎笉鏄竴涓畬缇庣殑瑙ｅ喅鏂规锛屽洜涓哄畠浠呴€傜敤浜庡熀鏈厓绱犻€夋嫨鍣紝浣嗘€绘瘮娌℃湁濂斤紝瀵瑰惂锛?/span>

杩欑鈥欐櫤鑳解€橳ypeScript 琛屼负鐨勫彟涓€涓ず渚嬫槸鍦ㄥ鐞嗘祻瑙堝櫒浜嬩欢鏃讹細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
  
  
    
    
  
textEl.addEventListener('click', (e) => { console.log(e.clientX);});
 
   
   
 

涓婇潰鐨勭ず渚嬩腑鐨?clientX 鍦ㄤ换浣曠粰瀹氫簨浠朵笂閮戒笉鍙敤-浠呭湪 MouseEvent 涓婂彲鐢ㄣ€傜劧鍚?TypeScript 鏍规嵁浣滀负 addEventListener 鏂规硶涓涓€涓弬鏁扮殑鈥渃lick鈥濇枃瀛楃‘瀹氫簨浠剁殑绫诲瀷銆?/span>

2銆佹湡鏈涙硾鍨?/span>

鍥犳锛屽鏋滄偍浣跨敤鍏朵粬浠讳綍涓滆タ鑰屼笉鏄厓绱犻€夋嫨鍣細

 
   
   
 

  
    
    
  
 
   
 
  
  
    
    
  
document.querySelector锛?input.action'锛?/span>
 
   
   
 

閭ｄ箞 HTMLELementTagNameMap 灏嗕笉鍐嶆湁鐢紝TypeScript 鍙細杩斿洖涓€涓浉褰撳熀鏈殑 Element 绫诲瀷銆?/span>

涓?querySelector 涓€鏍凤紝鍑芥暟閫氬父鍙互杩斿洖鍚勭涓嶅悓鐨勭粨鏋勶紝鑰?TypeScript 涓嶅彲鑳界‘瀹氬皢鏄摢绉嶇粨鏋勩€傚湪閭ｇ鎯呭喌涓嬶紝鎮ㄥ彲浠ラ潪甯告湡寰咃紝璇ュ嚱鏁颁篃鏄€氱敤鐨勶紝骞朵笖鍙互浣跨敤鏂逛究鐨勯€氱敤璇硶鎻愪緵璇ヨ繑鍥炵被鍨嬶細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
  
  
    
    
  
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.
 
   
   
 

3銆佲€滄垜浠湡鐨勬壘鍒颁簡鍚楋紵鈥?/span>

璇?document.querySelector锛堚€︼級鏂规硶瀹為檯涓婂苟涓嶆€绘槸杩斿洖涓€涓璞★紝鏄悧锛熶笌閫夋嫨鍣ㄥ尮閰嶇殑鍏冪礌鍙兘涓嶅湪椤甸潰涓?鍑芥暟灏嗚繑鍥?null 鑰屼笉鏄璞°€傚洜姝わ紝榛樿鎯呭喌涓嬶紝璁块棶.value 灞炴€у彲鑳戒笉浼氫繚瀛樻墍鏈夊唴瀹广€?/span>

榛樿鎯呭喌涓嬶紝绫诲瀷妫€鏌ュ櫒璁や负 null 鍜?undefined 鍙垎閰嶇粰浠讳綍绫诲瀷銆傛偍鍙互閫氳繃鍦?tsconfig.json 涓坊鍔犱弗鏍肩殑 null 妫€鏌ユ潵浣垮叾鏇村姞瀹夊叏骞堕檺鍒惰繖绉嶈涓猴細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
{ "compilerOptions": { "strictNullChecks": true }}
 
   
   
 

浣跨敤璇ヨ缃悗锛屽鏋滄偍灏濊瘯璁块棶鍙兘涓?null 鐨勫璞′笂鐨勫睘鎬э紝TypeScript 灏嗕細鎶ラ敊锛屽苟涓斾綘灏嗕笉寰椾笉纭繚璇ュ璞＄殑瀛樺湪锛屼緥濡?閫氳繃鐢?if锛坱extEl锛墈...} 鏉′欢鍖呰璇ラ儴鍒嗐€?/span>

闄や簡 querySelector 涔嬪锛屽彟涓€涓祦琛岀殑渚嬪瓙鏄?Array.find 鏂规硶锛屽叾缁撴灉鍙兘鏄笉纭畾鐨勩€?/span>

鎮ㄥ苟闈炴€昏兘鎵惧埌鎯宠鐨勪笢瑗?-)

4銆佲€淭S锛屾垜鍛婅瘔浣狅紝鍦ㄨ繖閲岋紒鈥?/span>

姝ｅ鎴戜滑宸茬粡纭畾鐨勯偅鏍凤紝閫氳繃涓ユ牸鐨?null 妫€鏌ワ紝TypeScript 灏嗘洿鍔犳€€鐤戞垜浠殑浠峰€艰銆傚彟涓€鏂归潰锛屾湁鏃舵偍浠呬粠澶栭儴灏辩煡閬撳皢璁剧疆璇ュ€笺€傚湪杩欑鐗规畩鎯呭喌涓嬶紝鎮ㄥ彲浠ヤ娇鐢ㄢ€滃悗缂€琛ㄨ揪寮忚繍绠楃鈥濓細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
  
  
    
    
  
const textEl = document.querySelector('input');console.log(textEl!.value);// 馃憤 with "!" we assure TypeScript// that 'textEl' is not null/undefined
 
   
   
 

5銆佸綋杩佺Щ鍒?TS鈥?/span>

閫氬父锛屽綋鎮ㄥ叿鏈夎杩佺Щ鍒?TypeScript 鐨勬棫鐗堜唬鐮佸簱鏃讹紝鏇村ぇ鐨勯夯鐑︿箣涓€灏辨槸浣?id 閬靛畧鎮ㄧ殑 TSLint 瑙勫垯銆傛偍鍙互鍋氱殑鏄€氳繃娣诲姞浠ヤ笅鍐呭鏉ョ紪杈戞墍鏈夎繖浜涙枃浠?/span>

 
   
   
 

  
    
    
  
 
   
 
  
  
    
    
  
// tslint:disable
 
   
   
 

鍦ㄦ瘡涓枃浠剁殑绗竴琛屼腑锛岃繖鏍?TSLint 涓嶄細鐪熸妫€鏌ュ畠浠€傜劧鍚庯紝浠呭綋寮€鍙戜汉鍛樺鐞嗘棫鏂囦欢鏃讹紝浠栨墠浼氬垹闄ゆ娉ㄩ噴骞朵粎淇璇ユ枃浠朵腑鐨勬墍鏈夋帀姣涢敊璇€傝繖鏍蜂竴鏉ワ紝鎴戜滑灏变笉浼氳繘琛岄潻鍛斤紝鑰屽彧浼氳繘琛岃繘鍖?浠ｇ爜搴撲細閫愭笎浣嗗畨鍏ㄥ湴寰楀埌鏀瑰杽銆?/span>

鑷充簬灏嗗疄闄呯被鍨嬫坊鍔犲埌鏃х殑 JavaScript 浠ｇ爜涓紝瀹為檯涓婇€氬父鍙互涓嶈繖鏍峰仛銆傚彧鏈夊湪鎮ㄦ湁涓€浜涗护浜鸿鍘岀殑浠ｇ爜锛堜緥濡傦紝 涓哄悓涓€鍙橀噺鍒嗛厤涓嶅悓绫诲瀷鐨勫€硷紝鎮ㄥ彲鑳戒細閬囧埌闂銆傚鏋滈噸鏋勪笉鏄竴涓皬闂锛屾偍鍙互浣跨敤杩欎釜鏂规硶瑙ｅ喅闂锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
let mything = 2;mything = 'hi';// 馃洃 Type '"hi"' is not assignable to type 'number'mything = 'hi' as any;// 馃憤 if you say "any", TypeScript says 炉\_(銉?_/炉
 
   
   
 

浣嗘槸鐪熺殑锛岀湡鐨勶紝鐪熺殑灏嗗叾鐢ㄤ綔鏈€鍚庣殑鎵嬫銆傛垜浠笉鍠滄TypeScript涓殑 any銆?/span>

6銆佹洿澶氶檺鍒?/span>

鏈夋椂TypeScript鏃犳硶鎺ㄦ柇绫诲瀷銆傛渶甯歌鐨勬儏鍐垫槸涓€涓嚱鏁板弬鏁帮細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
  
  
    
    
  
function fn(param) { console.log(param);}
 
   
   
 

鍦ㄥ唴閮紝瀹冮渶瑕佸湪姝ゅ涓簆aram鍒嗛厤鏌愮绫诲瀷锛屽洜姝ゅ畠鍙互鍒嗛厤浠讳綍绫诲瀷銆傜敱浜庢垜浠笇鏈涘皢any闄愬埗涓虹粷瀵规渶灏忓€硷紝鍥犳閫氬父寤鸿浣跨敤鍙︿竴涓猼sconfig.json璁剧疆鏉ラ檺鍒惰琛屼负锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
{ "compilerOptions": { "noImplicitAny": true }}
 
   
   
 

涓嶅垢鐨勬槸锛屾垜浠笉鑳藉湪鍑芥暟杩斿洖绫诲瀷涓婁娇鐢ㄨ繖绉嶅畨鍏ㄥ甫锛堥渶瑕佹槑纭緭鍏ワ級銆傚洜姝わ紝濡傛灉鏀逛负浣跨敤鍑芥暟fn锛坧aram锛夛細string {鎴戜細蹇樿璇ョ被鍨嬶紙鍑芥暟fn锛坧aram锛墈锛夛紝TypeScript灏嗕笉浼氬叧娉ㄦ垜杩斿洖鐨勫唴瀹癸紝鍗充娇鎴戜粠璇ュ嚱鏁拌繑鍥炰簡浠讳綍鍐呭銆傛洿鍑嗙‘鍦拌锛氬畠灏嗘牴鎹偍閫€鍥炴垨鏈€€鍥炵殑鍟嗗搧鎺ㄦ柇鍑洪€€璐т环鍊笺€?/span>

骞歌繍鐨勬槸锛孴SLint鍙互涓烘偍鎻愪緵甯姪銆備娇鐢╰ypedef瑙勫垯锛屾偍鍙互浣胯繑鍥炵被鍨嬫垚涓哄繀闇€锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
{ "rules": { "typedef": [ true, "call-signature" ] }}
 
   
   
 

杩欑湅璧锋潵鏄釜濂戒富鎰忥紒

7銆佺被鍨嬩繚鎶?/span>

褰撳€煎叿鏈夊绉嶇被鍨嬫椂锛屽繀椤诲湪绠楁硶涓皢鍏惰€冭檻鍦ㄥ唴锛屼互鍖哄垎涓€绉嶇被鍨嬩笌鍙︿竴绉嶇被鍨嬨€傚叧浜嶵ypeScript鐨勪簨鎯呮槸瀹冧簡瑙ｈ繖绉嶉€昏緫銆?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
type BookId = number | string;function returnFormatterId(id: BookId) { return id.toUpperCase(); // 馃洃 'toUpperCase' does not exist on type 'number'.}function returnFormatterId(id: BookId) { if (typeof id === 'string') { // we've made sure it's a string: return id.toUpperCase(); // so it's 馃憤 } // 馃憤 TS also understands that it // has to be a number here: return id.toFixed(2)}
 
   
   
 

8銆佸啀璋堟硾鍨?/strong>

鍋囪鎴戜滑鍏锋湁杩欑鐩稿綋閫氱敤鐨勭粨鏋勶細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
interface Bookmark { id: string;}class BookmarksService { items: Bookmark[] = [];}
 
   
   
 

鎮ㄦ兂鍦ㄤ笉鍚岀殑搴旂敤绋嬪簭涓娇鐢ㄥ畠锛屼緥濡?鐢ㄤ簬瀛樺偍涔︾睄鎴栫數褰便€?/span>

鍦ㄨ繖鏍风殑搴旂敤绋嬪簭涓紝鎮ㄥ彲浠ユ墽琛屼互涓嬫搷浣滐細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
interface Movie { id: string; name: string;}class SearchPageComponent { movie: Movie; constructor(private bs: BookmarksService) {} getFirstMovie() { // 馃洃 types are not assignable this.movie = this.bs.items[0]; // 馃憤 so you have to manually assert type: this.movie = this.bs.items[0] as Movie; } getSecondMovie() { this.movie = this.bs.items[1] as Movie; }}
 
   
   
 

鍦ㄨ绫讳腑鍙兘闇€瑕佸娆¤繖绉嶇被鍨嬪０鏄庛€?/span>

鎴戜滑鍙互鍋氱殑鏄皢 BookmarksService 绫诲畾涔変负閫氱敤绫伙細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
  
  
    
    
  
class BookmarksService<T> { items: T[] = [];}
 
   
   
 

濂藉惂锛屼笉杩囩幇鍦ㄥ畠澶€氱敤浜嗏€︹€︽垜浠纭繚姝ょ被浣跨敤鐨勭被鍨嬭兘澶熸弧瓒矪ookmark鎺ュ彛锛堝嵆鍏锋湁id锛歴tring灞炴€э級銆傝繖鏄敼杩涚殑澹版槑锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
  
  
    
    
  
class BookmarksService<T extends Bookmark> { items: T[] = [];}
 
   
   
 

鐜板湪锛屽湪鎴戜滑鐨凷earchPageComponent涓紝鎴戜滑鍙渶鎸囧畾涓€娆＄被鍨嬶細

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
class SearchPageComponent { movie: Movie; constructor(private bs: BookmarksService<Movie>) {} getFirstMovie() { this.movie = this.bs.items[0]; // 馃憤 } getSecondMovie() { this.movie = this.bs.items[1]; // 馃憤 }}
 
   
   
 

瀵逛簬璇ラ€氱敤绫伙紝杩樻湁涓€椤瑰彲鑳芥槸鏈夌敤鐨勬敼杩?濡傛灉鎮ㄤ互杩欑閫氱敤韬唤鍦ㄥ叾浠栧湴鏂逛娇鐢ㄥ畠锛岃€屽張涓嶆兂缂栧啓BookmarksService  鐨勮瘽銆?/span>

鎮ㄥ彲浠ュ湪娉涘瀷鐨勫畾涔変腑鎻愪緵榛樿绫诲瀷锛?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
class BookmarksService<T extends Bookmark = Bookmark> { items: T[] = [];}const bs = new BookmarksService();// I don't have to provide the type for the generic now// - in that case 'bs' will be of that default type 'Bookmark'
 
   
   
 

9銆佽矾鐢卞弬鏁?/span>

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
export interface DashboardRouteParams { countryId: string; deviceId: string;}
const routes: Routes = [{ path: 'country/:countryId/device/:deviceId/dashboard'}]

 
   
   
 

10銆佹牴鎹?API 鍝嶅簲鍒涘缓 Interface

濡傛灉鎮ㄦ敹鍒版潵鑷狝PI鐨勫ぇ閲忓祵濂楀搷搴旓紝閭ｄ箞鎵嬪姩閿叆鐩稿簲鐨勬帴鍙ｇ‘瀹炲緢楹荤儲銆傝繖鏄簲璇ョ敱鏈哄櫒澶勭悊鐨勪换鍔★紒馃

鏈変袱绉嶉€夋嫨:

• http://www.json2ts.com
• http://www.jsontots.com

鏄叾涓殑涓€浜涳紝浣嗘槸鍧︾巼鍦拌锛屽畠浠殑鏈嶅姟鍣ㄩ€氬父涓嶅彲鐢ㄣ€傜敱浜嶶RL鐨勮蹇嗗姏寰堝己锛屾垜閫氬父鍙槸浠庡畠浠紑濮嬶細-)涓轰簡鑾峰緱鏈€浣崇粨鏋滃拰涓€浜涘叾浠栭€夐」锛岃浣跨敤

• https://app.quicktype.io/

瀹冭繕鎻愪緵浜嗕竴涓柟渚跨殑Visual Studio Code鎻掍欢~