TypeScript简单了解

安装： npm install -g typescript
文件后缀： xx.ts、xx.tsx、**.d.tx
需要编译：tsc **.ts
强类型语言：number、string、boolean、null、undefined、enum、symbol、any、void
面向对象
AMD规范

类型

1. 基本类型及其隐式声明
   声明变量时同时确定变量类型，类型一旦确定就不可以更改;
   如果设定了类型，但是赋值时赋的是另一种类型的话会报错：
   error TS2322: Type ' "abc" ' is not assignable to type 'number'.
   1.1 any
   变体变量，js里面原本的变量

var a:any;
a = 123;  
a= 'abc';  
// 隐式声明为 any类型
var a;

1.2 number、string、boolean

var a:number;
var b:string;
var c:boolean;
// 隐式声明
var a = 1;  //  相当于 var a:number = 1;
var b = 'a'; //  相当于 var b:string = 'a';
var c = true;  // 相当于 var c:boolean = true;

1.3 enum
枚举，这个变量的值只能是限定范围内的值，如果不是范围内的值就会报错
比如：月份只能由1~12月，但是如果你给变量赋了个值为13 的话，就会报错

enum GENDER={
  MALE,
  FEMALE
}

---

2. . 联合类型
   变量可以且只可以是选定的类型之一，并且可以在选定的类型范围内随意变换类型。
   需要注意的是，如果某个表达式的结果被赋给了联合类型的变量，那么只要这个表达式的结果有不是规定类型可能，也会报错。（详看案例2）

// 案例1
var a:number | string;
a = 12;
a = 'abc';
a = false; // error TS2322: Type ' false ' is not assignable to type 'number | string'.

// 案例2 
var a:number | string;
var b:boolean；
a = b ? 1 : false; 
// error TS2322: Type ' false | 1' is not assignable to type 'number | string'. Type ' false ' is not assignable to type 'number | string'.
// a的类型被定义为number或string，但是在三元表达式中a有可能被赋值为false，所以这里也报错了

---

3. 数组类型及其隐式声明
   var arr:xxx[];

var arr = [ 1, 2, 3 ]; // 相当于 var arr:number[] = [ 1, 2, 3 ]
var arr = [ 1, false, 'a' ]; // 相当于 var arr:any[] = [ 1, false, 'a' ]

---

4. 函数相关
   函数参数有类型检测
   函数参数有个数检测
   函数返回值有类型检测

// 案例1
function test( a:number, b:number ){
  console.log( a + b );
}
test( "1", 2 ); // error TS2345: Argument of type ' "1" ' is not assignable to parameter of type 'number'.

// 案例2
function test( a:number, b:number ){
  console.log( a + b );
}
test( 2, 3, 5); // error TS2346: Supplied parameters do not match signature of .. all target.
test( 2 ); // error TS2346: Supplied parameters do not match signature of .. all target.

// 案例3，函数作为参数，并且需要传参
// 函数签名：fun1:(n:number)=>void
function fun(fun1:(n:number)=>void){};
// fun函数接收一个函数fun1作为参数，并且fun1函数本身需要传参n，参数n要求为number类型，而且没有返回值
fun(
    function (n:string){}
) 
// 报错，因为fun的参数的函数里的参数设定的是string和fun函数要求不一致

// 参数可选
function(n:number,s:string,b?:boolean){}
// 函数接收参数n且n为number、s为string、b为boolean，但是b是可选的，可传可不传

// 检测返回值类型
function fun(a:number, b:number):number{
       return 'a';
}
// error TS2322:  Type ' a ' is not assignable to type 'number

---

5. 对象类型

var obj:{n:number,s:string,b?:boolean}
// 定义了 obj对象，对象里面至少由两个属性：n、s，而且他们的类型分别是number和string，至于属性b，他是可选属性，可以有也可以没有。

---

6. 冲突检测
   代码中有无用的选项(即打死都不会执行的代码)，会报错。

enum GENDER={
  MALE,
  FEMALE
}
var c = GENDER.MALE;  
switch(c){
  case GENDER.MALE:
    bresk;
  case GENDER.FEMALE:
    bresk;
}
// error TS2678: Type 'GENDER.FEMALE' is not comparable to type 'GENDER.MALE'.
// 因为这里设定了c的值，所以switch语句中，永远只会走第一个case，所以第二个case是没有用的。
// 如果更改为：var c;  这样就不会报错

---

7. 外部变量声明
   declare var 变量;
   在实际应用中可能会有引用外部插件的情况，比如我们引用了jquery，想要在ts文件中使用jquery，那么就需要使用$去调用jquery的方法；但是如果我们直接使用的话它会认为我们没有声明，从而报错。
   但是像window、document等等是内置外部声明，在ts语言中已经声明过了，可以直接引用。

console.log(a); // error TS2304: Cannot find name 'a'.（变量未声明）

declare var $; // 引用外部变量 ，不引用而直接用的话，会报错
$.type("a");

// 可以直接引用
window.onload = function (){
  alert('a');
};

---

8. 接口（interface）

interface login{
    name:string,
    tel:number,
    sys?:string
}

var log:login;

log={
    name:"snow",
    tel:10086,
    sys:"iOS"
}

interface signIn{
    name:string,
    tel:number,
}

interface signUp{
    name:string,
    tel:number,
    date:string
}

var sign:signIn | signUp;
console.log(sign.date); // error 2339

---

9. 类

class User{
    name:string;
    tel:number;

    constructor(name:string, tel:number){
        this.name = name;
        this.tel = tel;
    }

    signIn(){
        console.log("signIn-name:"+this.name+",tel:"+this.tel);
    }
}

var u = new User("snow",10086);
u.signIn();

---

10. 修饰符
    public
private只能内部访问
    protected 只有子类可以访问

class User{
    name:string;
    public tel:number;
    private pw:string;
    
    signIn(){
        console.log("signIn-name:"+this.pw); // 不报错，可在内部访问
    }
}

var u = new User();
console.log(u.name); // 不报错，默认就是public
console.log(u.tel); // 不报错
console.log(u.pw); // [error 2341]

---

11. 泛型

class User<T>{
    name:T;
    tel:T;
    
    constructor(name:T,tel:T){
        this.name = name;
        this.tel = tel;
    }
}

var u = new User('snow',10086); // [error] 默认被设为string，所以第二个参数的类型不对
var u1 = new User(123,10086); // 默认被设为number，不报错
var u2 = new User<boolean>(true,false); // 设置了类型，设为了boolean