Switch to TypeScript and adjust sync script

package.json

@@ -6,7 +6,7 @@
 	"license": "GPL-2.0-or-later",
 	"scripts": {
 		"build": "wp-scripts build --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts build --webpack-src-dir=src/weather --output-path=build/weather",
-		"sync": "rsync -avz ./build $RSYNC_DESTINATION",
+		"sync": "rsync -avz --exclude={'.github','node_modules','src','.*','package*','webpack*'} ./ $RSYNC_DESTINATION",
 		"start": "wp-scripts start --webpack-src-dir=src/scale-section --output-path=build/scale-section && wp-scripts start --webpack-src-dir=src/weather --output-path=build/weather",
 		"lint:js": "wp-scripts lint-js",
 		"lint:css": "wp-scripts lint-style",
@@ -17,6 +17,7 @@
 		"npm": "^10.8.0"
 	},
 	"dependencies": {
+		"@types/wordpress__block-editor": "^11.5.14",
 		"@wordpress/block-editor": "^12.26.0",
 		"@wordpress/components": "^27.6.0",
 		"chalk": "^4.1.2",

src/scale-section/index.ts

@@ -0,0 +1,21 @@
+
+import { registerBlockType } from '@wordpress/blocks';
+
+import './style.scss';
+
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+// @ts-expect-error - TS doesn't know about the block.json
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

src/scale-section/save.js → src/scale-section/save.tsx

@@ -1,6 +1,8 @@
 import { useBlockProps, RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+import React from 'react';
+
+export default function Save( { attributes } ) {
 	const { content, height } = attributes;
 	const blockProps = useBlockProps.save( {
 		style: { height: `${ height }px` },