TypeScript 快速学习

https://learnxinyminutes.com/docs/zh-cn/typescript-cn/

https://www.tslang.cn/docs/handbook/basic-types.html

姊妹篇 《javascript 快速学习》http://www.cnblogs.com/chenhui7373/p/8901933.html

【REPL环境】

去npm搜索 typescript 就有 ts-node

var isDone: boolean = false;

var lines: number = 42;

var name2: string = "Anders";

var notSure: any = 4;

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

// 枚举

enum Color { Red, Green, Blue };

var c: Color = Color.Green;

// 最后 void 用于函数没有任何返回

function bigHorrible(): void {

console.log("Hi");

}

// …………………………………………………………………………………………………………

// 归纳以上，类型有 boolean string number number[] any enum void

// 加上 JS 类型 object undefined null 非数字(NaN、Infinity、-Infinity)

// …………………………………………………………………………………………………………

var f1 = function (i: number): number { return i * i; }// 以下函数和f1等价

var f2 = function (i: number) { return i * i; }// 推断返回类型

var f3 = (i: number): number => { return i * i; }// 箭头表达式

var f4 = (i: number) => { return i * i; }// 推断返回类型

var f5 = (i: number) => i * i;// 单行可以这么干

// …………………………………………………………………………………………………………

// 归纳以上，为了发挥TypeScript威力，f1和f3的写法都是推荐的，因为这样类型是明确的不用推断

// …………………………………………………………………………………………………………

interface Person {

name: string;

// ?标识 表示这是可选的属性

age?: number;

move(): void;

}

// 实现接口只要结构体相同就可以了

var p: Person = { name: "Bobby", move: () => { } };

var validPerson: Person = { name: "Bobby", age: 42, move: () => { } };

// var invaildPerson: Person = {name:"Bobby",age:true};

// …………………………………………………………………………………………………………

// 归纳以上，实现接口只要结构体相同就可以了，另外接口声明可以用 ？ 标识可选属性

// 这样子的话，接口就成为我们 Object 的【规范】，规范用来定义项目 让多人协作合理化

// …………………………………………………………………………………………………………

// 接口描述一个函数类型 特别像 Java 8 中的 FunctionalInterface

interface SearchFunc{

(source:string,subString:string):boolean;

}

var mySearch:SearchFunc;// 这里挺怪的 不过说明了参数类型更重要

mySearch = function(src:string,sub:string){

return src.search(sub)!=-1;

}

// …………………………………………………………………………………………………………

// 归纳以上，这样子的话 我们就可以根据接口去实现方法了 ，接口成为了函数规范

// …………………………………………………………………………………………………………

// 整个类成员默认就是公共的 public

class Point {

x: number;

// 这里y声明为public 自动多一个成员不需要我们手动再声明

constructor(x:number,public y:number=0){

this.x = x;

}

dist(){return Math.sqrt(this.x * this.x + this.y * this.y);}

static origin = new Point(0,0);

}

class Point3D extends Point{

constructor(x:number,y:number,public z:number=0){

super(x,y);//必须显示调用

}

// override

dist(){

var d = super.dist();

return Math.sqrt(d*d+this.z*this.z);

}

}

// …………………………………………………………………………………………………………

// 归纳以上，演示了 类和类之间的【继承】 【重写方法】 【可重用目的】

// …………………………………………………………………………………………………………

// 模块

module Geometry{

export class Square {

constructor(public sideLength:number = 0){

}

area(){

return Math.pow(this.sideLength,2);

}

}

}

// "."可以作为子模块的分隔符

var s1 = new Geometry.Square(5);

// 引入模块并定义本地别名

import G = Geometry;

var s2 = new G.Square(10);

// …………………………………………………………………………………………………………

// 归纳以上，JS本身很像C external 去暴露给外部，通过这样我们可以写【模块化】代码

// …………………………………………………………………………………………………………

// 泛型

// 类

class Tuple<T1,T2>{

constructor(public item1:T1,public item2:T2){

}

}

interface Pair<T>{

item1:T;

item2:T;

}

var pairToTuple = function<T>(p:Pair<T>){

return new Tuple(p.item1,p.item2);

}

var tuple = pairToTuple({item1:'hello',item2:'world'});

// …………………………………………………………………………………………………………

// 归纳以上，最重要的思想 泛型让我们可以把代码更加【通用】进一步更【复用】

// …………………………………………………………………………………………………………

// 其他：引用定义文件

// / <reference path="jquery.d.ts" />

// 模板字符串（使用反引号的字符串)

// 嵌入变量的模板字符串

var name3 = 'Typrone';

var greeting = `Hi ${name3}, how are you?`

console.log(greeting);