1、首先进入nodejs里安装typescript
npm install -g typescript
2、创建相应的项目目录,打开nodejs 进入当前项目目录
例:我的项目地址E:\example\ts,nodejs里 e:回车,复制地址(E:\example\ts),点击nodejs右键,粘贴,回车,即进入项目目录E:\example\ts。
3、创建tsconfig.json文件
tsc --init
4、打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,请复制下列配置)
{"compilerOptions": {"target":"es5","noImplicitAny":false,"module":"amd","removeComments":false,"sourceMap":false,"outDir":"src/js"//你要生成js的目录 }}
5、创建src目录,打开vscode新建文件,保存到src下扩展名为.html的文件,然后在编辑器里代码区输入此快捷方法,快速创建html布局代码
!+tab
自行添加js引入代码
<!DOCTYPE html>Document<!--自行添加js引入-->
6、回到E:\example\ts 目录,创建ts文件夹,然后新建ts为扩展名的ts文件(test.ts),测试代码如下:
classStudent{ firstName : string; lastName : string;constructor(fiestName : string, lastName : string) {this.firstName = fiestName;this.lastName = lastName; } greeter() {return`Hello,您好${this.firstName}${this.lastName}`; }}varuser =newStudent("王","小明");varele =document.body ||document.documentElement;ele.innerHTML = user.greeter();
7、点击菜单 任务-运行任务,点击 tsc:构建-tsconfig.json
8、此时src目录下会自动生成js/test.js文件了;打开test.js文件,点击编辑器的拆分编辑器菜单,即把js和ts文件拆开,自行编辑ts文件的时候,右侧会自动生成js代码。
(如果此时不会自动生成js代码,点击菜单 任务-运行任务 点击 tsc:监视-tsconfig.json 然后就同步了)