1.安装typescript
npm install -g typescript

2.创建tsconfig.json文件
tsc --init
3.配置tsconfig.json

4.创建文件目录和html

image.png

5.html引入hello.ts

image.png

6.编写ts

class Person {
  firstName: string;
  lastName: string;

  constructor(fiestName: string, lastName: string) {
    this.firstName = fiestName;
    this.lastName = lastName;
  }
  sayHello() {
    return `Hello,您好${this.firstName}${this.lastName}`;
  }
}
var user = new Person('周', '逸');
var ele = document.body || document.documentElement;
ele.innerHTML = user.sayHello();

7.点击 任务

image.png

8.监视

image.png

9.查看js代码

image.png