TypeScript初探

TypeScript初探

TypeScript什么？

官方给的定义：TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript类型的超集，可以编译成纯JavaScript，本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。当前TypeScript 2.6 已发布。

TypeScript能做什么？

背景

　　TypeScript 起源于开发应用程序规模的 JavaScript 应用程序的需求。Microsoft的语言开发者们说内部以及外部的客户都表示他们构建 JavaScript 代码的问题。

很多最终依赖于 JavaScript 的开发者通常用编译为 JavaScript 代码的另一种语言写脚本，例如 CoffeeScript 和 Script# (读作 ScriptSharp)。一个明显的劣势是也许无法从那另一种语言使用任何 JavaScript 的具体的语言特性，如果那种语言不支持它的话。在 Microsoft 内部，它导致了自定义工具以简化 JavaScript 组件的编写的需求。

框架应用

　　更直观的表现在，当前的前端主流框架：1. React ，2. Angular ：Angular团队建议在所有的Angular项目中使用TypeScript。3. Vue.js 等

特性

　　TypeScript 是一种给 JavaScript 添加特性的语言扩展。

　　

● 类型批注和编译时类型检查

　　

Boolean

在JavaScript和TypeScript中也具有最基本的逻辑断言值true/false，采用’boolean’类型。

var isDone: boolean = false;

Number

如JavaScript，TypeScript所有的数值类型采用浮点型计数，其类型为‘number’。

var height: number = 6;

String

在webpages的JavaScript或者服务端的应用程序最基本的功能就是处理文本数据。在其他语言中大多使用’string’去代表文本数据类型。TypeScript和JavaScript一样也是用双引号(“)或者单引号包裹文本数据。

var name: string = "bob";
name = 'smith';

Array

在TypeScript中如JavaScript一样允许我们操结合操作。数组类型可以使用下边两种方式之一。

第一种方式，你可以在数据类型之后带上’[]‘:

var list:number[] = [1, 2, 3];

第二种方式，也可以采用泛型的数组类型：

var list:Array<number> = [1, 2, 3];

Enum

TypeScript为JavaScript新增了枚举这种标准的集合数据类型。和在c#中一样，枚举是为一组数值类型一组更友好的名称：

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

Any

有时我们需要描述一些我们不知道的什么写进应用的动态数据类型，这可能来自第三方用户或者lib。在这里我们希望该数据不要加入TypeScript的类型检查,是的此值通过编译时检查。为此我们可以采用‘any’类型标注：

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

var list:any[] = [1, true, "free"];
 
list[1] = 100;

Void

和‘any’相对的数据类型则是’Void‘，它代表没有任何数据类型。我们常用的一个方法没有任何返回值：

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

●类

TypeScript 支持集成了可选的类型批注支持的 ECMAScript6 的类。比如支持基于类的面向对象编程。比如创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

●接口

使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

●模块 

module：模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

 

项目配置：tsconfig.json

概述：

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

始于JavaScript，归于JavaScript

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript。