TypeScript（入门）

时间 2019-11-12

标签 typescript 入门繁體版

原文原文链接

最近由于项目的须要开始着手调查一个叫作typescript的东西，经过翻阅一些github上的源码，一些论坛的文档，渐渐的有所了解。不管去学习研究哪一种框架或者哪一种语言，咱们首先要知道的应该是如何去构建开发环境。javascript

实践才能多出错多了解嘛，这就是所谓的实践出真知。废话很少言，咱们先来看看typescript是如何被介绍的。html

经过介绍咱们了解到typescript对javascript有很好的支持，属于javascript的一个超集。属于把javascript开发集成为真正的面向对象的，强类型的框架，使前台的开发能够像后台开发同样，模块化，便利化，大大的提升了开发的效率。java

首先咱们看看开发typescript须要哪些东西？node

首先咱们须要安装Node.js（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。）http://nodejs.cn/官方网站上能够下载本身的电脑对应的版本。
其次咱们须要nodejs的版本管理工具npm,安装完成后npm install -g typescript经过这个命令就能够下载安装TypeScript Compiler了。
更新TypeScript Compiler
- 输入指令：npm update -g typescript
- 查看版本：tsc -v
安装Visual Studio Code 开发工具
- Visual Studio Code (VS Code) 是微软开发的、免费开源、功能强大的轻量级的IDE。
- 运行环境：Windows 7 (64位)

我的以为学习typescript最快最好的方式是亲自实验，经过github网站去下载基本的原型框架，经过本地搭建的环境试着去运行别人的demo。git

下面咱们简单的介绍一下，在本地该如何去搭建运行的环境。github

第一步，在本地新建一个文件夹，暂且命名为typescript。经过命令行进入这个文件夹，而后执行 tsc --init命令进行基本的初期化，在本地会生成一个叫作tscconfig.json的配置文件。typescript

第二步，经过vscode工具打开当前目录。npm

第三步，咱们开始编译构建的环境，Ctrl+Shift+B。而后以下图所示。json

而后咱们选择构成管理，会生成新的编译文件。暂时先不上图了。接下来咱们试着去写咱们第一个typescript文件。仍是学习代码的老规则暂且叫作helloword.ts框架

class Hello {
    firstName : string;
    lastName : string;
    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    greeter() {
        return "欢迎来到typescript的世界，hello" + this.firstName + " " + this.lastName;
    }
}

var user = new Hello("王", "小二");

document.body.innerHTML = user.greeter();

View Code

代码编写完成后，咱们须要对它进行编译的工做，仍是Ctrl+Shift+B，而后你会发现原来的目录下多个一个叫作helloword.js的文件代码以下：

var Hello = (function () {
    function Hello(fiestName, lastName) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }
    Hello.prototype.greeter = function () {
        return "欢迎来到typescript的世界，hello" + this.firstName + " " + this.lastName;
    };
    return Hello;
}());
var user = new Hello("王", "小二");
document.body.innerHTML = user.greeter();

View Code

其实咱们正真的引用是叫作js的这个文件，而不是ts自己。当咱们编译完成后咱们还须要一个页面来测试咱们的代码是否是能够正常的显示，所以咱们新建了一个叫作index.html的文件。代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
</head>
<body>
    <script src="helloword.js"></script>
</body>
</html>

View Code

到这个时候目录的基本demo也算是作成了。结构以下所示：

到此咱们第一个typescript项目应就能够正常的跑起来了，下面是见证奇迹的时刻。

1. TypeScript入门
2. Typescript入门
3. TypeScript 入门
4. typescript 入门
5. TypeScript入门-类
6. TypeScript（入门）
7. 入门 typescript
8. typescript入门
9. React+TypeScript入门
10. typescript入门(一)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用