Bertindak balas dengan typescript: amalan terbaik

React dan TypeScript adalah dua teknologi hebat yang digunakan oleh banyak pemaju hari ini. Mengetahui bagaimana untuk melakukan perkara -perkara boleh menjadi rumit, dan kadang -kadang sukar untuk mencari jawapan yang betul. Tidak perlu risau. Kami telah mengumpulkan amalan terbaik bersama -sama dengan contoh -contoh untuk menjelaskan sebarang keraguan yang mungkin anda miliki.

mari kita menyelam!

Takeaways Key

Leverage TypeScript untuk keselamatan yang dipertingkatkan: Menggunakan TypeScript dengan bertindak balas untuk mendapat manfaat daripada menaip statik yang meningkatkan keselamatan kod, ramalan, dan produktiviti pemaju dengan menangkap kesilapan pada masa kompilasi.
Konfigurasi TypeScript dengan cekap: Mulakan dengan persediaan `tsconfig.json` yang mantap, membolehkan pilihan seperti` ketat`, `noemit`, dan` esmoduleinter 'untuk menguatkuasakan amalan terbaik dan memudahkan modul pengendalian dan kompilasi.
• Mengintegrasikan Eslint dan Prettier: Sediakan Eslint dengan parser Typescript dan Prettier untuk pemformatan kod yang konsisten. Ini membantu mengekalkan kualiti kod dan konsistensi, terutamanya dalam persekitaran pasukan.
• Gunakan TypeScript dengan cangkuk: Ambil kesempatan daripada keupayaan TypeScript untuk menyimpulkan jenis dalam cangkuk React untuk kod bersih dan lebih selamat. Gunakan generik dan jenis kesatuan untuk mengendalikan logik keadaan kompleks.
• Taipkan alat peraga dan nyatakan dengan tepat: Tentukan props komponen dan keadaan menggunakan antara muka atau jenis TypeScript untuk memastikan komponen menerima data yang betul, meningkatkan kebolehpercayaan komponen dan penyelenggaraan.
Mengadopsi Amalan Terbaik untuk Persediaan Projek: Gunakan aplikasi Create React dengan templat Typescript untuk persediaan awal untuk memulakan projek dengan cepat dengan lalai yang masuk akal dan membina konfigurasi yang dioptimumkan untuk TypeScript.
bagaimana reaksi dan typescript berfungsi bersama
Sebelum kita memulakan, mari kita kembali semula bagaimana reaksi dan typescript berfungsi bersama -sama. React adalah "perpustakaan JavaScript untuk membina antara muka pengguna", manakala TypeScript adalah "superset yang ditaip JavaScript yang disusun kepada JavaScript biasa." Dengan menggunakannya bersama -sama, kami pada dasarnya membina UI kami menggunakan versi JavaScript yang ditaip.

Sebab anda mungkin menggunakannya bersama -sama adalah untuk mendapatkan manfaat bahasa yang ditaip secara statik (TypeScript) untuk UI anda. Ini bermakna lebih banyak keselamatan dan lebih sedikit pepijat penghantaran ke hujung depan.

Adakah typescript menyusun kod reaksi saya?

Soalan biasa yang sentiasa baik untuk dikaji semula adalah sama ada TypeScript menyusun kod React anda. Cara kerja Typescript adalah serupa dengan interaksi ini:

ts: "Hei, ini semua kod UI anda?"

React: "Yup!" TS: "COOL! Saya akan menyusunnya dan pastikan anda tidak terlepas apa -apa. "

React: "Kedengarannya baik kepada saya!"

Jadi jawapannya adalah ya, ia tidak! Tetapi kemudian, apabila kita menutup tetapan tsconfig.json, kebanyakan masa anda mahu menggunakan "noemit": benar. Apa ini bermakna TypeScript tidak akan memancarkan JavaScript selepas penyusunan. Ini kerana biasanya, kami hanya menggunakan TypeScript untuk melakukan pemeriksaan jenis kami.

output dikendalikan, dalam tetapan CRA, oleh skrip reaksi. Kami menjalankan benang Build and React-Scripts mengumpulkan output untuk pengeluaran.

untuk merakam, TypeScript menyusun kod React anda untuk menaip kod anda. Ia tidak memancarkan sebarang output JavaScript (dalam kebanyakan senario). Output masih sama dengan projek reaksi bukan jenis.

Bolehkah TypeScript berfungsi dengan React and Webpack?

Ya, TypeScript boleh berfungsi dengan React dan Webpack. Beruntung untuk anda, dokumentasi Webpack mempunyai panduan mengenai itu.

Mudah -mudahan, ini memberi anda penyegaran lembut tentang bagaimana kedua -dua bekerja bersama -sama. Sekarang, ke amalan terbaik!

Amalan Terbaik

Kami telah meneliti soalan -soalan yang paling biasa dan menyusun senarai berguna ini kes penggunaan yang paling biasa untuk bertindak balas dengan TypeScript. Dengan cara ini, anda boleh menggunakan artikel ini sebagai rujukan dalam projek anda sendiri.

Konfigurasi

Salah satu yang paling menyeronokkan, namun bahagian pembangunan yang paling penting adalah konfigurasi. Bagaimanakah kita dapat menetapkan perkara -perkara dalam jumlah masa yang singkat yang akan memberikan kecekapan dan produktiviti maksimum? Kami akan membincangkan persediaan projek termasuk:

• tsconfig.json
• Eslint
• Prettier
• vs sambungan dan tetapan kod.

Persediaan Projek

Cara paling cepat untuk memulakan aplikasi React/TypeScript adalah dengan menggunakan Create-React-App dengan templat Typescript. Anda boleh melakukan ini dengan menjalankan:

npx create-react-app my-app <span>--template typescript
</span>

Ini akan membawa anda minimum untuk mula menulis React dengan TypeScript. Beberapa perbezaan yang ketara ialah:

• lanjutan fail .tsx
• tsconfig.json
• react-app-env.d.ts

TSX adalah untuk "typescript jsx". Tsconfig.json adalah fail konfigurasi TypeScript, yang mempunyai beberapa lalai yang ditetapkan. React-app-env.d.ts merujuk jenis skrip reaksi, dan membantu dengan perkara-perkara seperti membenarkan import SVG.

tsconfig.json

Bertuah untuk kami, templat React/Typescript terbaru menghasilkan tsconfig.json untuk kami. Walau bagaimanapun, mereka menambah minimum untuk bermula. Kami mencadangkan anda mengubah suai anda untuk memadankan yang di bawah. Kami telah menambah komen untuk menerangkan tujuan setiap pilihan juga:

<span>{
</span>  <span>"compilerOptions": {
</span>    <span>"target": "es5", // Specify ECMAScript target version
</span>    <span>"lib": [
</span>      <span>"dom",
</span>      <span>"dom.iterable",
</span>      <span>"esnext"
</span>    <span>], // List of library files to be included in the compilation
</span>    <span>"allowJs": true, // Allow JavaScript files to be compiled
</span>    <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span>    <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span>    <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span>    <span>"strict": true, // Enable all strict type checking options
</span>    <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span>    <span>"module": "esnext", // Specify module code generation
</span>    <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span>    <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span>    <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span>    <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span>    <span>"jsx": "react", // Support JSX in .tsx files
</span>    <span>"sourceMap": true, // Generate corrresponding .map file
</span>    <span>"declaration": true, // Generate corresponding .d.ts file
</span>    <span>"noUnusedLocals": true, // Report errors on unused locals
</span>    <span>"noUnusedParameters": true, // Report errors on unused parameters
</span>    <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span>    <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span>  <span>},
</span>  <span>"include": [
</span>    <span>"src/**/*" // *** The files TypeScript should type check ***
</span>  <span>],
</span>  <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>

Cadangan tambahan datang dari komuniti Ch-Cheatsheet React-Typescript dan penjelasannya datang dari dokumen pilihan pengkompil dalam buku panduan rasmi TypeScript. Ini adalah sumber yang indah jika anda ingin belajar tentang pilihan lain dan apa yang mereka lakukan.

Eslint/Prettier

Untuk memastikan bahawa kod anda mengikuti peraturan projek atau pasukan anda, dan gaya itu konsisten, disarankan anda menyediakan Eslint dan Prettier. Untuk membuat mereka bermain dengan baik, ikuti langkah -langkah ini untuk menetapkannya.

1. Pasang kebergantungan dev yang diperlukan:

   npx create-react-app my-app <span>--template typescript
   </span>

2. Buat fail .eslintrc.js pada akar dan tambahkan yang berikut:

   <span>{
   </span>  <span>"compilerOptions": {
   </span>    <span>"target": "es5", // Specify ECMAScript target version
   </span>    <span>"lib": [
   </span>      <span>"dom",
   </span>      <span>"dom.iterable",
   </span>      <span>"esnext"
   </span>    <span>], // List of library files to be included in the compilation
   </span>    <span>"allowJs": true, // Allow JavaScript files to be compiled
   </span>    <span>"skipLibCheck": true, // Skip type checking of all declaration files
   </span>    <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
   </span>    <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
   </span>    <span>"strict": true, // Enable all strict type checking options
   </span>    <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
   </span>    <span>"module": "esnext", // Specify module code generation
   </span>    <span>"moduleResolution": "node", // Resolve modules using Node.js style
   </span>    <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
   </span>    <span>"resolveJsonModule": true, // Include modules imported with .json extension
   </span>    <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
   </span>    <span>"jsx": "react", // Support JSX in .tsx files
   </span>    <span>"sourceMap": true, // Generate corrresponding .map file
   </span>    <span>"declaration": true, // Generate corresponding .d.ts file
   </span>    <span>"noUnusedLocals": true, // Report errors on unused locals
   </span>    <span>"noUnusedParameters": true, // Report errors on unused parameters
   </span>    <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
   </span>    <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
   </span>  <span>},
   </span>  <span>"include": [
   </span>    <span>"src/**/*" // *** The files TypeScript should type check ***
   </span>  <span>],
   </span>  <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
   </span><span>}
   </span>

3. Tambahkan kebergantungan yang lebih cantik:

   <span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
   </span>

4. Buat fail .prettierrc.js di akar dan tambahkan yang berikut:

   module<span>.exports =  {
   </span>  <span>parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
   </span>  <span>extends:  [
   </span>    <span>'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
   </span>    <span>'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
   </span>  <span>],
   </span>  <span>parserOptions:  {
   </span>  <span>ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
   </span>  <span>sourceType:  'module',  // Allows for the use of imports
   </span>  <span>ecmaFeatures:  {
   </span>    <span>jsx:  true,  // Allows for the parsing of JSX
   </span>  <span>},
   </span>  <span>},
   </span>  <span>rules:  {
   </span>    <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
   </span>    <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
   </span>  <span>},
   </span>  <span>settings:  {
   </span>    <span>react:  {
   </span>      <span>version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
   </span>    <span>},
   </span>  <span>},
   </span><span>};
   </span>

5. Kemas kini fail .eslintrc.js:

   <span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
   </span>

Cadangan ini datang dari sumber komuniti yang ditulis yang dipanggil "Menggunakan Eslint dan Prettier dalam Projek Typescript", oleh Robert Cooper. Jika anda melawat sumber ini, anda boleh membaca lebih lanjut mengenai "mengapa" di sebalik peraturan dan konfigurasi ini.

vs sambungan dan tetapan kod

Kami telah menambah Eslint dan Prettier dan langkah seterusnya untuk meningkatkan DX kami adalah untuk memperbaiki/memperbaiki kod kami secara automatik.

Pertama, pasangkan lanjutan Eslint dan sambungan yang lebih cantik untuk kod VS. Ini akan membolehkan Eslint mengintegrasikan dengan editor anda dengan lancar.

Seterusnya, kemas kini tetapan ruang kerja anda dengan menambahkan yang berikut ke .vscode/settings.json:

module<span>.exports =  {
</span>  <span>semi:  true,
</span>  <span>trailingComma:  'all',
</span>  <span>singleQuote:  true,
</span>  <span>printWidth:  120,
</span>  <span>tabWidth:  4,
</span><span>};
</span>

Ini akan membolehkan VS kod berfungsi sihir dan menetapkan kod anda apabila anda menyimpan. Ia cantik!

Cadangan ini juga datang dari artikel yang dikaitkan sebelum ini "Menggunakan Eslint dan Prettier dalam Projek Typescript", oleh Robert Cooper.

NOTA: Untuk membaca lebih lanjut mengenai React.fc, lihat di sini, dan baca di sini untuk React.reactNode.

Komponen

Salah satu konsep teras React adalah komponen. Di sini, kami akan merujuk kepada komponen standard sebagai React v16.8, yang bermaksud yang menggunakan cangkuk yang bertentangan dengan kelas.

Secara umum, ada banyak yang perlu dibimbangkan untuk komponen asas. Mari kita lihat contoh:

module<span>.exports =  {
</span>  <span>parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
</span>  <span>extends:  [
</span>    <span>'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
</span>    <span>'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
</span><span>+   'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
</span><span>+   'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
</span>  <span>],
</span>  <span>parserOptions:  {
</span>  <span>ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
</span>  <span>sourceType:  'module',  // Allows for the use of imports
</span>  <span>ecmaFeatures:  {
</span>    <span>jsx:  true,  // Allows for the parsing of JSX
</span>  <span>},
</span>  <span>},
</span>  <span>rules:  {
</span>    <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span>    <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span>  <span>},
</span>  <span>settings:  {
</span>    <span>react:  {
</span>      <span>version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
</span>    <span>},
</span>  <span>},
</span><span>};
</span>

Perhatikan perbezaan utama di sini. Dalam contoh pertama, kami menulis fungsi kami sebagai pengisytiharan fungsi . Kami memberi penjelasan jenis jenis dengan react.node kerana itulah yang dikembalikannya. Sebaliknya, contoh kedua menggunakan ekspresi fungsi . Komponen fungsi ". Ia boleh mengelirukan untuk mengingati kedua -duanya. Ia kebanyakannya adalah pilihan reka bentuk. Mana -mana yang anda pilih untuk digunakan dalam projek anda, gunakannya secara konsisten. props

Konsep teras seterusnya yang akan kami sampaikan adalah prop. Anda boleh menentukan alat peraga anda menggunakan antara muka atau jenis. Mari kita lihat contoh lain:

Ketika datang ke jenis atau antara muka, kami mencadangkan mengikuti garis panduan yang dibentangkan oleh Komuniti React-Typescript-Cheatsheet:

• "Sentiasa gunakan antara muka untuk definisi API awam semasa mengarang perpustakaan atau definisi jenis ambien pihak ke-3."
• "Pertimbangkan menggunakan jenis untuk prop dan keadaan komponen React anda, kerana ia lebih dikekang."

anda boleh membaca lebih lanjut mengenai perbincangan dan melihat jadual berguna membandingkan jenis vs antara muka di sini.

mari kita lihat satu lagi contoh supaya kita dapat melihat sesuatu yang lebih praktikal:

npx create-react-app my-app <span>--template typescript
</span>

Dalam komponen ini, kami menggunakan jenis untuk alat peraga kami. Setiap prop mempunyai penerangan ringkas yang disenaraikan di atasnya untuk memberikan lebih banyak konteks kepada pemaju lain. ? Selepas prop yang dinamakan warna menunjukkan bahawa ia adalah pilihan. Kanak -kanak prop mengambil reaksi. Untuk mengambil kira prop warna pilihan kami, kami menggunakan nilai lalai apabila merosakkannya. Contoh ini harus meliputi asas -asas dan menunjukkan bahawa anda perlu menulis jenis untuk alat peraga anda dan menggunakan kedua -dua nilai pilihan dan lalai.

Secara umum, simpan perkara -perkara ini semasa menulis alat peraga anda dalam projek React dan TypeScript:

• Sentiasa tambahkan komen deskriptif ke alat peraga anda menggunakan notasi tsdoc /** komen* /.
• sama ada anda menggunakan jenis atau antara muka untuk alat komponen anda, gunakannya secara konsisten.
• Apabila prop adalah pilihan, mengendalikan dengan sewajarnya atau menggunakan nilai lalai.

cangkuk

bernasib baik, kesimpulan jenis jenis jenis berfungsi dengan baik apabila menggunakan cangkuk. Ini bermakna anda tidak banyak bimbang. Sebagai contoh, ambil contoh ini:

<span>{
</span>  <span>"compilerOptions": {
</span>    <span>"target": "es5", // Specify ECMAScript target version
</span>    <span>"lib": [
</span>      <span>"dom",
</span>      <span>"dom.iterable",
</span>      <span>"esnext"
</span>    <span>], // List of library files to be included in the compilation
</span>    <span>"allowJs": true, // Allow JavaScript files to be compiled
</span>    <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span>    <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span>    <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span>    <span>"strict": true, // Enable all strict type checking options
</span>    <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span>    <span>"module": "esnext", // Specify module code generation
</span>    <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span>    <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span>    <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span>    <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span>    <span>"jsx": "react", // Support JSX in .tsx files
</span>    <span>"sourceMap": true, // Generate corrresponding .map file
</span>    <span>"declaration": true, // Generate corresponding .d.ts file
</span>    <span>"noUnusedLocals": true, // Report errors on unused locals
</span>    <span>"noUnusedParameters": true, // Report errors on unused parameters
</span>    <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span>    <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span>  <span>},
</span>  <span>"include": [
</span>    <span>"src/**/*" // *** The files TypeScript should type check ***
</span>  <span>],
</span>  <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>

Typescript menyenaraikan nilai yang diberikan untuk digunakan oleh cangkuk UseState. Ini adalah kawasan di mana React dan Typescript hanya berfungsi bersama dan cantik.

Pada masa-masa yang jarang berlaku di mana anda perlu memulakan cangkuk dengan nilai null-ish, anda boleh menggunakan generik dan lulus kesatuan untuk menaip cangkuk anda dengan betul. Lihat contoh ini:

<span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>

Tempat lain di mana typescript bersinar dengan cangkuk adalah dengan userreducer, di mana anda boleh mengambil kesempatan daripada kesatuan yang diskriminasi. Berikut adalah contoh yang berguna:

module<span>.exports =  {
</span>  <span>parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
</span>  <span>extends:  [
</span>    <span>'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
</span>    <span>'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span>  <span>],
</span>  <span>parserOptions:  {
</span>  <span>ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
</span>  <span>sourceType:  'module',  // Allows for the use of imports
</span>  <span>ecmaFeatures:  {
</span>    <span>jsx:  true,  // Allows for the parsing of JSX
</span>  <span>},
</span>  <span>},
</span>  <span>rules:  {
</span>    <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span>    <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span>  <span>},
</span>  <span>settings:  {
</span>    <span>react:  {
</span>      <span>version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
</span>    <span>},
</span>  <span>},
</span><span>};
</span>

Sumber: Seksyen Hooks React-Typescript-Cheatsheet

Keindahan di sini terletak pada kegunaan kesatuan yang diskriminasi. Perhatikan bagaimana tindakan mempunyai kesatuan dua objek yang sama. Jenis harta adalah rentetan literal. Perbezaan antara ini dan rentetan jenis ialah nilai mesti sepadan dengan literal rentetan yang ditakrifkan dalam jenis. Ini bermakna program anda lebih selamat kerana pemaju hanya boleh memanggil tindakan yang mempunyai kunci jenis yang ditetapkan untuk "set_one" atau "set_two".

Seperti yang anda lihat, cangkuk tidak menambah banyak kerumitan kepada sifat projek React dan TypeScript. Jika ada, mereka meminjamkan diri dengan baik kepada kedua -duanya.

Kes penggunaan biasa

Bahagian ini adalah untuk menampung kes -kes penggunaan yang paling biasa di mana orang tersandung apabila menggunakan TypeScript dengan React. Kami berharap dengan berkongsi ini, anda akan mengelakkan perangkap dan juga berkongsi pengetahuan ini dengan orang lain.

Pengendalian peristiwa borang

Salah satu kes yang paling biasa adalah menaip onchange yang digunakan pada medan input dalam bentuk. Berikut adalah contoh:

npx create-react-app my-app <span>--template typescript
</span>

Memperluas alat komponen

Kadang -kadang anda ingin mengambil alat komponen yang diisytiharkan untuk satu komponen dan memanjangkannya untuk menggunakannya pada komponen lain. Tetapi anda mungkin mahu mengubah suai satu atau dua. Nah, ingat bagaimana kita melihat dua cara untuk menaip alat, jenis atau antara muka komponen? Bergantung pada yang anda gunakan menentukan bagaimana anda memperluaskan alat komponen. Mari kita lihat cara menggunakan jenis:

<span>{
</span>  <span>"compilerOptions": {
</span>    <span>"target": "es5", // Specify ECMAScript target version
</span>    <span>"lib": [
</span>      <span>"dom",
</span>      <span>"dom.iterable",
</span>      <span>"esnext"
</span>    <span>], // List of library files to be included in the compilation
</span>    <span>"allowJs": true, // Allow JavaScript files to be compiled
</span>    <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span>    <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span>    <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span>    <span>"strict": true, // Enable all strict type checking options
</span>    <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span>    <span>"module": "esnext", // Specify module code generation
</span>    <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span>    <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span>    <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span>    <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span>    <span>"jsx": "react", // Support JSX in .tsx files
</span>    <span>"sourceMap": true, // Generate corrresponding .map file
</span>    <span>"declaration": true, // Generate corresponding .d.ts file
</span>    <span>"noUnusedLocals": true, // Report errors on unused locals
</span>    <span>"noUnusedParameters": true, // Report errors on unused parameters
</span>    <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span>    <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span>  <span>},
</span>  <span>"include": [
</span>    <span>"src/**/*" // *** The files TypeScript should type check ***
</span>  <span>],
</span>  <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>

Jika anda mengisytiharkan alat peraga anda menggunakan antara muka, maka kami boleh menggunakan kata kunci yang diperluaskan pada dasarnya "memanjangkan" antara muka tetapi membuat pengubahsuaian atau dua:

<span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>

kedua -dua kaedah menyelesaikan masalah. Terpulang kepada anda untuk memutuskan yang hendak digunakan. Secara peribadi, memperluaskan antara muka terasa lebih mudah dibaca, tetapi pada akhirnya, terpulang kepada anda dan pasukan anda.

anda boleh membaca lebih lanjut mengenai kedua -dua konsep dalam buku panduan TypeScript:

• Jenis persimpangan
• Memperluas antara muka

perpustakaan pihak ketiga

Sama ada untuk pelanggan GraphQL seperti Apollo atau untuk ujian dengan sesuatu seperti Perpustakaan Ujian React, kami sering mendapati diri kami menggunakan perpustakaan pihak ketiga dalam projek React dan TypeScript. Apabila ini berlaku, perkara pertama yang anda mahu lakukan ialah melihat jika terdapat pakej @Types dengan definisi jenis TypeScript. Anda boleh melakukannya dengan menjalankan:

module<span>.exports =  {
</span>  <span>parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
</span>  <span>extends:  [
</span>    <span>'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
</span>    <span>'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span>  <span>],
</span>  <span>parserOptions:  {
</span>  <span>ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
</span>  <span>sourceType:  'module',  // Allows for the use of imports
</span>  <span>ecmaFeatures:  {
</span>    <span>jsx:  true,  // Allows for the parsing of JSX
</span>  <span>},
</span>  <span>},
</span>  <span>rules:  {
</span>    <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span>    <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span>  <span>},
</span>  <span>settings:  {
</span>    <span>react:  {
</span>      <span>version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
</span>    <span>},
</span>  <span>},
</span><span>};
</span>

Contohnya, jika anda menggunakan jest, anda boleh melakukan ini dengan menjalankan:

<span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
</span>

Ini kemudian akan memberi anda jenis keselamatan jenis setiap kali anda menggunakan jest dalam projek anda.

ruang nama @Types dikhaskan untuk definisi jenis pakej. Mereka tinggal di repositori yang dipanggil pastiTyped, yang sebahagiannya dikekalkan oleh pasukan Typescript dan sebahagiannya masyarakat.

Sekiranya ini diselamatkan sebagai kebergantungan atau kebencian dalam pakej.json saya?

Jawapan pendek adalah "ia bergantung". Kebanyakan masa, mereka boleh berada di bawah kebencian jika anda membina aplikasi web. Walau bagaimanapun, jika anda menulis Perpustakaan React dalam TypeScript, anda mungkin mahu memasukkannya sebagai kebergantungan.

Terdapat beberapa jawapan untuk ini di Stack Overflow, yang boleh anda periksa untuk maklumat lanjut.

Apa yang berlaku jika mereka tidak mempunyai pakej @types?

Jika anda tidak menemui pakej @Types pada npm, maka anda pada dasarnya mempunyai dua pilihan:

1. tambahkan fail pengisytiharan asas
2. tambahkan fail pengisytiharan menyeluruh

Pilihan pertama bermakna anda membuat fail berdasarkan nama pakej dan letakkan pada akar. Jika, misalnya, kami memerlukan jenis untuk pakej pisang-JS kami, maka kami boleh membuat fail pengisytiharan asas yang dipanggil pisang-js.d.ts pada akar:

npx create-react-app my-app <span>--template typescript
</span>

Ini tidak akan memberi anda keselamatan jenis tetapi ia akan menyahsekat anda.

Fail pengisytiharan yang lebih teliti adalah di mana anda menambah jenis untuk perpustakaan/pakej:

<span>{
</span>  <span>"compilerOptions": {
</span>    <span>"target": "es5", // Specify ECMAScript target version
</span>    <span>"lib": [
</span>      <span>"dom",
</span>      <span>"dom.iterable",
</span>      <span>"esnext"
</span>    <span>], // List of library files to be included in the compilation
</span>    <span>"allowJs": true, // Allow JavaScript files to be compiled
</span>    <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span>    <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span>    <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span>    <span>"strict": true, // Enable all strict type checking options
</span>    <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span>    <span>"module": "esnext", // Specify module code generation
</span>    <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span>    <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span>    <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span>    <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span>    <span>"jsx": "react", // Support JSX in .tsx files
</span>    <span>"sourceMap": true, // Generate corrresponding .map file
</span>    <span>"declaration": true, // Generate corresponding .d.ts file
</span>    <span>"noUnusedLocals": true, // Report errors on unused locals
</span>    <span>"noUnusedParameters": true, // Report errors on unused parameters
</span>    <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span>    <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span>  <span>},
</span>  <span>"include": [
</span>    <span>"src/**/*" // *** The files TypeScript should type check ***
</span>  <span>],
</span>  <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>

Jika anda tidak pernah menulis fail pengisytiharan, maka kami cadangkan anda melihat panduan dalam buku panduan rasmi Typescript.

Ringkasan

Menggunakan React dan TypeCript bersama -sama dengan cara yang terbaik memerlukan sedikit pembelajaran kerana jumlah maklumat, tetapi manfaatnya sangat besar dalam jangka masa panjang. Dalam artikel ini, kami meliputi konfigurasi, komponen, prop, cangkuk, kes penggunaan biasa, dan perpustakaan pihak ketiga. Walaupun kita dapat menyelam lebih jauh ke banyak kawasan individu, ini harus meliputi 80% yang diperlukan untuk membantu anda mengikuti amalan terbaik.

Jika anda ingin melihat ini dalam tindakan, anda dapat melihat contoh ini di GitHub.

Jika anda ingin berhubung, kongsi maklum balas mengenai artikel ini atau berbual tentang menggunakan dua teknologi bersama -sama, anda boleh menghubungi saya di Twitter @jsjoeio.

bacaan selanjutnya

Jika anda ingin menyelam lebih mendalam, berikut adalah beberapa sumber yang kami cadangkan:

React-Typescript-Cheatsheet

Banyak cadangan ini datang terus dari Cheatsheet React-Typescript. Jika anda mencari contoh atau butiran tertentu mengenai apa-apa yang React-Typescript, ini adalah tempat untuk pergi. Kami mengalu -alukan sumbangan juga!

Buku Panduan TypeScript Rasmi

Satu lagi sumber yang hebat ialah Buku Panduan Typescript. Ini dikemas kini oleh pasukan TypeScript dan memberikan contoh dan penjelasan yang mendalam di sebalik kerja dalaman bahasa.

Typescript Playground

Adakah anda tahu anda boleh menguji React dengan kod typescript betul -betul di penyemak imbas? Apa yang perlu anda lakukan ialah mengimport React. Berikut adalah pautan untuk memulakan anda.

cara praktikal untuk memajukan kemahiran typescript anda

Baca panduan kami mengenai cara praktikal untuk memajukan kemahiran TypeScript anda untuk menetapkan diri anda untuk pembelajaran berterusan semasa anda bergerak ke hadapan.

Soalan Lazim Mengenai React dengan TypeScript

Bolehkah anda menggunakan React with TypeScript?

es, anda boleh menggunakan React dengan TypeScript. Malah, menggabungkan React dengan TypeScript telah menjadi semakin popular dalam komuniti pembangunan web. TypeScript adalah superset javascript yang ditaip secara statik yang menyediakan alat yang dipertingkatkan dan jenis keselamatan, menjadikannya pilihan yang sangat baik untuk membina aplikasi reaksi yang mantap dan boleh dikekalkan. Tandatangan fungsi TypeScript. TypeScript membolehkan anda menentukan jenis yang kuat untuk prop dan negeri, mengurangkan risiko kesilapan runtime dan menjadikan asas anda lebih diramalkan. Di samping itu, autocompletion TypeScript dan pemeriksaan jenis dalam editor kod moden memberikan bantuan yang berharga semasa pembangunan. Dengan TypeScript, anda boleh menikmati faedah menaip statik semasa membina antara muka pengguna yang dinamik dan interaktif dengan React, menghasilkan aplikasi web yang lebih dipercayai dan boleh dipelihara. Typescript tidak diperlukan untuk membina aplikasi bertindak balas, tetapi ia boleh menjadi sangat bermanfaat. React pada asalnya dibangunkan menggunakan JavaScript (ECMAScript), dan banyak aplikasi React masih ditulis dalam JavaScript biasa. React berfungsi dengan lancar dengan JavaScript, dan anda boleh membuat aplikasi reaksi yang berfungsi sepenuhnya dan cekap tanpa TypeScript. TypeScript adalah superset javascript yang ditaip secara statik, yang bermaksud ia menambah anotasi jenis dan memeriksa kod JavaScript. Anotasi jenis ini boleh menangkap kesilapan yang berkaitan dengan jenis pada masa kompilasi, menawarkan kualiti kod dan penyelenggaraan yang lebih baik. TypeScript boleh membuat codebase reaksi yang besar dan kompleks lebih mudah diurus dengan menyediakan keselamatan jenis untuk prop, keadaan, dan parameter fungsi, mengurangkan kemungkinan kesilapan runtime. dengan JavaScript biasa. Walau bagaimanapun, TypeScript dapat meningkatkan pengalaman pembangunan anda dengan menambahkan pemeriksaan jenis dan meningkatkan kebolehprediksi kod, menjadikannya pilihan yang berharga untuk membina aplikasi React yang mantap dan dapat dikekalkan, terutama dalam projek yang lebih besar dan lebih kompleks.

Bagaimana menggunakan TypeScript dalam aplikasi React?

Mula dengan menyediakan projek React baru dengan TypeScript. Anda boleh menggunakan alat seperti Create React App dengan templat TypeScript atau mengkonfigurasi secara manual TypeScript dalam projek React yang sedia ada.
Seterusnya, tulis komponen React anda menggunakan TypeScript. Anda boleh membuat komponen berfungsi dengan tandatangan fungsi TypeScript atau menggunakan kelas TypeScript untuk komponen kelas. TypeScript membolehkan anda menentukan jenis prop dan jenis negara, menyediakan pemeriksaan jenis yang kuat dan sokongan autokomplet dalam editor kod. Jika anda menggunakan perpustakaan atau pakej pihak ketiga dalam aplikasi React anda, pastikan anda memasang definisi jenis jenis untuk dependensi tersebut. Banyak perpustakaan yang popular mempunyai pengisytiharan jenis jenis yang diselenggarakan oleh komuniti yang tersedia pada pasti Tentunya

Apakah perbezaan antara react.js dan React Typescript? bahasa pengaturcaraan yang digunakan untuk pembangunan. Apabila menggunakan React.js, pemaju biasanya menulis aplikasi mereka di JavaScript biasa, sering memanfaatkan ciri -ciri JavaScript moden seperti ES6 dan ES7. Satu ciri penting react.js ialah ia tidak menguatkuasakan menaip ketat secara lalai. Akibatnya, pemaju bergantung pada pemeriksaan runtime dan alat seperti proptypes untuk pengesanan pengesahan dan kesilapan jenis. pembangunan. Dengan React Typescript, pemaju menulis komponen React mereka menggunakan sintaks TypeScript. Pendekatan ini menawarkan kelebihan yang ketara: pemeriksaan jenis statik semasa pembangunan. TypeScript memberi kuasa kepada pemaju untuk menentukan jenis dan antara muka untuk prop, negeri, dan data lain, yang boleh menangkap kesilapan yang berkaitan dengan jenis pada masa kompilasi daripada runtime. Ini membawa kepada kualiti kod yang lebih baik, kebolehprediksi kod yang dipertingkatkan, dan pengurangan dalam kesilapan runtime. Jenis keselamatan dan sokongan pembangunan. Pilihan antara React.js dan React Typescript bergantung kepada keperluan projek, keutamaan pemaju, dan kepentingan menaip statik untuk aplikasi tertentu. Kedua -dua pilihan adalah sah dan digunakan secara meluas dalam pembangunan aplikasi web dan antara muka pengguna.

harus saya mula bertindak balas dengan typescript?

Memulakan projek React dengan TypeScript atau JavaScript bergantung kepada pelbagai pertimbangan. perkakas pembangunan. Pemeriksaan jenis statik TypeScript membantu menangkap kesilapan pada masa kompilasi, yang membawa kepada kod yang lebih mantap dan boleh dipelihara. Jika anda bekerja pada projek yang cukup besar atau kompleks, TypeScript boleh memberi manfaat terutamanya dalam mencegah pepijat dan menjadikan asas kod lebih mudah untuk dikendalikan. TypeScript juga menyediakan dokumentasi kod yang dipertingkatkan melalui definisi jenis, yang dapat meningkatkan kebolehbacaan dan kerjasama kod dalam pasukan anda. JavaScript lebih ringan dan mempunyai keluk pembelajaran yang lebih pendek, menjadikannya lebih cepat untuk menubuhkan dan memulakan. Jika pasukan anda tidak mempunyai pengalaman dengan TypeScript atau jika keperluan projek tidak memerlukan menaip yang kuat, JavaScript mungkin pilihan pragmatik. Di samping itu, ekosistem JavaScript mempunyai koleksi perpustakaan dan sumber yang luas, menjadikannya lebih mudah untuk mencari penyelesaian dan sokongan untuk projek anda.

Atas ialah kandungan terperinci Bertindak balas dengan typescript: amalan terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!