2022-11-13 21:38

TypeScript入门(2) — VSCode开发环境配置

王姐姐

WEB前端

(741)

(0)

收藏

1.1. 防止无法识别为cmdlet、函数、脚本文件或可运行程序的名称

开始在开始菜单右键打开PowerShell(管理员)执行如下命令:

windows11下执行:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

windows10下执行:

set-ExecutionPolicy RemoteSigned

1.2. 安装插件

最新版本的vscode自动安装了TypeScript插件

安装简体中文插件Chinese (Simplified) (简体中文) Language Pack

安装Open in browser插件,点击右键可以预览页面

1.3. 编译typescript

终端下在项目目录下执行tsc --init命令创建tsconfig.json文件

点击菜单终端->运行任务->点击 tsc:build-tsconfig.json 就会编译ts文件为js文件

图片1.png 

1.4. 编译示例

Student.ts

class Student {
    firstName : string;
    lastName : string;
 
    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    sayHello() {
        return `Hello,您好${this.firstName}${this.lastName}`;
    }
}
var student = new Student("Wang","Fei");
var element = document.body || document.documentElement;
element.innerHTML = student.sayHello();

执行编译后生成Student.js文件:

"use strict";
class Student {
    constructor(fiestName, lastName) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    sayHello() {
        return `Hello,您好${this.firstName}${this.lastName}`;
    }
}
var student = new Student("Wang", "Fei");
var element = document.body || document.documentElement;
element.innerHTML = student.sayHello();

image.png

0条评论

点击登录参与评论