preactjs · 38elements · 38elements · 38elements · Nov 26, 2020 · ddprrt
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -7,8 +7,6 @@ description: "Preact has built-in TypeScript support. Learn how to make use of i

 Preact ships TypeScript type definitions, which are used by the library itself! 

-When you use Preact in a TypeScript-aware editor (like VSCode), you can benefit from the added type information while writing regular JavaScript. If you want to add type information to your own applications, you can use [JSDoc annotations](https://fettblog.eu/typescript-jsdoc-superpowers/), or write TypeScript and transpile to regular JavaScript. This section will focus on the latter.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -92,7 +90,7 @@ function Greeting({ name = "User" }: GreetingProps) {
 }
 ```

-Preact also ships a `FunctionComponent` type to annotate anonymous functions. `FunctionComponent` also adds a type for `children`:
+Preact ships a `FunctionComponent` type to annotate anonymous functions. `FunctionComponent` adds a type for `children` to `props`:
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -170,7 +170,7 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {

 ## Typing events

-Preact emits regular DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -170,7 +170,7 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {

 ## Typing events

-Preact handles standard DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -187,7 +187,7 @@ export class Button extends Component {
 }
 ```

-You can restrict event handlers by adding a type annotation for `this` to the function signature as the first argument. This argument will be erased after transpilation.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md

 ```tsx
 export class Button extends Component {
  handleClick(event: MouseEvent) {
    event.preventDefault();
    if (event.target instanceof HTMLElement) {
-      alert(event.target.tagName); // Alerts BUTTON
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
  render() {
    return (
      <div class="expandable">
        <h2>
+          // `this.props.title` is string type by ExpandableProps.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md

 ```tsx
 export class Button extends Component {
  handleClick(event: MouseEvent) {
    event.preventDefault();
    if (event.target instanceof HTMLElement) {
-      alert(event.target.tagName); // Alerts BUTTON
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -7,8 +7,6 @@ description: "Preact has built-in TypeScript support. Learn how to make use of i

 Preact ships TypeScript type definitions, which are used by the library itself! 

-When you use Preact in a TypeScript-aware editor (like VSCode), you can benefit from the added type information while writing regular JavaScript. If you want to add type information to your own applications, you can use [JSDoc annotations](https://fettblog.eu/typescript-jsdoc-superpowers/), or write TypeScript and transpile to regular JavaScript. This section will focus on the latter.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-    if (event.target instanceof HTMLElement) {
-      console.log(event.target.localName); // "button"
-    }
+    console.log(this.tagName); // "BUTTON"
  }
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
  ref = createRef<HTMLAnchorElement>();

-  componentDidMount() {
-    // current is of type HTMLAnchorElement
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
  }
 }
 ```

-This helps a lot if you want to make sure that the elements you `ref` to are input elements that can be e.g. focussed.
-
 ## Typing context

 `createContext` tries to infer as much as possible from the intial values you pass to:
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md

-### Function components
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -92,7 +93,7 @@ function Greeting({ name = "User" }: GreetingProps) {
 }
 ```

-Preact also ships a `FunctionComponent` type to annotate anonymous functions. `FunctionComponent` also adds a type for `children`:
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md

-There are different ways to type components in Preact. Class components have generic type variables to ensure type safety. TypeScript sees a function as functional component as long as it returns JSX. There are multiple solutions to define props for functional components.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-You can set default props by setting a default value in the function signature.
-
-```tsx
-type GreetingProps = {
-  name?: string; // name is optional!
-}
-
-function Greeting({ name = "User" }: GreetingProps) {
-  // name is at least "User"
-  return <div>Hello {name}!</div>
-}
-```
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -81,7 +81,7 @@ type Props = {
  age: number;
 };

-function MyComponent({ name, age }: Props) {
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
        <div hidden={this.state.toggled}>{this.props.children}</div>
      </div>
    );
  }
 }
 ```

-Class components include children by default, typed as `ComponentChildren`.
-
-## Typing events
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md

-The `createRef` function is also generic, and lets you bind references to element types. In this example, we ensure that the reference can only be bound to `HTMLAnchorElement`. Using `ref` with any other element lets TypeScript thrown an error:
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
  render() {
    return <div ref={this.ref}>Foo</div>;
    //          ~~~
-    //       💥 Error! Ref only can be used for HTMLAnchorElement
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -173,18 +232,17 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {
 }
 ```

-Class components include children by default, typed as `ComponentChildren`.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -100,7 +100,7 @@ const MyComponent: FunctionComponent<Props> = function ({ name, age }) {
 type RenderableProps<P, RefType = any> = P & Readonly<Attributes & { children?: ComponentChildren; ref?: Ref<RefType> }>;
 ```

-When `children` is required, it need to be specified:
+Since `children` in `RenderableProps` type is `children?: ComponentChildren`, `children` need to be specified when `children` is required:
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-It also requires you to pass in all the properties you defined in the initial value:
-
-```tsx
-function App() {
-  // This one errors 💥 as we haven't defined theme
-  return (
-    <AppContext.Provider
-      value={{
-//    ~~~~~ 
-// 💥 Error: theme not defined
-        lang: "de",
-        authenticated: true
-      }}
-    >
-    {}
-      <ComponentThatUsesAppContext />
-    </AppContext.Provider>
-  );
-}
-```
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-If you don't want to specify all properties, you can either merge default values with overrides:
-
-```tsx
-const AppContext = createContext(appContextDefault);
-
-function App() {
-  return (
-    <AppContext.Provider
-      value={{
-        lang: "de",
-        ...appContextDefault
-      }}
-    >
-      <ComponentThatUsesAppContext />
-    </AppContext.Provider>
-  );
-}
-```
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-Or you work without default values and use bind the generic type variable to bind context to a certain type:
-
-```tsx
-type AppContextValues = {
-  authenticated: boolean;
-  lang: string;
-  theme: string;
-}
-
-const AppContext = createContext<Partial<AppContextValues>>({});
-
-function App() {
-  return (
-    <AppContext.Provider
-      value={{
-        lang: "de"
-      }}
-    >
-      <ComponentThatUsesAppContext />
-    </AppContext.Provider>
-  );
-```
-
-All values become optional, so you have to do null checks when using them.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
@@ -350,7 +358,7 @@ const Counter = ({ initial = 0 }) => {

 `useEffect` does extra checks so you only return cleanup functions.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
-  // ✅  if you return something from the effect callback
-  // it HAS to be a function without arguments
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
 // Types for props
+// in the case `children` is required.
diff --git a/content/en/guide/v10/typescript.md b/content/en/guide/v10/typescript.md
 type ExpandableProps = {
  title: string;
+  children: ComponentChildren;
		@@ -7,8 +7,6 @@ description: "Preact has built-in TypeScript support. Learn how to make use of i

		Preact ships TypeScript type definitions, which are used by the library itself!

		When you use Preact in a TypeScript-aware editor (like VSCode), you can benefit from the added type information while writing regular JavaScript. If you want to add type information to your own applications, you can use [JSDoc annotations](https://fettblog.eu/typescript-jsdoc-superpowers/), or write TypeScript and transpile to regular JavaScript. This section will focus on the latter.
		@@ -170,7 +170,7 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {

		## Typing events

		Preact emits regular DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.
		@@ -170,7 +170,7 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {

		## Typing events

		Preact handles standard DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.

		There are different ways to type components in Preact. Class components have generic type variables to ensure type safety. TypeScript sees a function as functional component as long as it returns JSX. There are multiple solutions to define props for functional components.

		The `createRef` function is also generic, and lets you bind references to element types. In this example, we ensure that the reference can only be bound to `HTMLAnchorElement`. Using `ref` with any other element lets TypeScript thrown an error:
		@@ -350,7 +358,7 @@ const Counter = ({ initial = 0 }) => {

		`useEffect` does extra checks so you only return cleanup functions.
		// ✅ if you return something from the effect callback
		// it HAS to be a function without arguments