diff --git a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.jsx b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx
similarity index 73%
rename from superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.jsx
rename to superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx
index f9e6f79e804e8..797c7504282ea 100644
--- a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.jsx
+++ b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 import TableView from 'src/components/TableView';
@@ -26,24 +25,28 @@ import Loading from 'src/components/Loading';
 import ModalTrigger from 'src/components/ModalTrigger';
 import { EmptyWrapperType } from 'src/components/TableView/TableView';
 
-const propTypes = {
-  dbId: PropTypes.number.isRequired,
-  schema: PropTypes.string.isRequired,
-  sql: PropTypes.string.isRequired,
-  getEstimate: PropTypes.func.isRequired,
-  queryCostEstimate: PropTypes.Object,
-  selectedText: PropTypes.string,
-  tooltip: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-const defaultProps = {
-  queryCostEstimate: [],
-  tooltip: '',
-  disabled: false,
-};
+interface EstimateQueryCostButtonProps {
+  dbId: number;
+  schema: string;
+  sql: string;
+  getEstimate: Function;
+  queryCostEstimate: Record<string, any>;
+  selectedText?: string;
+  tooltip?: string;
+  disabled?: boolean;
+}
 
-const EstimateQueryCostButton = props => {
-  const { cost } = props.queryCostEstimate;
+const EstimateQueryCostButton = ({
+  dbId,
+  schema,
+  sql,
+  getEstimate,
+  queryCostEstimate = {},
+  selectedText,
+  tooltip = '',
+  disabled = false,
+}: EstimateQueryCostButtonProps) => {
+  const { cost } = queryCostEstimate;
   const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
   const columns = useMemo(
     () =>
@@ -53,21 +56,23 @@ const EstimateQueryCostButton = props => {
     [cost],
   );
 
-  const onClick = () => {
-    props.getEstimate();
+  // A call back method to pass an event handler function as a prop to the Button element.
+  // Refer: https://reactjs.org/docs/handling-events.html
+  const onClickHandler = () => {
+    getEstimate();
   };
 
   const renderModalBody = () => {
-    if (props.queryCostEstimate.error !== null) {
+    if (queryCostEstimate.error !== null) {
       return (
         <Alert
           key="query-estimate-error"
           type="error"
-          message={props.queryCostEstimate.error}
+          message={queryCostEstimate.error}
         />
       );
     }
-    if (props.queryCostEstimate.completed) {
+    if (queryCostEstimate.completed) {
       return (
         <TableView
           columns={columns}
@@ -81,7 +86,6 @@ const EstimateQueryCostButton = props => {
     return <Loading position="normal" />;
   };
 
-  const { disabled, selectedText, tooltip } = props;
   const btnText = selectedText
     ? t('Estimate selected query cost')
     : t('Estimate cost');
@@ -93,7 +97,7 @@ const EstimateQueryCostButton = props => {
         triggerNode={
           <Button
             style={{ height: 32, padding: '4px 15px' }}
-            onClick={onClick}
+            onClick={onClickHandler}
             key="query-estimate-btn"
             tooltip={tooltip}
             disabled={disabled}
@@ -106,7 +110,4 @@ const EstimateQueryCostButton = props => {
   );
 };
 
-EstimateQueryCostButton.propTypes = propTypes;
-EstimateQueryCostButton.defaultProps = defaultProps;
-
 export default EstimateQueryCostButton;