Latest Tutorials

Some third-party libraries can be written in JavaScript. This is not a problem if a library has a declaration file . However, sometimes libraries don't have type declarations. In this case type to find them in DefinitelyTyped repository and install them . If DefinitelyTyped doesn't have type declarations for a library you can declare types yourself. First, in your tsconfig.json add a directory path to type declarations: Notice, that we add both "./node_modules/@types" and "./types" . The first one is the path to types of libraries that have types. The second one is your new directory. In your project's root create a directory called types/ . Inside, create a directory with third-party library name, for example types/thirdPartyLib/ . There, create an index.d.ts file. Then, open this file and declare types: This will make the error go away but you can add actual type declarations for a library:

When working with a package written in TypeScript, the TypeScript compiler derives types itself from the package's source. If, however, a package is written in JavaScript, it makes no sense to duplicate it and write a copy in TypeScript. Instead, a creator can use .d.ts files. Those files are called declaration files and provide typescript type information about APIs of a package. Let's say you write a component library SickComponents and want to expose some types under this namespace. In this case, you would write: In the case, of a library that exports functions or classes you can declare their type signatures as well: Live examples of .d.ts files you can find in DefinitelyTyped repo .

Create a new project directory and navigate there: Init this directory as an npm -package. It will allow you to install third-party packages such as React and TypeScript later: Install React, React-DOM and TypeScript: Install type definitions for React and React-DOM. They will allow TypeScript compiler to work with packages and figure out the types that can and cannot be used with If you use some other packages you will need to install types for those packages too. The DefinitelyTyped repository contains the biggest amount of type declarations for npm packages. You can find the types for your package there and install them. Generate a tsconfig.json file using npx package runner: This file is used as settings for TypeScript compiler and tells it how to interpret the code. After it's done, open this file and add the following option: This will allow a compiler to work with JSX components as React components. Webpack is a static module bundler for modern JavaScript applications. It takes care of compiling, bundling and minifying the code for you. Install webpack , its command line interface, and html-webpack-plugin : The latter is used to deal with the html -entrypoint so that we will be able to run our application in a browser. The ts-loader package is a loader for webpack that knows how to work with TypeScript files. Webpack itself doesn't know that. Then, create a webpack.config.js file. Create an entry point file src/index.tsx : Create a first component src/components/App/index.tsx : Add a template src/index.html file: Install the webpack-dev-server package : This package is used to run application while developing. Also, it will reload the application when source code is changed. Set up development server in your webpack.config.js : In your package.json file, update scripts section with these scripts: The build script will build your application in a production mode which creates an optimized production build. And the dev script will set up a development server on localhost for you to develop the application. If you now run npm run dev and open http://localhost:9000/ you will see a running app.

Create a new file with a component name, for example, Counter.tsx . Inside, create a class component as you would in plain React: Then, create a CounterProps type to define props that the component will accept and a CounterState type to type the state of a component if it has one. The CounterProps type is used to declare what type the properties of this component support. This is similar to declaring types with prop-types but without any additional packages and the result of type checking is available at design time. You won't need to run the project to figure out that some types are not correctly passed. The same with the CounterState type—it will check the state types at the pre-compile time, so you will know earlier if there is an error. You don't have to annotate CounterState the second time inside of a component itself, but it allows better type inference when accessing this.state . Notice the React.Component<CounterProps, CounterState> T type. This is the generic React.Component type. It takes two type-parameters that tell TypeScript how to interpret types of component props and state, so TypeScript can derive types of each field in props and the state. There is no need to mark types fields readonly since React.Component<P,S> already marks them as immutable. If your component doesn't need any state you can declare it without a state at all: Class Methods on a component are useful when you have to perform some action and want to extract its logic in a function. (In the example below, we log into a console the counter values.) You can define class methods as usual except for typing all of the arguments and return values: Class properties are useful for storing some data that should not affect re-render of a component. In the example below, it is a helloMessage that changes when a component is mounted. Its update won't trigger re-rendering. You can define class properties like plain TypeScript class properties with their type declarations:

If you already have an app built with create-react-app , you can add TypeScript by installing it and type definitions for all the installed packages: Or if you use yarn : This command will add TypeScript to your project and provide type definitions for react , react-dom and jest —packages used in Create React App. If you have some other packages in your project, let's say enzyme you want to add types for those package too. The DefinitelyTyped repository contains the biggest amount of type declarations for npm packages. You can find the types for your package there and install them. Next, rename each component file to be a TypeScript file. For example: This will allow TypeScript compiler to work with those files. It is important to use .tsx extension for React-components in TypeScript to work properly. Now you can start the development server by running.