序文
この記事では主に古いプロジェクトを反応させるのに活字をインストールして使用する方法について、あなたはおそらく、活字体であるか理解を前提としています。
この書き込みの主な目的は、これについてオンライン活字体を説明することで、多くの、しかし、彼らは文法的な概念や簡単な例をいくつかあるが、活字体を使用して、古いプロジェクトの本当の変革は、いくつかの記事を反応します。
だから、実際には、ここでのレコードの変換は、プロジェクトを反応します。
基準としたコンテンツセクションブログ活字中国のネットワークを、このサイトは、公式ドキュメントの中国語版があります。
インストール活字体と関連ライブラリ
統合足場のために活字体は、主に活字体が足場に反応統合する方法について話をここでは、このステップをスキップすることができます。
最初の実行
npm install --save @types/react @types/react-domこのステップではないすべてのライブラリは、活字文ファイルを持っているので、実行することにより、反応するとの宣言ファイル-DOMを反応させ得ることが主です
npm install --save @types/库名字活字体の宣言ファイルを取得する方法。
唯一の型チェックは、このライブラリに達成することができ、宣言ファイルを取得します。
あなたには、いくつかの他のライブラリを使用している場合は、ファイルを宣言していない、あなたもそうする必要があるかもしれません。
次に、コマンドを実行します。
npm install --save-dev typescript awesome-typescript-loader source-map-loaderこの時点で、我々はtypescriptです、素晴らしい-typescriptですローダおよびソース・マップ・ローダーをインストールしました。
素晴らしい-typescriptです-ローダーはコンパイル活字体コードtsconfig.jsonのWebPACK使用活字体の標準的な設定ファイルを可能にします。
sourcemapローダ自分のsourcemaps、ソースマップ、便利なデバッグを生成WebPACKの使用時sourcemap活字体の出力ファイルが教えてくれます。
活字体プロファイルを追加
Tsconfig.jsonは、プロジェクトのルートディレクトリにファイルを作成し、以下の内容の例です。
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"outDir": "./dist/", // 重定向输出目录
"sourceMap": true, // 生成相应的 .map文件
"noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错。
"module": "esnext", // 模块引入方式
"target": "esnext", // 指定ECMAScript目标版本
"moduleResolution": "node", // 决定如何处理模块
"lib": [
"esnext",
"dom"
], // 编译过程中需要引入的库文件的列表。
"skipLibCheck": true, //忽略所有库中的声明文件（ *.d.ts）的类型检查。
"jsx": "react" // 在 .tsx文件里支持JSX
},
"include": [
"./src/**/*", // 这个表示处理根目录的src目录下所有的.ts和.tsx文件，并不是所有文件
]
}skipLibCheckすべてのライブラリはtypescriptですによって検出することができ、非常に重要ではありません。
moduleResolutionのセットノードも重要です。あなたが設定しなかった場合はnode_modulesでファイル活字文を見たときに、ではない。このフォルダに移動します。
詳細については、設定ファイルで提供されています：ここ。
コンフィギュレーションのWebPACK
ここでのWebPACKに使用するためのいくつかの設定活字体の必要があります。
ルール設定ファイルの解析TSX
例としては、次のとおりです：
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'env', 'stage-0', 'stage-3'],
plugins: [
'transform-decorators-legacy',
['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
],
},
},
},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
//...
]
//...
}実際には、より多く支払うだけの行：
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }このライン必要性ルールの実行順序は下から上であるので、以下のJSX解析ルールを追加するために解析するとTSX JS tsが再解析しJSXことに注意してください。
もちろん、と
enforce: 'pre'調整後のルールの順序は、その気にすることはできません。
CSS-mouduleを使用して問題を解決
このコードで使用されるコードの場合：
import styles from './index.css'そして、それは次のようなエラーが報告されることがあります。
Cannot find module './index.css'解決策はdeclaration.d.tsというファイルを作成し、ルートディレクトリ内のファイルにある、と述べています：
declare module '*.css' {
const content: any;
export default content;
}このコード行は、すべてのCSSファイルに宣言されています。
私たちは、以前のファイルtsconfig.json変更する必要があり、同時に、このファイルは、パスに配置されます含まれます：
"include": [
"./src/**/*",
"./declaration.d.ts"
]そこに問題を解決する方法がありますが、それぞれのCSSファイルのためのステートメントを生成します、それは少し奇妙な感じいくつかのライブラリをインストールすることによって、この問題は、私は自分自身この方法を用いて、上記のここで少し考えてみましょう。
設定するための省略名サフィックス
あなたが使用することに慣れている場合
import Chart from './Chart/index.jsx'サフィックスはつまり、省略されています：
import Chart from './Chart/index'そして、TSとTSXを結合するWebPACKの同じ必要性を解決します：
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},アントデザインの導入
実際、Antのデザインの公式サイトは、活字体であり、使用する方法をこの事：typescriptですでの使用。
では、なぜあなたがしたい、それがリストされていますか？
私はここで指摘したように、その不使用の基本的な文書上記の設定活字体の間に設置さの面で古いプロジェクトのAntデザイン（通常は右とオンデマンドでロードされた）、のために。
すべてのオンラインドキュメントのように見えますが、プログラムに見つけることができますが、実際に私たちは何をする必要がインストールされTS-インポートプラグインを。
npm i ts-import-plugin --save-devそして、結合前に恐ろしい-typescriptです-ローダー、などWebPACKの中で、次の
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
getCustomTransformers: () => ({
before: [tsImportPluginFactory([
{
libraryName: 'antd',
libraryDirectory: 'lib',
style: 'css'
}
])]
}),
},
exclude: /node_modules/
}
]
},
// ...
}、改正前準備ができて構成されました
この時点までは、実際には、あなたのプロジェクトはまだコンパイル時に活字体を使用していない、ということに注意してください。
我々は唯一の構成allowJsでtrueに設定しない限り、typescriptファイルとここ.TSと.tsxサフィックスを扱いますので。
：使用する前に、参照することができますかわからない、あなたはすでに活字体文法の知識を持っていることを前提と活字体を始めるために5分。
それは、上記のすべての手順の後、変更接尾辞のない既存のコードは引き続き使用することができるはずです。
あなたは活字体を使用している場合は、その後、TSは、新しいファイルをTSXか、元のファイルの拡張子の名前を変更します。
次は、変更のいくつかの典型的な例が一覧表示されます。
機能部品の変形例（子供を含みます）
import React from 'react'
import styles from './index.css'
interface ComputeItemProps {
label: string;
children: React.ReactNode;
}
function ComputeItem({ label, children }: ComputeItemProps) {
return <div className={styles['item']}>
<div className={styles['label']}>{label}:</div>
<div className={styles['content']}>{children}</div>
</div>
}
export default ComputeItem
这个例子中语法都可以在TypeScript的官网查到，唯一需要注意的是children的类型是React.ReactNode。クラスコンポーネント変形例（関数宣言を含む定義されたイベントパラメータ）
import React from 'react'
import styles from './index.css'
interface DataSourceItem {
dayOfGrowth: string;
netValueDate: string;
}
interface ComputeProps {
fundCode: string;
dataSource: DataSourceItem[];
onChange(value: Object): void;
}
export default class Compute extends React.Component<ComputeProps, Object> {
// 改变基金代码
handleChangeFundCode = (e: React.ChangeEvent<HTMLInputElement>) => {
const fundCode = e.target.value
this.props.onChange({
fundCode
})
}
render() {
//...
);
}
}このクラスはコンポーネントを宣言する方法の例を示しています：
React.Component<ComputeProps, Object>構文は奇妙に思えるかもしれないが、これは、C＃やJavaの経験が十分に理解されなければならないされた活字体のジェネリック医薬品です。
パラメータの第1のタイプは小道具を画定し、第2のパラメータは、状態のタイプを定義します。
そして、次のように定義されるべきイベントパラメータの種類に反応します：
React.ChangeEvent<HTMLInputElement>ここでは、あまりにも、ジェネリック医薬品の使用は、変更イベントタイプ入力のトップを表します。
関数型定義プロップアセンブリが、ここでは個別に記載されていません。
これらのいくつかの例は、比較的典型的な例である活字体との組み合わせが反応します。
ウィンドウ上のプロセス変数
グローバル変数のウィンドウの上に書かれた使用は、ウィンドウ上に存在しない属性に求めるメッセージが表示されます。
これに対処するには、declaration.d.tsこのファイル内の変数を定義することができます。
// 定义window变量
interface Window{
r:string[]
}ここで、rは変数名です。
概要
私は、さらにいくつかの例を書きたいと思っていたが、私はそれの一般的な例を更新する時間があれば、将来の書き込みを続行したくない原因DOTA2は、バージョンを更新しました。
この記事では、古いプロジェクトを反応させるのにのみ活字体の設置および統合に焦点を当てて、活字体コンクリートの構文の導入で可能な限り含まない、そしてブログそれを行うことができないので、これらの事をご紹介します。
記事、見落としもある場合は、顔活字体の躊躇であなたを助けることを望んで、正しい私にしてください。