React入门（十二）之typescript

说起 typescript你是不想到了 javascript呢，没错，它们确实是有关系的，具体是什么，往下看！

1、typescript介绍

学了这么久的javascript，相信你已经知道了javascript是一门弱类型语言。
强类型语言就是声明变量的同时限制数据类型，而弱类型语言则相反，对于数据类型的限制并不那么严格。

比如你定义了一个变量，但是赋值的时候可以赋任何类型的数据，而强类型就比较严格了，是什么类型就必须严格匹配。

typescript让javascript变成强类型语言。,是javascript 的一个超集，由 Microsoft 开发，代码开源于 GitHub 上。

2、特点

• 可以在开发阶段和编译阶段就发现大部分错误
• 不显式的定义类型，也能够自动做出类型推论
• 即使 TypeScript 编译报错，也可以生成 JavaScript 文件
• Google 开发的 Angular 就是使用 TypeScript 编写的
• TypeScript 拥抱了 ES6+ 规范

3、安装

npm install -g typescript  \  yarn global add typescript
tsc -v 测试  c就是compile（编译）

4、编译

编译就是把ts的代码转换成js的代码。

 tsc test.ts
//监听
 tsc test.ts --watch

类型不匹配时，编辑报错，但可以生成js（编辑通过），如果不希望编译通过需要配tsconfig.json

5、使用步骤

1、新建test.ts
 	写js代码
2、使用命令：tsc  test.ts 把ts编译成js
    在当前目录下就会产生一个test.js文件。
3、新建html文件，引入test.js文件。

6、类型

6.1、原始类型

​ js的(基本)类型：number、string、boolean、null、undefined、Symbol

​ ts新增的类型：void、any、never、联合、函数、数组类型、类 …

6.2、内置对象类型

• DOM

​ Document、HTMLElement、NodeList …

• 内置类

​ Boolean、Error、Date、RegExp、Math …

7、类型注解

7.1、变量的注解（定义变量）

• 基本语法：

声明 变量:类型;           //定义变量，没有赋值时，默认值是： undefined
声明 变量:类型=值;        //定义变量并赋值。严格要求值是定义的类型

如：

let n:number; //定义一个变量n，类型是number，没有赋值，默认值是undefined
let num:number = 12; //没有问题
num = "hi"; //出错，类型不对。

let str:string = "hello";

7.2、不同类型的数据互相赋值（类型权重）

类型权重
	any > boolean number string void 联合、函数、数组类型、类 > null undefined -> never

权重高的类型，接受权重低的类型值；
反之不对；
同类型权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）；

如：

//权重高的类型，接受低权重的类型值
let a:any;
a = 12;
a ="hello";

//权重低的类型，也可以接受权重高的类型
let a1:number;
let b1:any="hello";
a1 = b1;
console.log(a1);

let n = null;
n = 12;
console.log(n);

//同类型权重的数据不能互相赋值（特殊情况：null和undefined可以互相赋值）；
//null和undefined可以互相赋值
let t = null;
t = undefined;

void类型可以赋值为null和undefined。其它类型不行
any类型

any类型可以赋值为任何类型的数据，但是，类型依然是any类型

8、ts变量作用域

8.1、全局作用域(项目)

​ 在一个项目目录下，所有文件的变量都暴露在全局

8.2、 模块作用域(文件)

​ 变量封闭在模块内部，在内部全局使用。所以，只有 在文件内部使用了export（export default）就会让全局变量变成模块作用域。

如：

let temp:number; //定义变量，作用域范围是当前文件（模块）
temp = 12;

export {};

8.3、函数作用域，块级作用域等

9、类型推论

定义变量时，没有明确的指定数据类型，ts会依照值推断出一个类型。

let a = "hi"; //虽然没有明确类型，但是ts推论出a变量是字符串类型
a=200; //这句话不能通过

10、联合类型

一个变量的取值可以是多种类型。

如：
let temp: string | number; //表示temp变量的取值可以是string，也可以是number

temp = 12;//没有问题
temp = "hi";//没有问题
temp = false;//不行。

11、对象类型

对象的类型使用class或者接口来描述，也可以使用type定。class我们已经学过，接口如何使用

接口的定义，就是为了描述对象。

1、interface

//定义类型（自定义类型）
//格式
interface 接口名{
    键:类型。
}

//还记得nodejs中的那个schema吗。

interface IPerson{
    name:string,//必须的属性值
    readonly sex:string|number, //只读,联合类型
    age?:number//可选的属性值 
}

let p1:IPerson={
    name:"张三疯",
    sex:"男",
    // wife:"梅超风" //不行，我们定义的p1类型IPerson里没有wife
};

p1.name="张四疯";
// p1.sex="女";//不行，不能改
p1.age = 12; //没有问题
// p1.wife ="梅超风"; //这句话在编译时会报错，因为，我们定义的p1类型IPerson里没有wife

console.log(p1);
    
    

    

2、type

type IPerson={
    name:string,
    sex:string|number,
    age?:number
}

12、数组元素的类型

// 变量:类型[] 
// 变量:Array<类型>   //等价于： 变量:类型[]
// let 变量:(类型名|类型名2)[]

let arr:number[]=[1,2,3,4]

let arr2:(number|string)[]=['aa',12]

let arr3:Array<number>=[12,3]   

13、函数中的类型限制

对函数的限定，能够限定形参的类型，返回值的类型。

形参：输入

返回值：输出

即：函数的限定就是限定它的输入和输出

//声明式
//注意：下面的代码是定义函数
//function 函数名(参数:类型):返回类型{函数体}
function sum(x:number, y:string):number {
    
}

//函数表达式
//注意：下面的代码是定义函数类型
//定义函数类型，不赋值
//let 变量:输入类型 => 输出类型 

// 1、定义一个变量show3，show3是函数类型
let show3:(m:number,n:string,a?:string)=>number;

// 2、给变量show赋值（相当于定义函数）
show3 = function(t:number,s:string){
    return t;
}
// 3、调用函数
let b = show3(12,"23","12");



//函数表达式
//定义的同时赋值
//let 变量:输入类型 => 输出类型 = function(参数){}
let show3:(a:number,b:string,c?) => number = function (a,b){
  return a;
}



//接口定义函数类型(自定义类型)
interface Func {
    (a:number,b:string):boolean
  }

let show5:Func = function(a:number,b:string){
    return true;
}

show5(12,"hi");


// void类型修饰函数返回值时，表示函数不能有任何返回值
function fn():void{
    return "hi"; //出错
}

可选参数必须写在参数列表的最后

14、类型断言

绕过编译器的类型推断，手动指定一个值的类型

格式：
1）、<类型>变量
2）、变量 as 类型

(<string>a).length   //断言字符串
(a as string).length //断言字符串

如：
function fn(a:string|number):boolean{
    //a.length; 这么写是错的，因为，a的取值有两种可能性，length没法直接使用，会报错
    // 使用断言，就不会报错
    
    let n:number = (<string>a).length;  //当a是string时，使用length属性。如果是number，不会给n赋值。那么，n是undefined，
    
    console.log(n);
    return <boolean>0;//这是不对的，因为，类型断言不做类型转换
}

fn("hello"); //5
fn(120);//undefined

类型断言的注意点：

1）、类型断言不做类型转换
2）、自定义类型也可以用来做断言
3）、权重最低

15、类

在TS中，不支持es6类的写法。支持es7类的写法。

class Person{
    constructor(){
        //声明了一个属性，并且赋值
        this.name = "张三疯";//这不行了，这是es6的写法
    }
}


class Person{
    //声明一个属性name，并且赋初值。
    name = "张三疯";//这可以，es7的写法
    
    constructor(){
    }    
    
}

es7类的写法：

class Person{
    //声明实例属性
    name1="张三疯"; //定义属性name，值为 张三疯
    age:number;//age属性没有赋值

    //实例方法
    show(){
        console.log(this.name1,this.age);
    }
    //构造函数
    constructor(name,age){
        //赋值
        this.name1 = name;
        this.age = age;
    }

    //静态属性(类的属性)
    static count=0;
    
    //静态方法（类的方法）
    static max(){
        return 110;
    }    
}


let p = new Person("张三疯","男");
p.show();

console.log(Person.count);
console.log(Person.max());

ES7类的访问控制符

控制类内部的属性(实例，类)|方法(实例，类) 的被访问权限

//public   公共的，谁都可以访问(类内、外)，默认就是public
//private  私有的，当前类内使用
//protected  受保护的，当前类内部+子类内部可以使用。

class Person {

  public namee:string='张三丰';//实例属性
  private age:number; //私有的，只能当前类内部使用
  protected address:string; //受保护的，当前类内部及其子类内部
  address2:string; //不加的情况下 是public

  protected static VER:string='1.11.1' //类属性 静态属性
	
	constructor(namee:string,age:number){
	   	this.namee = namee;//实例属性第一次的修改
    	this.age = age||0;//实例属性第一次的修改
  }

  private show(){}   //私有的实例方法
  private static show2(){} //私有的类方法（静态方法）
}

16、泛型

在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

其实就是，把类型也当作变量（类型是可变的，未知的），再使用时，把类型变量放在<> 里，表示类型的声明。

函数泛型

//定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}

//如： function 函数<T>(length: number, value: T): Array<T> {}；其中T就是类型的变量名

//调用 函数<string>(参数) //给变量T赋值为string。

//栗子

function fn<T>(a1:T,a2:T):Array<T>{
    return [a1,a2];
}

console.log(fn<number>(12,23));

console.log(fn<string>("hello","world"));

console.log(fn<number>("hello","world")); //这个不行，因为，要求T 是number类型，而传入的参数"hello"是string类型。

类泛型

//定了了Person类，并声明了两个类型T和U。
class Person<T,U>{
    p1:T; //属性p1的类型是T
    p2:U; //属性p2的类型是U


    constructor(p1:T,p2:U){
        this.p1 = p1;
        this.p2 = p2;
    }

    show():void{
        console.log(this.p1,this.p2);
    }
    
}
//实例化时，给T赋值为string，U赋值为number
let p = new Person<String,number>("hello",2);
p.show();