Typescript improves Javascript in specific areas. Team collaboration is easier, the code is more robust and the IDE can catch errors before run-time. This improves code-review and developer productivity. Typescript gets transpiled to Javascript at build time, as the browser only understands Javascript.
Progressive adoption
Your existing Javascript codebase works in Typescript because any Javascript code is valid Typescript. Typescript is just an extension of JS, not a different language.
Robust code, better collaboration
The type system is a way to specify what kind of data we want to work with. By being more explicit, we remove confusion or potential misunderstandings. It makes collaboration easier and more productive.
The IDE is more powerful
The IDE is able to spot inconsistencies before code execution. It can give you better autocompletion. Some errors can be detected at compile time instead of at runtime.
Get started
Use Typescript in the REPL (Shell)
npm install -g typescript
npm install -g ts-node
ts-node
Create a React project using Typescript
npx create-react-app project33 --template typescript
Typing
You ensure a function is called with correct arguments by specifying the type of each argument.
Let's stay you created a function whose goal is to submit the card details to Stripe. Your colleague intends to use that function, but doesn't know what data to submit. In Javascript, you cannot specify types, so your function definition would be like this:
function submitCardToStripe(cardNumber,expirationDate,controlCode){
// implementation
}
Unfortunately, the function caller has no idea if the cardNumber should be a number or a string. Both could make sense. With Typescript, you can indicate that each argument should be strings:
function submitCardToStripe(cardNumber:string, expirationDate:string, controlCode:string){
// implementation
}
Specifying types on the function parameters allows your colleague to understand what argument he must provide. Furthermore, he will get a detailed error in case he doesn't provide the required arguments.
Custom Type
We may encapsulate the concept of a Card in a custom type, called an interface :
interface Card{
cardNumber:string;
expirationDate:string;
controlCode:string;
}
The function now requires a single Card object:
function submitCardToStripe(card:Card){
const {carNumber,expirationData,controlCode} = card
..
}
Typed Constants
Instead of raw string constants, we define typed constants in an enum
enum Day{
monday = "MONDAY",
tuesday = "TUESDAY",
wednesday,
}
Use a typed constant instead of a raw string
function selectDay(day:Day){}
selectDay(Day.Monday) // better
selectDay("Monday") // worse