纯TypeScript开发Web前端(一)环境配置

前言

        TypeScript作为JavaScript的华丽的外衣(超集),几乎到了是人见人爱的程度。其优雅的语法,面向对象的特性,还有微软系IDE的强力支持,都能让玩过的人爱不释手,尤其对那些被JS恶心多年的开发者更是产生无数的共鸣。
        早在2014年我就跟TS有过亲密接触,那时还在游戏公司HTML5刚刚兴起,我也跟风试水白鹭引擎Egret做了个demo小游戏。当时的我确被惊艳了一把,简直跟AS3的体验一模一样,充满了美感!可惜,当时手机的性能和H5成熟度不足以支撑重度游戏,我也只能把前端团队继续带往cocos2d+lua的主流方向上。
        说回web应用,问百度也好寻谷歌也罢,TypeScript总是跟Angular、React、Vue.js这些主流的前端框架黏在一起,难道除了依附于它们,纯TypeScript项目就不能生存吗?
        想到这里,我又忍不住萌生出折腾一下的念头……
        好吧,来吧,我们又得重配置开始了。

我的开发环境

Visual Studio 2017
        作为宇宙最强IDE,VS一直都是我居家旅行撸代码必备的,而且跟TS一样都是微软全家桶的一部分,所以我选择这个组合。
下载传送门


        当然,如果闲VS块头太大,大家也可以用npm,或者VS Code、sublime Text之类的搭上TS插件。这种百度谷歌能找到N多文章,我个人暂时并没有实践过,没有实践就没有发言权。如果阁下选择与我不一样的开发环境的话,那么可以就此别过,下篇再见了~

配置项目

  • 创建一个Web项目(我项目是的是.NET Core2.1的),然后编辑项目属性。

右键 => 属性 => TypeScript生成

在这里可以设置整个项目的TS的全局编译参数,每次编译项目的时候IDE都会吧*.ts编译成js。
燃鹅~~
我个人更喜欢用下面的操作:

1.项目创建一个Scripts文件夹,ts源码都放在这里

0.png

2.在上面的目录中,添加创建一个tsconfig.json的配置文件


纯TypeScript开发Web前端(一)环境配置_第1张图片
1.png

3.然后改一下配置,就可以开始写代码了

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "../wwwroot/js",
    "module": "amd"
  },
  "files": ["./user.ts"],
  "compileOnSave": true
}

简单说明一下
·target:如果不考虑浏览器兼容性,ES版本越高越好,如果要兼容IE11及以下的浏览器,用es5便好。
outDir:编译生成js的输出目录
files:编译的代码ts文件清单,这里把页面引用的入口文件添加上来就好了,至于user.ts引用的utils.ts就不必要加进来了,因为IDE会检测他们之间的引用关系同步去编译的。如果嫌麻烦还可以用include / exclude来配置,这样就不用在开发过程中改files配置了
compileOnSave:顾名思义“保存文件立即编译”
module:模块化引入方式,我用requirejs因此选amd,如果使用seajs,则是commonjs

试验一下

  • utils/message.ts
export class Message {
    static ShowLog(text: string) {
        console.log(text);
    }

    static ShowAlert(text: string) {
        window.alert(text);
    }
}
  • user.ts
import { Message } from "./utils/message";

export class User {
    userId: string;
    username: string;

    constructor(_userId: string, _username: string) {
        this.userId = _userId;
        this.username = _username;
    }

    Say() {
        Message.ShowLog("Hi, I am " + this.username + ", my User ID is" + this.userId + ".");
    }
}

  • utils/message.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Message = /** @class */ (function () {
    function Message() {
    }
    Message.ShowLog = function (text) {
        console.log(text);
    };
    Message.ShowAlert = function (text) {
        window.alert(text);
    };
    return Message;
}());
exports.Message = Message;
//# sourceMappingURL=message.js.map
  • user.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var message_1 = require("./utils/message");
var User = /** @class */ (function () {
    function User(_userId, _username) {
        this.userId = _userId;
        this.username = _username;
    }
    User.prototype.Say = function () {
        message_1.Message.ShowLog("Hi, I am " + this.username + ", my User ID is" + this.userId + ".");
    };
    return User;
}());
exports.User = User;
//# sourceMappingURL=user.js.map
大功告成!我们下一篇讲讲js库的引入

你可能感兴趣的:(纯TypeScript开发Web前端(一)环境配置)