diff --git a/packages/dnb-design-system-portal/src/docs/uilib/development.md b/packages/dnb-design-system-portal/src/docs/uilib/development.md
index 81dd195c58b..952d50c78ba 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/development.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/development.md
@@ -28,6 +28,7 @@ Many defaults are given by the linting and prettier configurations. But to keep
 - Use best practices for [CSS style structures](/uilib/usage/best-practices/for-styling#structure).
 - Use [nested CSS class selectors](https://medium.com/@andrew_barnes/bem-and-sass-a-perfect-match-5e48d9bc3894) with SASS (SCSS) and [BEM](http://getbem.com/naming/) (Block Element Modifier).
 - Use [React Hooks](https://reactjs.org/docs/hooks-overview.html) over React class components when possible.
+- Use [Typescript](https://www.typescriptlang.org), even most of the components do use PropTypes to generated type definition files only.
 
 ## Recommended Tools
 
diff --git a/packages/dnb-eufemia/babel.config.js b/packages/dnb-eufemia/babel.config.js
index 786e62d8cf4..2b6798e7329 100644
--- a/packages/dnb-eufemia/babel.config.js
+++ b/packages/dnb-eufemia/babel.config.js
@@ -6,7 +6,10 @@
 
 const presets =
   process.env.BABEL_ENV === 'es'
-    ? ['@babel/preset-react']
+    ? [
+        '@babel/preset-react',
+        ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+      ]
     : [
         [
           // Using .browserslistrc for the targets
@@ -18,6 +21,7 @@ const presets =
           },
         ],
         '@babel/preset-react',
+        ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
       ]
 
 // also for IE testing with Storybook}
@@ -119,6 +123,7 @@ const config = {
           },
         ],
         '@babel/preset-react',
+        ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
       ],
     },
   },
diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
index 3a85db237bd..6d507a49aa2 100644
--- a/packages/dnb-eufemia/package.json
+++ b/packages/dnb-eufemia/package.json
@@ -22,18 +22,18 @@
     "build": "yarn build:prebuild && yarn build:esm && yarn build:copy",
     "prebuild:ci": "yarn build",
     "postbuild:ci": "yarn build:types && yarn build:cjs && yarn build:es && yarn build:umd && yarn build:esm && yarn build:copy && yarn prettier:other && echo \"Can be enabled in future -> yarn build:resources\"",
-    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel ./src --extensions .cjs,.js --keep-file-extension --config-file ./babel.config.js --out-dir ./build/cjs --copy-files --no-copy-ignored --ignore 'src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel ./src --extensions .cjs,.js,.ts,.tsx --keep-file-extension --config-file ./babel.config.js --out-dir ./build/cjs --copy-files --no-copy-ignored --ignore 'src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
     "build:clean": "rm -rf build/**",
-    "build:component": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src/components/global-status --extensions .js --config-file ./babel.config.js --out-dir ./build/esm/components/global-status",
+    "build:component": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src/components/global-status --extensions .js,.ts,.tsx --config-file ./babel.config.js --out-dir ./build/esm/components/global-status",
     "build:copy": "./scripts/release/copy-build-artifacts.sh",
-    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --extensions .js --config-file ./babel.config.js --out-dir ./build/es --copy-files --no-copy-ignored --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --extensions .js --config-file ./babel.config.js --out-dir ./build/esm --copy-files --no-copy-ignored --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --extensions .js,.ts,.tsx --config-file ./babel.config.js --out-dir ./build/es --copy-files --no-copy-ignored --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
+    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --extensions .js,.ts,.tsx --config-file ./babel.config.js --out-dir ./build/esm --copy-files --no-copy-ignored --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.js,**/__tests__/**/*'",
     "prebuild:figma:ci": "yarn figma",
     "postbuild:figma:ci": "yarn test:update && yarn test:screenshots:update && babel-node ./scripts/figma/tasks/commitChanges",
     "build:pack": "yarn build && yarn publish:prepare && cd ./build && yarn pack",
     "build:prebuild": "babel-node ./scripts/prepub/runPrepub.js",
     "build:resources": "babel-node ./scripts/prepub/resources/makeResourcesPackage.js",
-    "build:shared": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src/shared --extensions .js --config-file ./babel.config.js --out-dir ./build/esm/shared --ignore '**/__tests__/**/*'",
+    "build:shared": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src/shared --extensions .js,.ts,.tsx --config-file ./babel.config.js --out-dir ./build/esm/shared --ignore '**/__tests__/**/*'",
     "build:types": "babel-node ./scripts/prepub/generateTypes.js && TEST_POST_TYPES=1 jest ./postTypeGeneration.test.js",
     "build:types:dev": "nodemon --exec 'babel-node ./scripts/prepub/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'",
     "build:umd": "cross-env NODE_ENV=production BABEL_ENV=umd rollup -c ./rollup.config.js",
@@ -125,6 +125,7 @@
     "@babel/plugin-transform-runtime": "7.15.0",
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
     "@babel/traverse": "7.15.4",
     "@mdx-js/mdx": "1.6.18",
     "@mdx-js/react": "1.6.18",
diff --git a/yarn.lock b/yarn.lock
index a09c0033241..e49585d1f9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1800,7 +1800,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.15.0":
+"@babel/preset-typescript@npm:7.15.0, @babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.15.0":
   version: 7.15.0
   resolution: "@babel/preset-typescript@npm:7.15.0"
   dependencies:
@@ -1935,6 +1935,7 @@ __metadata:
     "@babel/plugin-transform-runtime": 7.15.0
     "@babel/preset-env": 7.15.6
     "@babel/preset-react": 7.14.5
+    "@babel/preset-typescript": 7.15.0
     "@babel/runtime": 7.15.4
     "@babel/traverse": 7.15.4
     "@mdx-js/mdx": 1.6.18