博客园首发，转载请注明出处，多谢支持。http://www.cnblogs.com/xuema/

一、TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，兼容JavaScript，可以载入JS代码然后运行。它与JavaScript相比进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销。 而JavaScript只是一个脚本语言，并非设计用于开发大型 Web 应用，JavaScript 没有提供类和模块的概念，而TypeScript扩展实现了这些特性。

　　它扩展了 JavaScript 的语法，因此现有的JavaScript代码可与其代码一起工作无需任何修改，它通过类型注解提供编译时的静态类型检查。TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

　　TypeScript 最大的特点就是类型化，因此才叫做TypeScript。比起弱类型的JavaScript，类型化的TypeScript显得更加容易维护。

　　要在应用中使用 TypeScript 必须先编译，编译的结果是生成 js 文件，你可通过 TypeScript 编译器 tsc 命令来完成这个过程。如要编译test.ts(TypeScript文件的扩展名为.ts)，可用如下命令：

tsc test.ts

编译完成后就会在当前目录生成名为test.js的文件。

注：不要将TypeScript看作是一门新的语言，它只是为了提升JavaScript代码质量的一个工具，最终TypeScript仍然要编译成JavaScript。

二、Hello World

前面我们介绍了什么是TypeScript，那我们就先来看一个经典的程序Hello World。代码如下：

<script type="text/typescript">
  var hw:string="Hello World!";     //定义一个字符串变量
  document.write(<h1>"+hw+"</h1>);  //将结果显示在页面上，这句话是不是很熟悉呢。
</script>

看到这里同学们是不是感觉很熟悉，没有错，就是这样，我们可以把javascript的代码用到TypeScript里面运行。同学们也看到上面的代码是写在script标签中，注意其中的类型是typescript。如果想在页面上直接编译看到结果，还需要引用typescript.min.js与typescript.compile.min.js。如下代码：

<html>
<head>
  <title>demo</title>
</head>
<body>
  <script type="text/typescript">
     // TypeScript代码
  </script>
  <script src="lib/typescript.min.js"></script>
  <script src="lib/typescript.compile.min.js"></script>
</body>
</html>

三、对比

我们先写一个TypeScript的例子，如下代码，定义一个学生类(在后面的内容中介绍）,然后调用：

class Student{
   name:string;
   age:number;
}
var s1=new Student();
s1.name="Jim";
s1.age=20;
document.write("name:"+s1.name+" age:"+s1.age);

我们再来看用TypeScript编译以后的JavaScript代码：

var Student = (function () {
    function Student() {
    }
    return Student;
})();
var s1 = new Student();
s1.name = "Jim";
s1.age = 20;
document.write("name:" + s1.name + " age:" + s1.age);

通过对代码的对比，是不是感觉TypeScript代码更简洁，更好理解，更易于维护。是不是感觉与C#,Java,C++类似。

四、类型

TypeScript 的基本数据类型 有boolean、number 、string 、 array 、 enum 、any 、void。首先我们要讲的是boolen。

最基本的数据类型是简单的真/假值，其中JavaScript和TypeScript（以及其他语言）称之为“布尔值”。在JavaScript中变量的定义是通过var关键字来完成，而在TypeScript中变量的定义格式为：

通过var关键字 变量名后面+冒号 + 数据类型来指定

1.如定义一个boolen的变量:

var isDone: boolean = false;

2.用在JS与TS中的所有数值都是浮点型，而在TS中我们定义他们为“number”型。例如：声明一个number类型的变量如下代码：

var isNumber:number=6;
var isfloat:number=6.01;

3.string代表字符串，跟 JavaScript 一样，可以使用一对双引号(")或一对单引号(')来表示字符串。例如：

var name: string = "bob";
var family_name: string = 'Green';

4.TypeScript 中数组使用“[]”来声明，代码如下:

var list: number[] = [1, 2, 3];
var name: string[] = ["阿龙","阿猫","阿狗"];

alert(list[0]));

var arr:Array = [1,2,3,"a","b","c"]; // 任意类型数组关键字Array
alert(arr[1]);

5.枚举类型是 TypeScript 中新添加的，而 JavaScript 中是没有这个类型的。用关键字enum来声明。代码示例如下：

enum Color {
  Red,　　　//枚举元素列表
  Green,
  Blue
};
var c: Color = Color.Green;

6.任意类型，和 JavaScript 中变量的默认类型一样，指代是动态的，能够赋予任意类型。例如：

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;  // 定义为boolen型

7.void，这个类型仅能在函数中使用，可以将函数的返回类型指定为 void，表示该函数不返回任何值。代码如下:

function warnUser(): void {
  alert("This is my warning message");
}

免费的互动练习和更多的入门学习内容放在这个页面上：http://www.dwz.cn/29xU5j

TypeScript入门的更多相关文章

  1. TypeScript入门指南（JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  2. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  3. typescript 入门教程一

    ##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...

  4. TypeScript入门一：配置TS工作环境

    配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...

  5. TypeScript入门五：TypeScript的接口

    TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...

  6. TypeScript 入门教程学习笔记

    TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...

  7. TypeScript 入门自学笔记 — 类型断言（二）

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  8. TypeScript入门文档

    typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top

  9. 【转】JavaScript => TypeScript 入门

    几个月前把 ES6 的特性都过了一遍,收获颇丰.现在继续来看看 TypesScript(下文简称为 “TS”).限于经验,本文一些总结如有不当,欢迎指正. 官网有这样一段描述: TypeScript ...

随机推荐

  1. 复制（6）——分发者（Distributor）

    如简介中提到,分发者(Distributor)是SQLServer 复制过程的核心组件.因为它是控制和执行实际的数据移动的过程,并且存放了发布(Publications)和订阅(Subscriptio ...

  2. 刷牙LeetCode思考

    时间已经到了不自觉地,3在五月中旬.今天正式LeetCode自由181刷牙的问题.感觉,以提高他们的算法非常有帮助. 第一个主要的深搜索,广泛搜索,DP他已经掌握7788.也有自己写的代码格公式,使用 ...

  3. Visual Studio Team Services使用教程--默认团队checkin权限修改

  4. MapReduce 规划 系列的12 使用Hadoop Streaming技术集成newLISP文字

    本文example6环境与前Hadoop 1.x异,于Hadoop 2.x环境测试. 功能与前面相同的日志处理程序. 第一newLISP文字,游玩mapper任务.于stdin读取文本数据,将did由 ...

  5. Oracle SQL操作计划基线总结（SQL Plan Baseline）

    一.基础概念 Oracle 11g開始,提供了一种新的固定运行计划的方法,即SQL plan baseline,中文名SQL运行计划基线(简称基线),能够觉得是OUTLINE(大纲)或者SQL PRO ...

  6. MVC 分离Controllers-Views

    将MVC中的Controllers.Model和View分别放到单独的项目中 Model: 新建-项目-Windows-类库 MVCTest.Model Controller:新建-项目-Window ...

  7. PAT 1033. To Fill or Not to Fill (贪婪)

    PAT-A最后一个问题.最后做出来... 贪婪,通过局部优化全局优化. 1. 该加油站按距离升序排列 2. 记录气体台当前所在index,目前的汽油.开支.在您的整个背部 3. 遍历中有两种情况: 1 ...

  8. HR系统邮件审批功能总结

    时至今日,来兰亭工作的第三个小任务算是暂时告一段落了.这个小任务是耗费时间最长的,因此在这里总结整理一下. 首先这个功能的出发点是方法领导进行手下员工的审批,包括加班申请,休假申请,和漏打卡申请.由于 ...

  9. UVA11080- Place the Guards(二分图染色)

    题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...

  10. Ubuntu 14.04 LAMP搭建(Apache 2.47+MySQL 5.5+PHP5.5)

    原文:Ubuntu LAMP搭建 为了数据库课程设计,只好自己搭一个数据库系统,采用LAMP方式. 一.安装 1.安装Apache sudo apt-get install apache2 Apach ...