typescript笔记总结

typescript

官网

介绍

​ TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，让javascript变成强类型语言。它由 Microsoft 开发，代码开源于 GitHub 上。

特点

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

痛点

​ 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的东西短期可能会增加一些开发成本，多写一些类型的定义，长期维护的项目，TypeScript 能够减少其维护成本

安装

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

编译

编译所完成的事情，就是把ts的代码转换成js的代码。因为浏览器或者node环境最终识别的是js，而不是ts。

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

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

使用步骤：

1、新建test.ts
    随便写上一些代码，js的代码就行（因为ts完全支持js）
2、使用命令：tsc  test.ts 把ts编译成js
    在当前目录下就会产生一个test.js文件。
3、新建html文件，引入test.js文件，就ok了。

编辑器推荐使用vscode，因为，vscode对ts的提示非常好。

类型

原始类型

js里本来就有的(基本)类型：布尔值、数值、字符串、null、undefined、Symbol，boolean，number

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

内置对象类型

DOM

Document、HTMLElement、NodeList …

内置类

Boolean、Error、Date、RegExp、Math …

类型注解

变量的注解：

基本语法：

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

如：

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

let str:string = "hello";

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

类型权重
	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类型

ts变量作用域

全局作用域(项目) 默认

​ 在一个项目目录下，所有文件的变量都暴露在全局。整个项目中不能在多个文件里使用同名的全局变量

如：
a.ts

let nn:number = 100;

b.ts

let nn:number = 100; //这不行，因为a.ts已经有全局变量 nn。

模块作用域(文件)

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

如：

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

export {};

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

类型推论

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

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

联合类型

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

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

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

对象类型

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

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

//格式
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)[]
// 变量:Array<类型> 

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

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

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

函数中的类型

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

形参：输入

返回值：输出

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

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

//函数表达式
//注意：下面的代码是定义函数类型
//定义函数类型，不赋值
//let 变量:输入类型 => 输出类型 
let show3:(a:number,b:string,c?) => number;

//函数表达式
//定义的同时赋值
//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,b){return false}

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

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

类型断言（断定）

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

格式：
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是字符串类型，那么用length求值；是数字类型不求值。
    
    console.log(n);
    return <boolean>0;//这是不对的，因为，类型断言不做类型转换
}

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

类型断言的注意点：

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

类

不支持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;
    }    
}

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

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

访问控制符

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

//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(){} //私有的类方法（静态方法）
}

泛型

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

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

函数泛型

//定义 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类型。

补充理解函数的泛型

如：

function fn(){

}

你可以认为，函数的名字不是fn，而是 fn。其中T是个变量。

调用时：

fn(); // string就传给T。

类泛型

//定了了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();