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。