瑕佸湪React椤圭洰涓娇鐢═ypescript锛岄渶瑕佸厛瀹夎Typescript鍜孈types/react鍜孈types/react-dom杩欎袱涓緷璧栥€?/p>

棣栧厛锛屽畨瑁匱ypescript鍜孈types/react鍜孈types/react-dom锛?/p>

npm install typescript @types/react @types/react-dom

鐒跺悗锛屽湪椤圭洰鏍圭洰褰曚笅鍒涘缓涓€涓猼sconfig.json鏂囦欢锛岄厤缃甌ypescript缂栬瘧閫夐」锛?/p>

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true
  }
}

鎺ヤ笅鏉ワ紝灏嗛」鐩腑鐨?js鎴?jsx鏂囦欢鏀逛负.ts鎴?tsx鏂囦欢锛屽苟鍦ㄦ枃浠跺紑澶存坊鍔犵被鍨嬪０鏄庯紝渚嬪锛?/p>

import React from 'react';

interface Props {
  name: string;
}

const App: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default App;

鏈€鍚庯紝鍦ㄩ」鐩腑浣跨敤Typescript缂栬瘧宸ュ叿锛堝webpack鎴朠arcel锛夋潵缂栬瘧Typescript浠ｇ爜锛屽苟杩愯椤圭洰銆?/p>

杩欐牱锛屽氨鍙互鍦≧eact椤圭洰涓娇鐢═ypescript浜嗭紝浜彈绫诲瀷妫€鏌ュ拰鏇村ソ鐨勪唬鐮佹彁绀恒€?/p>