typeScript入门

Posted on   |   In   |  

为了用Angular2先看了看typescript,
用的Visual Studio Code调试, 对ts支持挺好

Visual Studio Code配置

创建个vsc的task.vscode\tasks.json, 就省得每次Ctrl+Shift+B手动编译了
(后来发现tsc –watch其实也挺方便)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": [
        "-w",
        "-p",
        "."
    ],
    "showOutput": "silent",
    "isWatching": true, //监控代码变化,自动编译
    "problemMatcher": "$tsc-watch"
}

tsconfig.json

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "noImplicitAny": true,
    "sourceMap": true,
    "removeComments": false,
    "preserveConstEnums": true
  }
}

typescript语法

声明变量类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//声明变量类型(基本类型) 
var str: string = "type is string";
var num: number = 0;
var boll: boolean = true;
//并没有: Null 或者: undefined
//any
var something: any = 'anyThing';
//相对来说Object就没什么意义了, 因为什么都可以
//var obj_num: Object = 1;
//var obj_obj: Object = {};
//var obj_null: Object = null;
//泛型
var arry_str: Array<string> = ["", ""];
var jobs: number[] = [0, 1];
//枚举
enum EnumObj { one, two, three };
var enumVal: EnumObj = EnumObj.three;

方法声明

1
2
3
4
5
6
7
8
9
10
//声明参数类型
function funArgsType(arg: string) {
}
//声明返回值类型number
function funReturnType(arg: string): number {
  return 14;
}
//久违的void 这回写在后边了...
function funReturnTypeVoid(arg: string): void {
}

类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//类
class TestClazz {
  static porp0: any = { key: "value" };//静态
  porp1: string;//默认为Public
  private porp2: string;//不允许直接通过getter读
  //可以有构造函数(不允许指定返回类型)
  constructor(arg1: string) {
    this.porp1 = arg1;
    console.log("TestClazz constructor==>", this.fun1(this.porp1));
  }
  fun1(arg: string): string {
    return arg + this.porp1;
  }
}
var testObj: TestClazz = new TestClazz("testObj1");
//继承
class TestSubClazz extends TestClazz {
  constructor(arg1: string) {
    super(arg1);//子类构造里必须包含super()方法的调用
    console.log("TestSubClass constructor==>");
  }
  fun2(): string {
    return super.fun1("TestSubClass==>fun2")
  }
}
var testSubObj: TestSubClazz = new TestSubClazz("testSubObj1");
console.log("static==>" + TestSubClazz.porp0.key);
console.log(testSubObj.fun2())

接口

1
2
3
4
5
6
7
8
9
10
11
12
interface ClockInterface {
    currentTime: Date;
    display?: number;//可选属性
    setTime(d: Date): void;
}
class Clock implements ClockInterface  {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

ES6的几个语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//字符串模板
var val1 = "v1",
  val2 = "v2";
var template = `Hello ${val1} ${val2}`;
console.log(template);
//=>符号 用于简写function 同时绑定this
var o = {
  x: 1,
  func: function () { console.log(this.x) },
  test: function () {
    setTimeout(() => { this.func() }, 100);
  }
};
o.test();
//用闭包解决
// test: function () {
//   var _this = this;
//   setTimeout(function () {
//     _this.func();
//   }, 100);
// }
//用bind解决
// test: function() {
//   setTimeout(function () {
//     this.func();
//   }.bind(this), 100);
// }