diff --git a/babel.config.js b/babel.config.js
index 6e0df7daa870a5..05dba919c30bd1 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -40,7 +40,7 @@ const productionPlugins = [
 ];
 
 module.exports = {
-  presets: defaultPresets.concat(['@babel/preset-react']),
+  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
   plugins: [
     'babel-plugin-optimize-clsx',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
diff --git a/docs/next.config.js b/docs/next.config.js
index ecfffd9b7ae6de..a2445799b4630b 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -121,7 +121,7 @@ module.exports = {
           },
           // required to transpile ../packages/
           {
-            test: /\.(js|mjs|jsx)$/,
+            test: /\.(js|mjs|jsx|ts)$/,
             include: [workspaceRoot],
             exclude: /node_modules/,
             use: options.defaultLoaders.babel,
diff --git a/docs/pages/api-docs/table-pagination.md b/docs/pages/api-docs/table-pagination.md
index 218f8bdab924bc..9af3624514d973 100644
--- a/docs/pages/api-docs/table-pagination.md
+++ b/docs/pages/api-docs/table-pagination.md
@@ -35,7 +35,7 @@ The `MuiTablePagination` name can be used for providing [default props](/customi
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1. |
 | <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`</span> | Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
+| <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">string</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
 | <span class="prop-name">nextIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Next page'</span> | Text label for the next arrow icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name required">onChangePage&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js
index f25acc35103ef8..fdfe2cc131d421 100644
--- a/docs/webpackBaseConfig.js
+++ b/docs/webpackBaseConfig.js
@@ -16,6 +16,7 @@ module.exports = {
       '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
       docs: path.resolve(__dirname, '../docs'),
     },
+    extensions: ['.js', '.ts'],
   },
   output: {
     path: path.join(__dirname, 'build'),
@@ -25,7 +26,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         query: {
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 489d9edef972fe..ed69db348f9086 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -25,16 +25,17 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:umd && yarn build:copy-files",
-    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"**/*.test.js\"",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --out-dir ./build/esm --ignore \"**/*.test.js\"",
-    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"**/*.test.js\"",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:umd && yarn build:copy-files && yarn build:types",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build --ignore \"**/*.test.js,**/*.d.ts\"",
+    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build/esm --ignore \"**/*.test.js,**/*.d.ts\"",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js --extensions \".js,.ts\" ./src --out-dir ./build/es --ignore \"**/*.test.js,**/*.d.ts\"",
     "build:umd": "cross-env BABEL_ENV=production-umd rollup -c scripts/rollup.config.js",
     "build:copy-files": "node ../../scripts/copy-files.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "prebuild": "rimraf build",
     "release": "yarn build && npm publish build --tag latest",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui/**/*.test.js' --exclude '**/node_modules/**'",
-    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{ts,tsx}\" && tsc -p tsconfig.test.json"
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.test.json && tsc -p tsconfig.build.json"
   },
   "peerDependencies": {
     "@types/react": "^16.8.6",
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts
index bc7884365c2c32..8e6309ee958db5 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts
@@ -3,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
   props: P & {
+    expandText?: string;
     itemsAfterCollapse?: number;
     itemsBeforeCollapse?: number;
     maxItems?: number;
diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts
index 3f9f604dc2dfc9..570f7206fc1d12 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.d.ts
+++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts
@@ -17,11 +17,13 @@ export interface TablePaginationTypeMap<P, D extends React.ElementType> {
   props: P &
     TablePaginationBaseProps & {
       ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
+      backIconButtonText?: string;
       backIconButtonProps?: Partial<IconButtonProps>;
       count: number;
       labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
-      labelRowsPerPage?: React.ReactNode;
+      labelRowsPerPage?: string;
       nextIconButtonProps?: Partial<IconButtonProps>;
+      nextIconButtonText?: string;
       onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
       onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
       page: number;
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
index d47e25a318e44e..9baf855adf1a91 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -218,7 +218,7 @@ TablePagination.propTypes = {
    *
    * For localization purposes, you can use the provided [translations](/guides/localization/).
    */
-  labelRowsPerPage: PropTypes.node,
+  labelRowsPerPage: PropTypes.string,
   /**
    * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.
    */
diff --git a/packages/material-ui/src/locale/index.d.ts b/packages/material-ui/src/locale/index.d.ts
deleted file mode 100644
index 10a8b356dfe30e..00000000000000
--- a/packages/material-ui/src/locale/index.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const azAZ: object;
-export const bgBG: object;
-export const caES: object;
-export const csCZ: object;
-export const deDE: object;
-export const enUS: object;
-export const esES: object;
-export const etEE: object;
-export const faIR: object;
-export const fiFI: object;
-export const frFR: object;
-export const heIL: object;
-export const huHU: object;
-export const hyAM: object;
-export const idID: object;
-export const isIS: object;
-export const itIT: object;
-export const jaJP: object;
-export const koKR: object;
-export const nlNL: object;
-export const plPL: object;
-export const ptBR: object;
-export const ptPT: object;
-export const roRO: object;
-export const ruRU: object;
-export const skSK: object;
-export const svSE: object;
-export const trTR: object;
-export const ukUA: object;
-export const viVN: object;
-export const zhCN: object;
diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.ts
similarity index 95%
rename from packages/material-ui/src/locale/index.js
rename to packages/material-ui/src/locale/index.ts
index e94279f8b3ddfd..dccba9fa90d4b7 100644
--- a/packages/material-ui/src/locale/index.js
+++ b/packages/material-ui/src/locale/index.ts
@@ -1,4 +1,35 @@
-export const azAZ = {
+import type { ComponentsPropsList } from '../styles/props';
+
+export interface Localization {
+  props?: {
+    MuiBreadcrumbs?: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+    MuiTablePagination?: Pick<
+      ComponentsPropsList['MuiTablePagination'],
+      'backIconButtonText' | 'labelRowsPerPage' | 'labelDisplayedRows' | 'nextIconButtonText'
+    >;
+    // @material-ui/lab components need to be inlined
+    MuiRating?: {
+      emptyLabelText?: string;
+      getLabelText?: (value: number) => string;
+    };
+    MuiAutocomplete?: {
+      clearText?: string;
+      closeText?: string;
+      loadingText?: string;
+      noOptionsText?: string;
+      openText?: string;
+    };
+    MuiAlert?: {
+      closeText?: string;
+    };
+    MuiPagination?: {
+      'aria-label'?: string;
+      getItemAriaLabel?: (type: string, page: number, selected: boolean) => string | undefined;
+    };
+  };
+}
+
+export const azAZ: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Yolu göstər',
@@ -56,7 +87,7 @@ export const azAZ = {
   },
 };
 
-export const bgBG = {
+export const bgBG: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Показване на пътя',
@@ -105,7 +136,7 @@ export const bgBG = {
   },
 };
 
-export const caES = {
+export const caES: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -154,7 +185,7 @@ export const caES = {
   },
 };
 
-export const csCZ = {
+export const csCZ: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Ukázat cestu',
@@ -211,7 +242,7 @@ export const csCZ = {
   },
 };
 
-export const deDE = {
+export const deDE: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Pfad anzeigen',
@@ -261,8 +292,8 @@ export const deDE = {
 };
 
 // default
-export const enUS = {
-  /**
+export const enUS: Localization = {
+  /*
   props: {
     MuiBreadcrumbs: {
       expandText: 'Show path',
@@ -312,7 +343,7 @@ export const enUS = {
 */
 };
 
-export const esES = {
+export const esES: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -361,7 +392,7 @@ export const esES = {
   },
 };
 
-export const etEE = {
+export const etEE: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Näita teed',
@@ -410,7 +441,7 @@ export const etEE = {
   },
 };
 
-export const faIR = {
+export const faIR: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -465,7 +496,7 @@ export const faIR = {
   },
 };
 
-export const fiFI = {
+export const fiFI: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -514,7 +545,7 @@ export const fiFI = {
   },
 };
 
-export const frFR = {
+export const frFR: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Montrer le chemin',
@@ -563,7 +594,7 @@ export const frFR = {
   },
 };
 
-export const heIL = {
+export const heIL: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -613,7 +644,7 @@ export const heIL = {
   },
 };
 
-export const huHU = {
+export const huHU: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Útvonal',
@@ -662,7 +693,7 @@ export const huHU = {
   },
 };
 
-export const hyAM = {
+export const hyAM: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -711,7 +742,7 @@ export const hyAM = {
   },
 };
 
-export const idID = {
+export const idID: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -761,7 +792,7 @@ export const idID = {
   },
 };
 
-export const isIS = {
+export const isIS: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -810,7 +841,7 @@ export const isIS = {
   },
 };
 
-export const itIT = {
+export const itIT: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Visualizza percorso',
@@ -859,7 +890,7 @@ export const itIT = {
   },
 };
 
-export const jaJP = {
+export const jaJP: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -908,7 +939,7 @@ export const jaJP = {
   },
 };
 
-export const koKR = {
+export const koKR: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -933,7 +964,7 @@ export const koKR = {
   },
 };
 
-export const nlNL = {
+export const nlNL: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -982,7 +1013,7 @@ export const nlNL = {
   },
 };
 
-export const plPL = {
+export const plPL: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Pokaż ścieżkę',
@@ -1042,7 +1073,7 @@ export const plPL = {
   },
 };
 
-export const ptBR = {
+export const ptBR: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1091,7 +1122,7 @@ export const ptBR = {
   },
 };
 
-export const ptPT = {
+export const ptPT: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Mostrar caminho',
@@ -1140,7 +1171,7 @@ export const ptPT = {
   },
 };
 
-export const roRO = {
+export const roRO: Localization = {
   props: {
     MuiBreadcrumbs: {
       expandText: 'Arată calea',
@@ -1189,7 +1220,7 @@ export const roRO = {
   },
 };
 
-export const ruRU = {
+export const ruRU: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1249,7 +1280,7 @@ export const ruRU = {
   },
 };
 
-export const skSK = {
+export const skSK: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1306,7 +1337,7 @@ export const skSK = {
   },
 };
 
-export const svSE = {
+export const svSE: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1355,7 +1386,7 @@ export const svSE = {
   },
 };
 
-export const trTR = {
+export const trTR: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1405,7 +1436,7 @@ export const trTR = {
   },
 };
 
-export const ukUA = {
+export const ukUA: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1465,7 +1496,7 @@ export const ukUA = {
   },
 };
 
-export const viVN = {
+export const viVN: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
@@ -1515,7 +1546,7 @@ export const viVN = {
   },
 };
 
-export const zhCN = {
+export const zhCN: Localization = {
   props: {
     // MuiBreadcrumbs: {
     //   expandText: 'Show path',
diff --git a/packages/material-ui/tsconfig.build.json b/packages/material-ui/tsconfig.build.json
new file mode 100644
index 00000000000000..5d9f9a7f63c3ba
--- /dev/null
+++ b/packages/material-ui/tsconfig.build.json
@@ -0,0 +1,15 @@
+{
+  // This config is for emitting declarations (.d.ts) only
+  // Actual .ts source files are transpiled via babel
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src",
+    "types": ["react"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}