Pada 2016, TypeScript mulai mengambil ketinggian baru. Pengembang mulai sepenuhnya menulis ulang banyak teknologi populer di atasnya dan menambahkan dukungan untuk analisis statis ke platform yang ada. Proses global semacam itu menambah stabilitas pada basis kode ribuan, dan bahkan puluhan ribu proyek.
Mengapa Bereaksi Sampai hari ini, perpustakaan ini tidak diragukan lagi mendominasi dengan latar belakang para pesaing. Sekitar Bereaksi, komunitas pengembang terbesar di dunia telah terbentuk. Setiap SPA ketiga ditulis di platform ini. Ada juga banyak
proyek hebat yang terkait dengan menggunakan React Native, sebuah platform untuk aplikasi iOS, UWP dan Android berdasarkan React.js.
Oleh karena itu, hari ini kita akan melihat kemungkinan bahwa integrasi dua alat super populer memberikan: TypeScript dan Bereaksi.
Contohnya
Pertama, mari kita lihat tipe apa yang bisa kita gunakan untuk Bereaksi.
Mari kita mulai dari yang sederhana dan menambahkan tipe ke Komponen Fungsional.
import * as React from 'react'; const HelloWorld: React.FunctionComponent<{ name: string; }> = ({ name = 'World' }) => { return <div>Hello, {props.name}</div>; }; export default HelloWorld;
Untuk Komponen Fungsional atau Komponen Statless, kita harus menggunakan definisi tipe React.FunctionComponent. Kita juga bisa mendefinisikan tipe untuk argumen alat peraga - bidang yang dilewati komponen ke komponen. Dalam hal ini, alat peraga hanya bisa berisi bidang nama tipe string.
Semua ini tidak terlihat rumit. Bagaimana dengan komponen kelas?
import * as React from 'react'; interface State { name: string; } interface Props {} class HelloWorld extends React.Component<Props, State> { state = { name: 'World' } setName(name: string) { this.setState({ name }); } redner() { return ( <React.Fragment> <hI>Hello, {this.state.name}</hI> <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} /> </React.Fragment> ); } }
Dalam contoh kelas, kami membuat dua antarmuka: Props dan Negara. Dengan bantuan mereka, kami menentukan tanda tangan props yang masuk (kosong) dan tanda tangan status komponen - seperti dalam contoh dengan Komponen Fungsional.
Kami juga dapat menambahkan nilai alat peraga default.
import * as React from 'react'; interface Props { name?: string; } export default class HelloWorld extends React.Component<Props> { static defaultProps: Props = { name: 'World' }; render () { return <hI>Hello, {this.props.name}</hI>; } }
Itu saja! Aplikasi Bereaksi kecil kami sudah sangat diketik di tingkat parameter dan nilai status komponen.
Mari kita lihat keuntungan yang diberikan kepada kami:
- pada tahap kompilasi kita akan melihat semua tipe mismatch;
- editor yang dikonfigurasi dengan benar akan membantu kita menghindari kesalahan bahkan pada tahap pengembangan dengan hanya menyoroti perbedaan tanda tangan atau tipe data;
- Dokumentasi dari antarmuka dan definisi tipe.
Enum dalam parameter
Enum adalah tipe data yang disebutkan. Jika kita menambahkan tipe ini ke bidang variabel atau antarmuka, maka nilai bidang ini atau variabel hanya bisa nilai spesifik di Enum.
Sebagai contoh.
import * as React from 'react'; enum Colors { RED, BLUE, GREEN } const ColorResult: React.FunctionComponent<{ color: Colors; }> = ({ color = Colors.Red }) => { return <div>Your color is {props.color}</div>; }; export default ColorResult;
Dalam Komponen Fungsional yang sudah kita ketahui, kami ingin menunjukkan warna yang dipilih oleh pengguna. Dalam jenis Warna enum, kami menentukan semua opsi warna yang mungkin yang dapat dikirim ke komponen. Jika kompiler TypeScript melihat ketidakcocokan jenis di suatu tempat, ia akan menunjukkan ini kepada Anda dengan kesalahan.
Redux yang ketat
Pada 2019, kami masih memiliki banyak aplikasi yang berjalan di Redux. TypeScript dapat membantu dalam situasi ini.
import * as React from 'react'; const initialState = { name: 'World' }; type HelloWorldStateProps = Readonly<typeof initialState>; interface Action { type: string; name?: string; } const worldNameReducer = ( state: HelloWorldStateProps = initialState, action: Action ): HelloWorldStateProps => { switch (action.type) { case "SET": return { name: action.name }; case "CLEAR": return { name: initialState.name }; default: return state; } }; const set = (name): Action => ({ type: "SET", name }); const clear = (): Action => ({ type: "CLEAR" }); const store = createStore( combineReducers({ world: worldNameReducer }) ); type StateProps = ReturnType<typeof mapStateToProps>; type DispatchProps = typeof mapDispatchToProps; interface AppProps extends StateProps, DispatchProps {} interface AppState extends StateProps {} class App extends React.Component<AppProps, AppState> { state = { name: initialState.name } setName(name: string) { this.setState({ name }); } render() { const { set, clear, name } = this.props; return ( <div> <hI>Hello, {name}</hI> <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} /> <button onClick={() => set(this.state.name)}>Save Name</button> <button onClick={() => clear()}>Clear</button> </div> ); } } const mapStateToProps = ({ world }: { world: HelloWorldStateProps }) => ({ name: world.name, }); const mapDispatchToProps = { set, clear }; const AppContainer = connect( mapStateToProps, mapDispatchToProps )(App); render( <Provider store={store}> <AppContainer /> </Provider>, document.getElementById("root") );
Dalam contoh ini, kami menambahkan jenis ke aplikasi sekaligus di beberapa tingkatan. Pertama-tama, itu adalah reduksi itu sendiri. Peredam input menerima Action, dan itu harus selalu mengembalikan objek yang cocok dengan tipe HelloWorldStateProps. Mengingat berapa banyak reduksi yang ada dalam aplikasi modern, ini adalah inovasi yang sangat berguna. Selain itu, setiap tindakan yang kami miliki memiliki tanda tangan Tindakan yang ketat.
Tingkat pengetikan selanjutnya adalah komponen. Di sini kami telah menerapkan pewarisan jenis ke AppProps dan AppState. Mengapa menulis lebih banyak ketika kita sudah memiliki tipe data dengan tanda tangan seperti itu? Lebih mudah untuk memelihara sistem. Jika Anda mengubah beberapa elemen, perubahan akan terjadi untuk semua ahli waris.
Kesimpulan
TypeScript adalah bahasa yang sangat berguna yang berjalan di atas JavaScript. Sehubungan dengan React, ia menyediakan praktik pemrograman yang benar-benar mengesankan untuk aplikasi Frontend.