DEV Community

Yuqing Ma
Yuqing Ma

Posted on

How to use Typescript Package in Javascript React?

Introduction:
With the popularity of typescript, more newly developed npm package uses Typescript and the existed project mainly uses Javascript as the development language. It is important to add typescript for an existing React App project.
Setup:
Install typescript:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Created a file with js extension.
Warning: It will cause error if you directly use ts extension.

Here is a demo code from re_point/react-page-slides
`
import React from 'react';
import {ISlideConfig, PageSlides, SlideParallaxType} from '@re_point/react-page-slides';

export const MainPage = () => {

const slides: ISlideConfig[] = [

{

content:

first page content,

style: {

backgroundImage: 'url("public/photo/photo_1.jpg")'

}

},

{

content: second page content,

style: {

backgroundImage: 'url("public/photo/photo_2.jpg")'

}

},

{

content: third page content,

style: {

backgroundImage: 'url("public/photo/photo_2.jpg")'

}

},

];

return (
        enableAutoScroll={true}<br>
        transitionSpeed={1000}<br>
        slides={slides}<br>
        parallax={{<br>
            offset: 0.6,<br>
            type: SlideParallaxType.reveal<br>
        }}<br>
    /&gt;<br>
)<br>
Enter fullscreen mode Exit fullscreen mode

};

`Change export const MainPage = () to const MainPage =()

add export default MainPage at the end

Top comments (0)