Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TS + React: Small guide📖

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Abner Soares Alves Junior Abner Soares Alves Junior
September 27, 2018
Programming
0
27

TS + React: Small guide📖

A Small Guide to use TypeScript with React.

Avatar for Abner Soares Alves Junior

Abner Soares Alves Junior

September 27, 2018
Tweet

More Decks by Abner Soares Alves Junior

See All by Abner Soares Alves Junior
Serverless Architecture: não significa "sem servidores"
Avatar for Abner Soares Alves Junior abnersajr
0
54
Refinando suas interfaces com animações
Avatar for Abner Soares Alves Junior abnersajr
1
470

Other Decks in Programming

See All in Programming
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
150
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
Oxlint JS plugins
Avatar for kazupon kazupon
1
740
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
170
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
110
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2k
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
180

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
270
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
580
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
2
210

Transcript

  1. TS + React: Small guide

  2. Sup Bro! I am Abner S. Alves Jr Developer at

    Codeminer42 2

  3. 3 Type Safety

  4. 4 Weakly Typed Strongly Typed

  5. 5 Typing JavaScript

  6. 6 Flow Stats || https://github.com/facebook/flow

  7. 7 TypeScript Stats || https://github.com/Microsoft/TypeScript

  8. 8 TypeScript What is TS?

  9. What is TS? • Typed superset of JavaScript • Compiles

    to plain JavaScript • Open Source • Developed by Microsoft 9

  10. 10 Key Features

  11. Key Features 11 Data Types Interfaces Modules Generics

  12. Why use it 12 Tooling and Community Team and code

    scalability Strict Null Checking Help avoiding issues in runtime

  13. Common Issues 13

  14. 14 Invalid value to an object key

  15. Read invalid object key 15

  16. How to start 16

  17. 17 Installing react and react types npm install --save react

    react-dom @types/react @types/react-dom

  18. 18 Installing TS and TS loader npm install --save-dev typescript

    awesome-typescript-loader source-map-loader

  19. 19 Configure your webpack: http://bit.ly/react-webpack-ts

  20. 20 Configure your tsconfig.json: http://bit.ly/tsconfig-react

  21. Using on React 21

  22. 22 React Class with TS

  23. 23 React SFC with TS

  24. Useful Links 24 https://basarat.gitbooks.io/typescript/content/ https://github.com/Microsoft/TypeScript-React-Starter http://www.typescriptlang.org/play/ https://github.com/DefinitelyTyped/DefinitelyTyped

  25. Estamos em busca de novos colegas: [email protected]

  26. Thanks! Any questions? @abnersajr speackerdeck.com/abnersajr [email protected] 26