I can't get why monaco-editor can't work with typescript files.

Here is the source code I passed into the editor:

import React from 'react';
import styles from './Test.scss';

export const Test = (foo: number) => {
    return (
        <div className={styles.container}>Test</div>
    );
}

And the options:

Language = typescript +

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.Latest,
      allowNonTsExtensions: true,
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      module: monaco.languages.typescript.ModuleKind.CommonJS,
      noEmit: true,
      esModuleInterop: true,
      jsx: monaco.languages.typescript.JsxEmit.React,
      reactNamespace: "React",
      allowJs: true,
      typeRoots: ["node_modules/@types"],
    });

So I told the editor "here is a typescript file", but that foo: number show error Type annotations can only be used in TypeScript files.(8010)

How to deal with it?

P.S. It's a web application, i.e. monaco-editor is not inside VS code