Typescript教程 :Hello World演示应用实例

迪鲁宾
396 阅读4分钟

Typescript是javascript的一个扩展版本，具有更多的功能，如静态类型，基于模块的代码，面向对象的支持。

Typescript是微软的开源语言。Typecript不能直接在任何浏览器上运行。你需要转码器来将typescript编译成javascript。

Typescript Compiler/transpiler flow

上图描述了执行代码过程的步骤

  • 开发者在普通编辑器/兼容IDE中使用typescript语言编写代码。typescript文件总是包含.ts扩展名。
  • 使用typescript编译器 (tsc命令)或任何其他构建工具来编译它。
  • 转译器或编译器是将用一种编程语言编写的代码转换为另一种编程语言的过程。
  • 编译过程中输出的javascript代码可以在所有流行的浏览器中运行。

类型脚本的优势或优点

  • Static typing类型推理，意味着变量将以类型的形式被声明。你可以给这个变量指定另一个不同的类型。
  • 支持面向对象的概念，如接口，类。对于使用Java和C++等面向对象语言的开发者来说，这将是非常容易学习的。
  • 集成支持所有流行的编辑器，如Visual Studio Code, Eclipse, 和Intelli Editors。
  • 所有的功能都支持所有流行的浏览器。
  • 代码错误会在编译时显示出来，开发人员很容易在生产时修复它。
  • 支持基于NPM的应用程序，以及使用typescript编译器的普通应用程序
  • 支持最新的Javascript特性，如ES5和ES6
  • 支持所有流行的框架，如Angular、React和Vue.js
  • 模块/组件支持
  • 支持IDE

Typescript的缺点或弊端

  • 多了一种语言需要学习。需要学习曲线。
  • 要在浏览器中运行代码需要进行编译

支持Typescript IDE/文本编辑器。

集成开发环境用于快速开发，在编写代码、格式化代码、自动提示、编译和调试支持方面有很多优势，并且在输入代码时也会提示错误。几乎所有流行的编辑器都可以通过内置或插件扩展来支持typescript。

Eclipse插件：-- 开源的eclipse对typescript语言有很好的支持。你可以查看eclipse的javascript IDE和商业的MyEclipse版本有内置的支持。

Visual Studio Code集成了typescript： 这是在javascript社区中流行的用于开发web应用的IDE。 它内置了对typecript语言的支持。同时也有很多针对不同框架的自定义插件。

Atom编辑器插件支持：-- 该编辑器通过插件支持。Atom-Typescript插件有最新版本的typecript。

Intelli Webstorm支持：- ntell有不同的IDE用于java和javascript项目。这两个IDE都有对这种语言的支持。有很多扩展插件，你可以为其他功能添加。

你也可以使用普通的记事本或Edit plus，你需要手动编写代码而不需要自动提示功能。

在windows上安装和设置typescript。

唯一的前提是要有NPM命令的设置。如果你没有npm命令，请在安装typescript之前在你的设置上安装nodejs。

C:\>npm --version  
5.6.0

一旦npm命令成功，请按照以下步骤进行安装

npm install -g typescript  
  
C:\>tsc --version  
Version 2.8.1

-g选项安装typescript全局模块。如果你想在项目中安装，请删除-g选项。
Linux/UNIX安装也是如此，只是你必须使用Sudo命令获得root权限。

sudo npm install -g typescript

TSC命令的基本语法

tsc [options] [file ...]

请看下面这个命令的例子

tsc file.ts - compiles typescript file and generate file.ts  
 tsc --outFile output.js newfile.ts - cutomozie the outfile

类型脚本编译器选项

以下是TSC命令的不同选项

选项:

说明

outFile:

编译后的typescript代码的输出文件名

--outDir:

用于输出已编译好的typescript文件的目录

--lib:

编译typescript代码所需的外部库。如果没有这个选项，就用默认库来编译。使用该选项可以获得最新的javascript库支持es6

--init:

创建一个包含tsconfig.json文件的typescript原型项目

--allowJS:

包括要编译的javascript文件

--allowUnreachableCode:

如果有任何不可到达的代码，编译器将不会给出错误。

Hello World基本示例

function HelloWordFunction(information) {  
    console.log(information);  
}  
var msg= 'Hello World First Typescript example';  
HelloWordFunction(msg);

并看到使用transpiler tsc命令编译和生成javascript的情况

tsc HelloWorld.ts  
B:\typescriptdemo>dir  
 Volume in drive B has no label.  
 Volume Serial Number is 0A9B-F96C  
  
 Directory of B:\typescriptdemo  
  
14-07-2018  20:14               153 HelloWorld.js  
14-07-2018  20:11               152 HelloWorld.ts  
               2 File(s)            305 bytes  
               2 Dir(s)  99,749,167,104 bytes free
avatar
文章
阅读
粉丝