TypeScript类字段报Uncaught SyntaxError，已解决：需先编译TS文件

我是TypeScript新手，目前仅熟悉CSS/HTML。尝试创建类学习时出现错误，搜索后未找到清晰易懂的解决方案。

TypeScript代码（main.ts）：

class People
{
    name: string;
    age: number;
    
    constructor(name: string, age: number)
    {
        this.name = name;
        this.age = age;
    }
}

let pedro = new People("pedro", 16);
console.log(pedro.name, pedro.age);

运行时收到错误：

Uncaught SyntaxError: Unexpected identifier 'name' (at main.ts:3:5)

删除name字段后，age字段会出现相同错误，且VS Code中无报错提示。对应的HTML代码：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <!-- CSS -->
        <link href="style/mains.css" rel="stylesheet">
    </head>
    <body>
        <h1> Hi </h1>
        
        <!-- TS -->
        <script src="script/main.ts"></script>
    </body>
</html>

浏览器无法直接解析TypeScript文件，必须先将其编译为JavaScript文件后再引入：

• 执行编译命令：npx tsc main.ts，执行完成后会生成对应的main.js文件
• 修改HTML中的脚本引用，替换为编译后的JS文件：

  <script src="script/main.js"></script>
  

完成后即可正常运行代码。

内容的提问来源于stack exchange，提问作者Pedro Gabriel