TypeScript笔记 1--环境搭建

2022-09-11 21:38:26

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更多信息请查看官网文档。

码农公寓

TypeScript是什么

环境搭建

入门示例

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

相关文章