引见
TypeScript是JavaScript的超集，为JavaScript的生态增加了范例机制，并最终将代码编译为地道的JavaScirpt代码。
编译
浏览器加载文件编译
注重，编译的TypeScript文件须要放在编译文件之前
<script src="lib/typescript.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/typescript.compile.min.js" type="text/javascript" charset="utf-8"></script>
自动化构架东西
1：fis
fis插件：fis-parser-typescript
var fis = require('fis3');
var typescirpt = require('fis3-parser-typescript');
fis.match('**.ts', {
parser: fis.plugin('typescript'),
rExt: '.js'
});
2: gulp
运用gulp插件：gulp-typescript
var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('compileTs', function () {
gulp.src('**.ts')
.pipe(ts())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['compileTs']);
基础范例
typescript席卷了一切JavaScript基础范例
基础范例
number 数字范例
string 字符串范例
boolean 布尔范例
any 恣意一种
数组
定义数组
两部分：前面一部分示意数组成员的范例，背面一部分示意示知是一个数组。
let arr:number[] = [12, 23];
let colors:any[] = [12, 'cyan', 'pink']; // 数组恣意范例
let list:Array<number> = [1, 2, 3]; // 数组泛型
元组
Tuple
元组范例许可示意一个已知元素数据和范例的数组，各元素的范例没必要雷同。
let x: [string, number] = ['cyan', 10];
接见越界的元素，运用团结范例替换。
罗列
定义：enum colors { red, green, blue }
表义一种能够一一列举的数据
特性：
经由过程索引值接见定的数据。
经由过程定义的数据接见索引值。
对罗列范例的数据增加肇端索引值。
enum color {
red = 10, // 默许索引值从0 最先， 能够指定索引值
green,
blue
}
// 编译以后： Object {10: "red", 11: "green", 12: "blue", red: 10, green: 11, blue: 12}
空值
void 范例 像是 与 any 范例相反，它示意没有任何范例。 当一个函数没有返回值时， 要指定 void 范例。
void 范例 只能赋值： undefiend 和 null。
let unvoid: void = null;
let unvoid1: void = undefined;
undefiend和null
undefeind和null二者有各自的范例： undefined和null。 和void相似。
let u: undefined = undefined;
let n: null = null;
默许情况下null 和undefined 是一切范例的子范例。
能够把null 和undefined赋值给number范例的变量。
范例断言
范例断言，相似别的言语里的范例转换。然则不举行特别的数据搜检和解构。 没有运转时的影响，只是在编译阶段其作用。
尖括号<>语法
let someValue: any = 'colors';
let strlength: number = (<string>someValue).length;
console.log(strlength);
变量声明
let&const
const 是对let的一个加强，能阻挠对一个变量再次赋值。
let 和 const 的区分：
一切变量除了设计要去修正的都应该运用const。
基础准绳就是假如一个变量不须要对它写入，那末别的运用这些代码的人也不能够写入它们。
运用const能够更轻易推想数据的流动性。
解构
解构数组
不须要指定范例
let input = [1, 2];
let [fisrt, second] = input;
console.log(fisrt, second); // 1 ,2
对象组织
let o = {
a: 'foo',
b: 12,
c: 'bar'
}
let {a, b} = o;
console.log( a, b );
函数
TypeScript函数能够竖立有名字的函数和匿名函数
TypeScript函数实行返回值须要定义数据范例，假如没有效果则要定义为void。
TypeScript函数，参数须要定义范例，在挪用的时刻，通报的参数一定要跟定义时的参数个数一样。不然编译报错。
function add (a:number, b:number):number {
return a + b;
}
let sum = add(10, 20);
console.log( sum );
// 定义void返回值
setProperty();
function setProperty (): void {
console.log('success');
}
可选参数和默许参数
在TypeScript中能够在参数名旁边运用 ? 完成可选参数
function count (str1: string, str2?: string): string {
return str1 + '--' + str2;
}
let reslut = count('xixi');
console.log( reslut );
盈余参数
盈余参数会被看成个数不限的可选参数。能够一个都没有，一样也能够有恣意个。
语法：...nameProperty
function builName (numa1: string, ...restOfName: string[]) { // 盈余参数保留在数组中
}
Class
在TypeScript中，能够经由过程Class来定义一个类。在编译以后，会编译成JavaScript一个闭包函数类。
语法： class className {}
成员要领，成员属性
在类中增加的属性会编译到组织函数中，该属性假如不赋值，则不会被编译.
在类中增加的要领会编译到组织函数的Prototype上。
class Price {
price: number = 10;
fn( num: number ): string {
return num * 2;
}
}
编译以后的效果：
//Compiled TypeScript
var Price = (function () {
function Price() {
this.price = 10;
}
Price.prototype.fn = function (num) {
return num * 2;
};
return Price;
})();
静态属性，静态要领
静态属性：经由过程static关键字定义，定义的该属性，在 类中接见不到， 由于定义在类上。
静态要领：经由过程static关键字定义，定义的该要领，在类中是接见不到(不能经由过程this接见)，由于该要领定义在类上。
class Person {
static name: string = 'time';
static fn(num: number): void {
console.log('success');
}
}
let p1: Peson = new Person(); // 实例化
编译以后：
var Person = (function () {
function Person() {
}
Person.fn = function (num) {
console.log('success');
console.log(Peson.name);
};
Person.name = 'time';
return Person;
})();
var p1 = new Person();
组织函数
在实例化的时刻被挪用
组织函数中定义的语句会编译到JavaScript的组织函数中。
组织函数不能声明返回范例。
类定义的属性(赋值的属性)会被编译到JavaScirpt的组织函数中。
class Book {
name: string;
page: number = 400;
constructor(bookName: string) {
this.name = bookName;
console.log(bookName);
}
}
let p1: Book = new Book('庄子');
编译以后：
var Book = (function () {
function Book(bookName) {
this.page = 400;
this.name = bookName;
console.log(bookName);
}
return Book;
})();
var p1 = new Book('庄子');
继续
语法：子类 extends 父类
class Base {
press: string = 'one';
}
class Book extends Base {
name: string = '老子';
sayName(): string {
return this.name;
}
}
let b: Book = new Book();
let bookname = b.sayName();
console.log(bookname);
编译以后：
经由过程的是混合式继续
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var Base = (function () {
function Base() {
this.press = 'one';
}
return Base;
})();
var Book = (function (_super) {
__extends(Book, _super);
function Book() {
_super.apply(this, arguments);
this.name = '老子';
}
Book.prototype.sayName = function () {
return this.name;
};
return Book;
})(Base);
var b = new Book();
var bookname = b.sayName();
console.log(bookname);
——extends(); 要领
var __extends = this.__extends || function (d, b) { // b 父类
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
目标, 完成只继续 父类的原型对象。 从原型对象入手
1，function __() {}竖立一个空函数， 目标：空函数举行中转，把父类的模板屏蔽掉， 父类的原型取到。
2，__.prototype = b.prototype完成空函数的原型对象 和 超类的原型对象转换
3，d.prototype = new __()原型继续
运用for-in轮回，子类继续父类的静态属性或要领。(经由过程一个函数中转，完成，只实例化一次，且继续了一次父类的原型对象)
经由过程寄生类继续父类原型上的属性或要领。
在子类中运转组织函数式继续完成对父类的组织函数继续。
super()
在包括constructor函数的子类中必需挪用super().它会实行基类的组织要领。
通报给super()要领就是完成组织函数继续属性
子类组织函数中增加属性。
继续父类组织函数中的属性，假如子类定义组织函数就必需继续。
class Base {
press: string = 'one';
name: string;
constructor ( bookName: string ) {
this.name = bookName;
}
}
class Book extends Base {
price: number;
// name: string = '老子';
constructor(bookName: string, price: number) {
// 父类继续属性
super(bookName); // 会实行父类的 constructor
this.price = price;
}
sayName(): string {
return this.name;
}
}
let b: Book = new Book('老子', 40);
let bookname = b.sayName();
console.log(bookname);
接口
在TypeScript中，接口的作用：为这些范例定名和为你的代码或第三方代码定义左券。
TypeScript的中心准绳之一是：对值所具有的shape举行范例搜检。
定义一种数据花样，来束缚变量的范例。
接口中定义的每一个接口，都能够看成一种范例来运用。
可选完成成员，能够在背面增加?.
语法：interface names {};
接口定义对象
// 定义接口
interface Person {
name: string;
age: number;
sex: string;
hobby?: any;
}
// 运用接口
function getName (person: Person): string {
return person.name;
}
// 完成接口
var n: string = getName({
name: 'one',
age: 23,
sex: 'nv'
});
console.log(n);
接口函数
语法：interface name {}
定义函数花样.经由过程()来定义参数个数，并声明函数返回值范例。
作用：限定了定义该函数范例的范例。
// 定义抽象类
interface Add {
(num1: number, num2: number): number;
}
// 运用接口
let fn:Add;
// 完成接口
fn = function ( num1: number, num2: number ): number {
return num1 + num2;
}
var reslut: number = fn(10 , 20);
console.log(reslut);
类的接口定义
语法：
interface className {
key: type;
fn(arg: type): type;
}
完成接口：
class Times implements Base {}
作用：保证代码的安全性
'use strict';
// 时候接口
interface Base {
current: string;
getCurrentDate(): string;
}
// 运用接口
class Times implements Base {
current: string;
constructor( d: string ){
this.current = d;
}
getCurrentDate (): string {
return this.current;
}
}
let d: Times = new Times(new Date().toString());
console.log(d);
模块
在TypeScript1.5中：内部模块 是说所的定名空间。 外部模块则称之为模块
语法：
module name {}
经由过程 export关键字， 将模块的要领属性暴露出来。
在模块的外部接见模块，须要经由过程模块称号，点语法挪用模块内部暴露的接口
'use strict';
// 定义模块
module startModuel {
let info: string = 'colors';
// 暴露一个class
export class Satrt {
name: string;
constructor(name: string) {
this.name = name;
}
getName(): string {
return this.name;
}
}
}
// 实例化模块中暴露的接口
let satr:startModuel.Satrt = new startModuel.Satrt('cyan');
console.log( satr );
console.log(satr.getName());
模块在其本身的作用域里实行，而不是在全局作用域里。
一个模块里的比那两，函数，类等等在模块外部是不可见的，须要经由过程export情势向外暴露。
假如一个模块想运用别的模块导出的变量，函数，类，接口等。须要运用import构成引入。
模块是自声明的。两个模块之间的关联是经由过程在文件级别上运用imports和 exports 竖立联络的。
导出
导出声明
export interface StringValidator {
isAcce(s: string): boolean;
}
export const numberRegExp = /^[0-9]+$/;
导出语句
export class ZipCode implements StringValidator {
isAcce(s: string) {
return s.length === 5 && numberRegExp.test(s);
}
}
// 导出语句
export { ZipCode }
导入
运用关键字：import 来导入别的模块中的导出内容
import { ZipCode } form './ZipCode';
let myValid = new ZipCode();
// 对导入的内容重新定名
import {ZipCode as ZVC } form ''./ZipCode;
let myValid = new ZVC();
默许导出
每一个模快都有一个defalut导出。 默许导出运用default 关键字标记。
比方：JQuery的类库有一个默许导出JQuery或$.
let $:jQuery;
export default $;
import $ from 'JQuery';
模块途径剖析
TypeScript存在两种途径剖析体式格局： Node和Classic（底本TypeScirpt途径剖析划定规矩，为了向后兼容）
TypeScript是榜样Node运转时剖析战略来编译阶段定义模块文件。
TypeScript在Node剖析逻辑基础上增加了TypeScript源文件的扩展名(.ts,.tsx,.d.ts).
定名空间
定名空间是位于全局定名空间下的一个一般的带有名字的JavaScript对象
运用关键字：namespace
namescope Valiation {
export interface StringValidator {
isAcce(s: string): boolean;
}
const lettesRegExp = /^[A-Za-z]+$/;
}
多文件的定名空间
差别的文件，然则还是同一个定名空间，并且在运用的时刻，就如同他们在一个文件中定义的一样。 由于差别文件之间存在依靠关联，所以加入了援用标签来示知编译器文件之间的关联。
namescope Valiation {
export interface StringValidator {
isAcce(s: string): boolean;
}
}
namescope Valiation {
const lettesRegExp = /^[A-Za-z]+$/;
expots class LetterOnly implements StringValidator {
isAcce(s: string): boolean {
return s.length && lettesRegExp.test(s);
}
}
}
// 测试
/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
let strings = ["Hello", "98052"];
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();
strings.forEach(s => {
for (let name in validators) {
console.log(""" + s + "" " + (validators[name].isAcce(s) ? " matches " : " does not match ") + name);
}
});
编译体式格局：
把一切输入的文件编译一个输出文件，须要运用–outFile标记
tsc –outFile sample.js Test.ts
变异其会依据源码中援用标签自动的对输出举行排序。
能够零丁指定每一个文件
tsc –outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts能够编译成每一个文件(默许体式格局),每一个源文件都邑对应天生一个JavaScript文件。然后，在页面上经由过程<script>标签吧一切天生的JavaScript文件按准确的递次引进来。
