前情提要 YouTube 頻道Visual Studio Code 影片
難度:★★☆☆☆
這題需要有一些 React 的基礎概念，
問題是如果要讓我們的 RC 更泛用應該怎麼作，
Before 1 2 3 4 5 6 7 8 interface TableProps { items : { id : string }[]; renderItem : (item: { id: string } ) => React .ReactNode ; } export const Table = (props: TableProps ) => { return null ; };
After 1 2 3 4 5 6 7 8 interface TableProps <T> { items : T[]; renderItem : (item: T ) => React .ReactNode ; } export const Table = <T,>(props: TableProps<T> ) => { return null ; };
這裡是很簡單的泛型觀念，如果有寫過具備泛型的語言(ex:C#)應該不難理解，<T,> 這裡有一個小小的逗號，其實是不必要的，<>會被視為未封閉的 RC;<myComponent></myComponent> 或是 <myComponent />,
另外這裡在寫 React Component 時，使用了 arrow function，<T,> 這樣 tricky 的寫法
1 2 3 export const Table = function <T>(props : TableProps <T>) { return null ; };
泛型不難理解，但是考量到需要具備的 React 知識，難度我給他兩顆星
難度:★★★☆☆
這題要動態的取出物件深層的屬性的型別，
看一下影片中的範例 getDeepValue 是一個函數，可以用來取物件深層屬性的值obj:any Matt 說道可以視作一個壞味道(不知道他對 unknown 的看法)
1 2 3 export const getDeepValue = (obj: any, firstKey: string, secondKey: string ) => { return obj[firstKey][secondKey]; };
看一下原始範例如下
1 2 3 4 5 6 7 8 9 10 const obj = { foo : { a : true , b : 2 , }, bar : { c : "12" , d : 18 , }, };
我的作法 如果比較直觀的寫法可以考慮寫個 ObjectType,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const obj : ObjType = { foo : { a : true , b : 2 , }, bar : { c : "12" , d : 18 , }, }; type FirstKeyType = "foo" | "bar" ;type SecondKeyType = "a" | "b" | "c" | "d" ;type ObjType = { [key in FirstKeyType ]: { a : boolean ; b : number } | { c : string ; d : number }; }; export const getDeepValue = (obj : ObjType
註:這裡有用到 index-signatures 的概念
1 2 3 Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values
1 const value = getDeepValue (obj, "foo" , "a" );
Matt 在影片中的作法 1 2 3 4 5 6 7 8 9 10 11 export const getDeepValue = < TObj , TFirstKey extends keyof TObj , TSecondKey extends keyof TObj [TFirstKey ] >( obj: TObj, firstKey: TFirstKey, secondKey: TSecondKey return obj[firstKey][secondKey]; };
keyof 關鍵字可以直接參考官方文件
比較兩者的作法 我們加上了 Type，就是要為程式碼加上保護
1 var error_value = getDeepValue (obj, "error" , "wrong" );
但是無法避免以下的錯誤
1 var error_value = getDeepValue (obj, "foo" , "c" );
obj.foo 是不存在 c 屬性，這樣我們就需要動態判斷型別keyof 作法。
1 2 3 4 5 6 7 export const getDeepValue = <TObj , TFirstKey extends keyof TObj >( obj: TObj, firstKey: TFirstKey, secondKey: keyof TObj[TFirstKey] return obj[firstKey][secondKey]; };
這裡有點不可思議，首先是 ts 的動態型別推導，
1 2 3 4 5 6 7 8 9 10 type TObj = { foo : { a : boolean ; b : number ; }; bar : { c : string ; d : number ; }; };
keyof TObj 的值會是 foo | barfoo 或 bar，secondKey: keyof TObj[TFirstKey]，foo 時，第 3 個參數會限定只能傳入 "a"|"b"
這裡需要思考一下，並不難理解，所以給 3 顆星。
如果能應用得好的話，對於開發 ts Library 會相當有幫助keyof 的技巧，對一個已知的物件，我能不能作到類似的效果(編輯器動態檢查)?
難度:★★★☆☆
這其實是 TypeScript 一個基本的概念與技巧，官方文件 看到更多資訊
一個標準的寫法如下
1 SomeType extends OtherType ? TrueType : FalseType ;
記得這裡最終只會回傳 TrueType 或是 FalseType，而 SomeType 只是作為條件檢查。
1 2 3 4 5 SomeType extends OtherType ? TrueType : SomeType extends OtherConditionType ? OtherThing : FalseType ;
35:20 更進一步 我們看一下怎麼應用 Condition Type 這個技巧?error-messages-in-ts 這個教案
1 2 3 4 5 6 7 export const deepEqualCompare = <Arg >(a : Arg , b : Arg ): boolean => if (Array .isArray (a) || Array .isArray (b)) { throw new Error ("You cannot compare two arrays using deepEqualCompare" ); } return a === b; };
而透過 condition type，可以讓編輯器在開發時直接檢查，看起來更加的優雅
1 2 3 4 5 6 export const deepEqualCompare = <Arg >( a : Arg extends any [] ? "not allow array" : Arg , b : Arg extends any [] ? "not allow array" : Arg ): boolean => return a === b; };
這應該算是 TypeScript 的基本工，也有在官方文件上有很清楚的講解，
程式碼中有 any 算不算壞味道? 我是不是應該用 unknown[] 取代 any[]
Arg extends any[] ? "not allow array" : Arg 明顯出現了重複，我有沒有什麼技巧可以消除這樣的重複?
其它 整個影片還有許多燒腦的部分，
參考
(fin)
