improve dependency injection typing

yyx990803 · yyx990803 · commit f8b4dfec481f · 2019-06-19T17:07:25.000+08:00
diff --git a/active-rfcs/0000-function-api.md b/active-rfcs/0000-function-api.md
@@ -703,23 +703,31 @@ createComponent({
 
 ### Dependency Injection Typing
 
-The `inject` method is the only API that requires manual typing:
+`provide` and `inject` can be typed by providing a typed symbol using the `Key` type:
 
 ``` ts
-import { createComponent, inject, Value } from 'vue'
+import { createComponent, provide, inject, Key } from 'vue'
 
-createComponent({
+const CountSymbol: Key<number> = Symbol()
+
+const Provider = createComponent({
   setup() {
-    const count: Value<number> = inject(CountSymbol)
+    // will error if provided value is not a number
+    provide(CountSymbol, 123)
+  }
+})
+
+const Consumer = createComponent({
+  setup() {
+    const count = inject(CountSymbol) // count's type is Value<number>
+    console.log(count.value) // 123
     return {
       count
     }
   }
 })
 ```
 
-Here `Value` is the exposed type for value wrappers - it accepts a generic argument to represent the type of its internal value.
-
 # Drawbacks
 
 ### Runtime Reflection of Components
