diff --git a/bin/api-docs/update-api-docs.js b/bin/api-docs/update-api-docs.js
index c1643d2f632f9..3ee55ff0c3d81 100755
--- a/bin/api-docs/update-api-docs.js
+++ b/bin/api-docs/update-api-docs.js
@@ -43,13 +43,6 @@ const DATA_DOCS_DIR = resolve(
 	'docs/designers-developers/developers/data'
 );
 
-/**
- * Default path to use if the token doesn't include one.
- *
- * @see TOKEN_PATTERN
- */
-const DEFAULT_PATH = 'src/index.js';
-
 /**
  * Pattern matching start token of a README file.
  *
@@ -64,7 +57,6 @@ const DEFAULT_PATH = 'src/index.js';
  * <!-- END TOKEN(Autogenerated actions|src/actions.js) -->
  *
  * @type {RegExp}
- * @see DEFAULT_PATH
  */
 const TOKEN_PATTERN = /<!-- START TOKEN\((.+?(?:\|(.+?))?)\) -->/g;
 
@@ -169,7 +161,7 @@ const filterTokenTransform = new Transform( {
 			const tokens = [];
 
 			for ( const match of content.matchAll( TOKEN_PATTERN ) ) {
-				const [ , token, path = DEFAULT_PATH ] = match;
+				const [ , token, path ] = match;
 				tokens.push( [ token, path ] );
 			}
 
@@ -182,6 +174,23 @@ const filterTokenTransform = new Transform( {
 	},
 } );
 
+/**
+ * Find default source file (`src/index.{js,ts,tsx}`) in a specified package directory
+ *
+ * @param {string} dir Package directory to search in
+ * @return {string} Name of matching file
+ */
+function findDefaultSourcePath( dir ) {
+	const defaultPathMatches = glob.sync( 'src/index.{js,ts,tsx}', {
+		cwd: dir,
+	} );
+	if ( ! defaultPathMatches.length ) {
+		throw new Error( `Cannot find default source file in ${ dir }` );
+	}
+	// @ts-ignore
+	return defaultPathMatches[ 0 ];
+}
+
 /**
  * Optional process arguments for which to generate documentation.
  *
@@ -202,8 +211,11 @@ glob.stream( [
 		// represented by tokens. The docgen script updates one token at a time,
 		// so the tokens must be replaced in sequence to prevent the processes
 		// from overriding each other.
-		for ( const [ token, path ] of tokens ) {
-			try {
+		try {
+			for ( const [
+				token,
+				path = findDefaultSourcePath( dirname( file ) ),
+			] of tokens ) {
 				await execa(
 					`"${ join(
 						__dirname,
@@ -222,9 +234,9 @@ glob.stream( [
 					],
 					{ shell: true }
 				);
-			} catch ( error ) {
-				console.error( error );
-				process.exit( 1 );
 			}
+		} catch ( error ) {
+			console.error( error );
+			process.exit( 1 );
 		}
 	} );
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index 3a4da5520f42b..b9c7e96f21d7b 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -139,7 +139,10 @@ async function buildJS( file ) {
 	for ( const [ environment, buildDir ] of Object.entries(
 		JS_ENVIRONMENTS
 	) ) {
-		const destPath = getBuildPath( file, buildDir );
+		const destPath = getBuildPath(
+			file.replace( /\.tsx?$/, '.js' ),
+			buildDir
+		);
 		const babelOptions = getBabelConfig(
 			environment,
 			file.replace( PACKAGES_DIR, '@wordpress' )
@@ -171,6 +174,8 @@ async function buildJS( file ) {
 const BUILD_TASK_BY_EXTENSION = {
 	'.scss': buildCSS,
 	'.js': buildJS,
+	'.ts': buildJS,
+	'.tsx': buildJS,
 };
 
 module.exports = async ( file, callback ) => {
diff --git a/bin/packages/build.js b/bin/packages/build.js
index f2a9e381875f2..397a136ba7246 100755
--- a/bin/packages/build.js
+++ b/bin/packages/build.js
@@ -194,7 +194,7 @@ if ( files.length ) {
 
 	stream = glob.stream(
 		[
-			`${ PACKAGES_DIR }/*/src/**/*.js`,
+			`${ PACKAGES_DIR }/*/src/**/*.{js,ts,tsx}`,
 			`${ PACKAGES_DIR }/*/src/*.scss`,
 			`${ PACKAGES_DIR }/block-library/src/**/*.js`,
 			`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
diff --git a/package-lock.json b/package-lock.json
index fb1291b8d7d11..b4418b3f61ae7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11756,6 +11756,7 @@
 				"@babel/plugin-transform-react-jsx": "^7.12.7",
 				"@babel/plugin-transform-runtime": "^7.12.1",
 				"@babel/preset-env": "^7.12.7",
+				"@babel/preset-typescript": "^7.12.7",
 				"@babel/runtime": "^7.12.5",
 				"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 				"@wordpress/browserslist-config": "file:packages/browserslist-config",
diff --git a/packages/babel-plugin-makepot/test/index.js b/packages/babel-plugin-makepot/test/index.js
index 7a5e46d3a2212..da0121ca153e3 100644
--- a/packages/babel-plugin-makepot/test/index.js
+++ b/packages/babel-plugin-makepot/test/index.js
@@ -46,11 +46,14 @@ describe( 'babel-plugin', () => {
 	describe( '.getExtractedComment()', () => {
 		function getCommentFromString( string ) {
 			let comment;
-			traverse( transformSync( string, { ast: true } ).ast, {
-				CallExpression( path ) {
-					comment = getExtractedComment( path );
-				},
-			} );
+			traverse(
+				transformSync( string, { ast: true, filename: 'test.js' } ).ast,
+				{
+					CallExpression( path ) {
+						comment = getExtractedComment( path );
+					},
+				}
+			);
 
 			return comment;
 		}
@@ -107,11 +110,14 @@ describe( 'babel-plugin', () => {
 	describe( '.getNodeAsString()', () => {
 		function getNodeAsStringFromArgument( source ) {
 			let string;
-			traverse( transformSync( source, { ast: true } ).ast, {
-				CallExpression( path ) {
-					string = getNodeAsString( path.node.arguments[ 0 ] );
-				},
-			} );
+			traverse(
+				transformSync( source, { ast: true, filename: 'test.js' } ).ast,
+				{
+					CallExpression( path ) {
+						string = getNodeAsString( path.node.arguments[ 0 ] );
+					},
+				}
+			);
 
 			return string;
 		}
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 08223d7c95118..bfed8de41a30b 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+- Added `@babel/preset-typescript` so that the preset can by default transpile TypeScript files, too.
+
 ## 5.0.0 (2021-01-21)
 
 ### Breaking Changes
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 53e2316cacd2b..73ebfe5512560 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -54,7 +54,10 @@ module.exports = ( api ) => {
 	};
 
 	return {
-		presets: [ getPresetEnv() ],
+		presets: [
+			getPresetEnv(),
+			require.resolve( '@babel/preset-typescript' ),
+		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
 			[
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 2436f21ccdbd7..85a4ebae56d50 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -32,6 +32,7 @@
 		"@babel/plugin-transform-react-jsx": "^7.12.7",
 		"@babel/plugin-transform-runtime": "^7.12.1",
 		"@babel/preset-env": "^7.12.7",
+		"@babel/preset-typescript": "^7.12.7",
 		"@babel/runtime": "^7.12.5",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",
diff --git a/packages/babel-preset-default/test/index.js b/packages/babel-preset-default/test/index.js
index 2e37f8d0f5ea2..0a411cd424797 100644
--- a/packages/babel-preset-default/test/index.js
+++ b/packages/babel-preset-default/test/index.js
@@ -12,11 +12,11 @@ import babelPresetDefault from '../';
 
 describe( 'Babel preset default', () => {
 	test( 'transpilation works properly', () => {
-		const input = readFileSync(
-			path.join( __dirname, '/fixtures/input.js' )
-		);
+		const filename = path.join( __dirname, '/fixtures/input.js' );
+		const input = readFileSync( filename );
 
 		const output = transform( input, {
+			filename,
 			configFile: false,
 			envName: 'production',
 			presets: [ babelPresetDefault ],
diff --git a/packages/docgen/src/engine.js b/packages/docgen/src/engine.js
index 71d6436c462e8..e06705a1f2564 100644
--- a/packages/docgen/src/engine.js
+++ b/packages/docgen/src/engine.js
@@ -2,15 +2,14 @@
  * External dependencies
  */
 const babel = require( '@babel/core' );
-const { flatten } = require( 'lodash' );
 
 /**
  * Internal dependencies
  */
 const getIntermediateRepresentation = require( './get-intermediate-representation' );
 
-const getAST = ( source ) => {
-	return babel.parse( source || '' ).program;
+const getAST = ( source, filename ) => {
+	return babel.parse( source, { filename } ).program;
 };
 
 const getExportTokens = ( ast ) =>
@@ -19,25 +18,21 @@ const getExportTokens = ( ast ) =>
 			'ExportNamedDeclaration',
 			'ExportDefaultDeclaration',
 			'ExportAllDeclaration',
-		].some( ( declaration ) => declaration === node.type )
+		].includes( node.type )
 	);
 
 const engine = ( path, code, getIRFromPath = () => {} ) => {
-	const result = {};
-	result.ast = getAST( code );
-	result.tokens = getExportTokens( result.ast );
-	result.ir = flatten(
-		result.tokens.map( ( token ) =>
-			getIntermediateRepresentation(
-				path,
-				token,
-				result.ast,
-				getIRFromPath
-			)
-		)
+	if ( ! path || ! code ) {
+		return { ast: null, tokens: null, ir: [] };
+	}
+
+	const ast = getAST( code, path );
+	const tokens = getExportTokens( ast );
+	const ir = tokens.flatMap( ( token ) =>
+		getIntermediateRepresentation( path, token, ast, getIRFromPath )
 	);
 
-	return result;
+	return { ast, tokens, ir };
 };
 
 /**