TypeScript
The Good, The Bad & The Ugly
@sepehrity
February 2020
#iran_react
Our Story
@sepehrity
The Beginning
@sepehrity
CRA 2.1
@sepehrity
The Progress 🚀
@sepehrity
Let's Start...
Following Questions:
- Why Do We Need Types?
- What is TypeScript?
- Type System in JavaScript?
- Why TypeScript?
- When to use TypeScript?
@sepehrity
Type System In JavaScript
typeof x
- string
- number
- undefined
- boolean
- object
- function
- symbol
@sepehrity
Runtime type errors
- # is not a function
-
cannot read property # of null/undefined
@sepehrity
Weird Type Error
const getBar = () => {
const x = 'my string';
const y = x.foo;
return y.bar;
};
getBar();
// Cannot read property 'bar' of undefined@sepehrity
Weird Type Error
@sepehrity
Everything Is Okay!
const getColor = (person) => {
if (person.age > 18) {
return 'green';
} else {
return 'red';
}
};
getColor(90);
// 'red'@sepehrity
Everything Is Okay!
@sepehrity
@sepehrity
What Is TypeScript?
TypeScript is a typed superset of JavaScript that compiles
to plain JavaScript.
@sepehrity
Why Do We Need Types?
- finds bug
- code is self-documenting and
- runs ahead of time
- feel much safer making changes as a team
- enhanced autocompletion
@sepehrity
Let's see!
type States = {
loading: boolean;
users?: User[];
};
if (loading) return <Loading />
return (
<button onClick={handleClick}>show users</button>
)
@sepehrity
Hmm...
const handleClick = (event: React.MouseEvent<...>) => {
console.log(users.map(() => ...));
// Object is possibly 'null'
};
if (loading) return <Loading />
return (
<button onClick={handleClick}>show users</button>
)@sepehrity
What Should I Do?
if (loading) return <Loading />
return (
<UsersList users={users} />
)
const UsersList = ({ users }) => {
const handleClick = (
event: React.MouseEvent<...>
) => {
console.log(users.map(() => ...)); // never be null
};
return (
<button onClick={handleClick}>show users</button>
)
}@sepehrity
Why TypeScript?
@sepehrity
- Google Trends
- StackOverFlow (Third Love Language)
- Github Language Stats
Google Trends
@sepehrity
StackOverFlow (Third Love Language)
@sepehrity
Github Language Stats
@sepehrity
When To Use TypeScript?
@sepehrity
Types First, Codes Next
Codes First, Types Next
- complex data objects
- make libraries
- simple data objects
- implement UI
- you hate TypeScript
- medium codebase
- small codebase
- less runtime errors