Переглянути джерело

blog: expand the types section

Renée Kooi 5 роки тому
батько
коміт
ecf8b8c044
1 змінених файлів з 53 додано та 3 видалено
  1. 53 3
      website/src/_posts/2020-02-28-1.9.md

+ 53 - 3
website/src/_posts/2020-02-28-1.9.md

@@ -28,11 +28,61 @@ The Dashboard plugin has gained new file type icons: for images — useful befor
 
 ## Types
 
-We now use `tsd`, so our typings test files can actually assert that types are correct.
+Our typings got a significant upgrade: plugin options can now be type-checked! In the past, we did have typings for plugin options, but the `uppy.use()` function had a fallback that would accept _any_ object as options. If your plugin options were wrong, typescript would just use the fallback and not tell you about it!
 
-`PluginOptions` type parameter has been added to to `Uppy.Plugin` for type-checking plugins, while the `uppy.use(typeof Plugin, options: object)` overload has been removed.
+Stricter typings normally mean that old code may no longer type-check. So, although this is a bugfix, you have to opt in to the new types. In 2.0, the old way will be removed and only the strict types will be available.
 
-See [PR #1918](https://github.com/transloadit/uppy/pull/1918) for details.
+You can opt in by specifying the `StrictTypes` type parameter to the `Uppy` type:
+
+```typescript
+import Uppy = require('@uppy/core')
+const uppy = Uppy<Uppy.StrictTypes>({
+  // options here
+})
+```
+
+This type parameter must also be specified if you are storing the `uppy` instance anywhere. For example, inside a class:
+
+```typescript
+class UppyProvider extends React.Component {
+  private uppy: Uppy<Uppy.StrictTypes>
+  constructor (props) {
+    super(props)
+    this.uppy = Uppy<Uppy.StrictTypes>({
+      // etc
+    })
+  }
+}
+```
+
+If you do not specify the `StrictTypes` parameter, the old fallback for the `uppy.use()` method remains available.
+
+The typings for `@uppy/react` component props are now derived from plugin options types, so they will no longer get out of sync, as sometimes they have in the past. For example, in version 1.7, the `@uppy/drag-drop` plugin supported a `note` option to add some text to the drop area. The React typings didn't include that option, so you couldn't use it from typescript! Now, that's permanently fixed:
+
+```typescript
+import components = require('@uppy/react')
+const { DragDrop } = components
+
+// assuming some `uppy` variable already exists
+declare var uppy: Uppy<Uppy.StrictTypes>
+
+function MyComponent () {
+  return (
+    <DragDrop
+      uppy={uppy}
+      note='This prop is now supported!'
+    />
+  )
+}
+```
+
+Finally, the `locale` options and React props now have full typings. Your editor should now be able to provide autocompletion for language keys!
+
+![Screenshot showing VS Code autocompletion for a language key.](/images/blog/1.9/locale-type.png)
+
+We now also use `tsd`, so our typings are actually tested.
+
+See [PR #1918](https://github.com/transloadit/uppy/pull/1918) for all the details.
 
 ## Downloadable ZIP archives of Uppy releases