TypeScript笔记1--环境搭建

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [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>