• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript笔记1--环境搭建

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TypeScript是什么

Typescript是JavaScript的超集,支持ES6特性并且提供了类型系统,可以编译成Javascript。是微软开发且已经在github上开源。
ES6(ES2015,ES2016等)虽然已发布,但是很多浏览器厂商对其并不是完全支持,当前我们要想使用最新的ES6特性,必须使用转换工具(如babel),才能最终运行在浏览器上。而TypeScript对ES6新特性的支持使得我们可以直接使用开发,并且不用依赖第三方工具(不是绝对的),再加上静态类型检查等,使得我们可以像写java一样爽。

环境搭建

有两种主要的方式获取TypeScript工具。通过npm(Node.js包管理器)和安装TypeScript的Visual Studio插件。作为前端开发人员在这里使用npm这种简单高效方式安装。

  • 1 npm安装
npm install -g typescript
  • 2 是否安装成功,在命令行中输入以下命令,如果出现版本号表示安装成功
tsc -v

入门示例

  • 创建文件Person.ts,并输入如下内容
class Person {
    name:string;
    age:number;
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }

    msg() {
        return `${this.name} is ${this.age} years old`;
    }
}

let user = new Person('Jack', 20);
document.body.innerHTML = user.msg();

  • 编译后会在同目录下生成Person.js 文件,编译命令如下:
tsc Person.ts
  • 编译后的文件Person.js内容如下,其实就是javascript源码。
var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.msg = function () {
        return this.name + " is " + this.age + " years old";
    };
    return Person;
}());
var user = new Person('Jack', 20);
document.body.innerHTML = user.msg();
  • 新建hello.html文件,输入以下内容:
<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello World</title></head>
    <body>
        <script src="Person.js"></script>
    </body>
</html>
  • 用浏览器打开hello.html即可看到效果

工欲善其事必先利其器--VS Code

VS Code也是微软开发的编辑器,其本身也是使用TypeScript开发的,代码已在github上开源,基于Electron框架开发,相对于Atom速度快,体验较好,是TypeScript IDE的首选。

其源码编辑器monaco-editor联想功能比较强大,已经单独开源。微信小程序开发工具的中源码编辑器就是使用了monaco-editor。另外其插件系统使得我们可以丰富其功能。

关于VS CODE更多信息请查看官网文档


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap