Note that if you are using module resolution such as
import/exportfor the browser, you will still need to use a bundler for the browser like Webpack, Rollup, or SystemJS.
First install TypeScript using either npm:
npm install -g typescript
yarn global add typescript
Once installed globally, you will have the
tsc command available in your terminal.
Using your terminal, create a new directory called
ts-simple with the following command:
cd into this directory and create an
index.ts file. Inside this file, we will create a function called
sayHello with an argument
name which is of type
tsc to compile your
This creates an
index.js which has removed the typing from the
To test this out, run the newly created file using the following command:
// "Hello, gitconnected!"
One of the benefits of TypeScript is that it can catch bugs in your code automatically if types don’t match. For example, imagine in the example above, we want to call the
.trim() function on the string we pass in. If we pass in a variable of any other type, it could result in our code throwing an error in production instead of catching it before. Let’s take a look at our updated example by incorrectly passing an array to the function:
This would result in the following TypeScript error when we run
If we didn’t have TypeScript protecting us and allowing us to fix the error before we shipped the code to production, then our users may have experienced the following bug when visited our website.
In addition to
.ts files, you can also use
.d.ts files to add types to pre-existing JavasScript libraries, or
.tsx files for writing JSX syntax in TypeScript for React applications.
- Catch bugs while coding instead of in production. Types allow us to recognize issues before they go wrong.
- Intellisense and code completion. TypeScript is supported by most major IDE’s and text editors including VS Code and Atom. They offer powerful TypeScript integrations which complete code automatically, indicate function arguments without needing to look at the source, and provide inline error recognition.
- Improved code readability. The structure provided by TS makes it much easier to reason about new code when you have strongly typed variables, functions, and objects. It removes much of the guessing game about what shape the data will take.
- Optional static typing. TypeScript doesn’t require everything be statically typed, so you can incrementally convert a project.
- Great ecosystem. TypeScript has been around since 2012 and this time has allowed for it to develop a strong ecosystem. Many open source packages provide TypeScript types natively, making integration even easier.
- Increase career opportunities. TypeScript is rapidly trending upwards in adoption, and it has been integrated by many large tech companies including Google and Microsoft. By understanding TypeScript, you increase your marketability when searching for a job.
- Bonus: No need for
PropTypeswhen using TypeScript with React. If you use TypeScript, you no longer need to manage PropTypes for React, allowing you to catch errors sooner and have a tighter coupling of props with the types used in your code.
- Higher upfront cost to write new code. By requiring more code, it can slow down the development velocity of new features which may not be an ideal trade-off for every company/startup.
- Another library to stay up to date with. If you want to stay current with TS, it will require some refactoring as new versions come out.
- Complex types can be tricky to figure out. If you are integrating TypeScript into an existing code base, you may run into trouble getting everything typed correctly and handling complex data structures that “just worked” when it was only JS.
- You still need a bundler (ie. Webpack, SystemJS, etc.) for some syntax such as
exportfor ES2015 modules.
Are you interested in using TypeScript with React? Check out this article >