Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
38elements committed Nov 24, 2020
1 parent 38fa49f commit c4909fd
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions content/ja/guide/v10/typescript.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
name: TypeScript
description: "Preact has built-in TypeScript support. Learn how to make use of it!"
description: "Preactは初期状態でTypeScriptをサポートしています。それの使い方を学びましょう。"
---

# TypeScript

Preact ships TypeScript type definitions, which are used by the library itself!
Preactは自身のTypeScriptの型定義を提供します。

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.
PreactをTypeScriptに対応したエディタ(例えばVSCode)で使うと、JavaScriptを書いている時に型の情報を得ることができます。
アプリケーションのコードに型の情報を加えたい場合、[JSDoc annotations](https://fettblog.eu/typescript-jsdoc-superpowers/)を使うか、TypeScriptでコーディングしてJavaScriptに変換するかもしれません。
このセクションでは、後者について説明します。

---

<div><toc></toc></div>

---

## TypeScript configuration
## TypeScriptの設定

TypeScript includes a full-fledged JSX compiler that you can use instead of Babel.
Add the following configuration to your `tsconfig.json` to transpile JSX to Preact-compatible JavaScript:
TypeScriptにはBabelの代わりに使うことができる完全なJSXコンパイラがあります。
JSXをPreactが実行可能なJavaScriptに変換するために、以下の設定を`tsconfig.json`に加えます。

```json
{
Expand All @@ -33,8 +33,8 @@ Add the following configuration to your `tsconfig.json` to transpile JSX to Prea
}
```

If you use TypeScript within a Babel toolchain, set `jsx` to `preserve` and let Babel handle the transpilation.
You still need to specify `jsxFactory` and `jsxFragmentFactory` to get the correct types.
Babelのツールチェーン内でTypeScriptを使う場合は、以下のように`jsx``preserve`をセットしてBabelに変換処理を行わせます。
更に、正しい型を取得するために`jsxFactory``jsxFragmentFactory`を指定する必要があります。

```json
{
Expand All @@ -47,14 +47,14 @@ You still need to specify `jsxFactory` and `jsxFragmentFactory` to get the corre
}
```

Rename your `.jsx` files to `.tsx` for TypeScript to correctly parse your JSX.
TypeScriptがJSXを正しくパースするために、ファイルの拡張子を`.jsx`から`.tsx`に変更します。

## Typing components
## コンポーネントの型

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.
Preactでは、コンポーネントの種類ごとに型を付ける方法が異なります。
クラスコンポーネントには型安全を保証するためのジェネリック型変数があります。
TypeScriptは、関数がJSXを返す場合に限り、それを関数コンポーネントと判定します。
関数コンポーネントの`props`を定義する方法は複数あります。

### Function components

Expand Down

0 comments on commit c4909fd

Please sign in to comment.