《Angular2之TypeScript》

来源：互联网发布：mac硬盘恢复编辑：程序博客网时间：2024/05/20 18:46

前言：

上一篇博文为大家介绍了关于Augular2的宏观上的研究成果，在后记中提到，深入学习Angular2是从TypeScript开始的，此篇博文就为大家介绍TypeScript是什么鬼？

正题：

一。定义

TypeScript：一门开源的静态类型的编程语言，由微软开发并维护，是JavaScript的超集，可以编译成纯JavaScript，可以在任何浏览器、任何计算机和任何操作系统上运行。

二。三句了解TypeScript

1.始于JavaScript，归于JavaScript

TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。

TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

2.强大的工具构建大型应用程序

类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为。

3.先进的JavaScript

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。

这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript。

三。实战：

（一）搭建运行环境

1.node.js：https://nodejs.org/en/download/

2.cnpm：命令提示符运行：npm install cnpm -g --registry=https://registry.npm.taobao.org

3.typescript：命令提示符运行：cnpm install -g typescript@1.8

PS:-g意味着全局安装typescript；@1.8表示安装的版本

（二）第一个TypeScript程序

1.创建：

TypeSript文件可在WebStrom、EditPlus、VS中创建。新建hello.ts文件,输入：

 console.log('linda you are beautiful!');

2.运行

用命令提示符运行：输入tsc hello.ts，此命令是借助TypeScript编译器来编译ts文件

输入：node hello.js，此命令是用来运行ts文件经过编译后的js文件

以上是逐步运行，更为简单的方式为：使用ts-node模块将编译过程和运行过程组合。使用此模块先安装，输入：cnpm install -t ts-node

安装此模块之后，再运行ts文件是可直接输入：ts-node hello.ts

（三）运行机制：

TypeScript不能直接在浏览器中执行，它的运行机制是使用TypeScript编译器来进行处理。上述实战只是针对ts文件做了简单的运行说明，在实战中运行一个简单的Greeter项目，并且在浏览器中运行，需要的文件有：

（1）greeter.html源码：

<!DOCTYPE html><html>  <head><title> TypeScript Greeter </title></head>  <body>    <script src='greeter.js'></script>  </body></html>

（2）greeter.ts源码：

class Greeter {    constructor(public greeting: string) { }    greet() {        return "<h1>" + this.greeting + "</h1>";    }};var greeter = new Greeter("Hello, world!");    document.body.innerHTML = greeter.greet();

（3）tsconfig.json源码：

{    "compilerOptions": {        "sourceMap":  true    }}

运行原理为：在命令提示符中输入：tsc --sourcemap greeter.ts，此命令的作用为通过TypeScript的编译器将ts文件编译为浏览器识别的js文件；start greeter.html，此命令的作用为启动html文件，文件中在body标签中编写：<script src='greeter.js'></script>，从而调用ts文件编译的等价的js文件，在浏览器中显示Hello,world!

后记：

越来越体会到反馈和总结的重要性，因为反馈我对于Angular2的宏观认识深入一层，因为总结，我对于TypeScript的运行机制又理解一层。大家多多去体会吧。

0 0