typescript

造轮子+react+ts+hook+ant

什么是typescript？

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。从es6到es10甚至是esnext的语法支持。兼容各种浏览器，各种系统，各种服务器，完全开源。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数

为什么要使用typescript？

1 程序更容易理解

问题：函数或者方法输入输出的参数类型，外部条件等。

动态语言的约束：需要手动调试等过程

有个ts：代码本身就可以回答上诉问题。

2 效率更高

在不太的代码块和定义中进行跳转

代码自动补全

丰富的接口提示

3 更少的开发阶段的错误

编译期间能够发现大部分错误

杜绝一些比较常见的错误

4 非常好的包容性

完全兼容js

第三方库可以单独变法类型文件

流行项目都支持ts-react、vue。angular、ant design等

缺点：

增加了一些学习成本

短期内增加了一些开发的成本

安装和初识ts

node -v

npm -v

tsc -v

npm install -g typescript

tsc hello.ts

基础类型-基本数据类型

TypeScript 包含的数据类型如下表：

任意类型： any 声明为 any 的变量可以赋予任意类型的值。

let x：any

let x: number | null | undefined; // 联合类型

数字类型： number 双精度 64 位浮点值。它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制 0b
let octalLiteral: number = 0o744;    // 八进制 0o
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制 0x

字符串类型：string 一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

布尔类型：boolean 表示逻辑值：true 和 false

let flag: boolean = true;

数组类型：声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

类数组

function test(){
  console.log(arguments)
  // arguments 就是类数组，但是不具备数组的接口和方法，也不能声明为数组
}

元组：元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

枚举： enum 枚举类型用于定义数值集合

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

enum Direaction {up, down, left, right};
let c: Direaction = Direaction.Blue;
let D: Direaction = Direaction[0];
 
//常量枚举
enum Direaction {
Up='up',
down='down',
left='left'
};
const value = 'up'
if(value === Direaction.Up){
  console.log('go up')
}

void： void 用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}

null： null 表示对象值缺失

undefined： undefined 用于初始化变量为一个未定义的值

// 启用 --strictNullChecks
let x: number | null | undefined; // 联合类型
x = 1; // 运行正确
x = undefined;    // 运行正确
x = null;    // 运行正确

never： never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：

let x: never;
let y: number;

// 运行错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

基础类型-对象数据类型

interface 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

对对象的形状（shape）进行描述

对类（class）进行抽象

duck typing（鸭子类型）像鸭子一样游泳 走路 鸭子叫

TypeScript 接口定义如下：

interface interface_name { 
    name?: string; // 加? 是代表这个属性 可有可无
    readonly id:number; //id这个属性是只读的,不可以再修改值
    age:number;
}

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

联合类型和接口

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] // 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

单接口继承语法格式：

Child_interface_name extends super_interface_name

单继承实例

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

编译以上代码，得到以下 JavaScript 代码：

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

多继承实例

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

TypeScript 函数

function function_name():return_type { 
    // 语句
    return value; 
}

return_type 是返回值的类型。

return 关键词后跟着要返回的结果。

一般情况下，一个函数只有一个 return 语句。

返回值的类型需要与函数定义的返回类型(return_type)一致。

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数和默认参数

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

以下实例，我们将 lastName 设置为可选参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。

默认参数

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

剩余参数

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

匿名函数

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

匿名函数自调用

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

箭头函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

TypeScript 类

类（class）:定义了一切事物的抽象特点

对象（object）：类的实例

面向对象（oop）三大特性：封装 继续 多态

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：

class child_class_name extends parent_class_name

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

需要注意的是子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承，如下实例：

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用，跟new的实例无关。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

instanceof 运算符 instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

readyonly： 只读

public（默认） : 公有，可以在任何地方被访问。

protected : 受保护，可以被其自身以及其子类和父类访问。

private : 私有，只能被其定义所在的类访问。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

implements 将两个类中相同的部分提取出来

class Car {
  switchRadio() {}
}
class Cellphone(){
implements
}

//转成

interface A {
 switchRadio():void;
}

interface B {
 checkBattery():void;
}

interface Radio extend B{

}

class Car implements A{
  switchRadio() {}
}
class Cellphone implements A,B {
switchRadio(){}
checkBattery(){}
}

泛型

首先解决的是什么问题：我们在调用一个函数的时候，传递的参数是数字，函数返回的值也是数字，但是在调用的时候定义的类型是string

function echo (arg:number):any {
  return arg;
}

const result:string = echo(123);

// 希望可以明确返回的是什么类型，在使用的时候指定

泛型回根据值来判断是什么数据类型

// T 会根据调用函数的时候传递的参数的数据类型来自动判断
function echo<T> (arg:T):T {
  return arg;
}

const result = echo(123); // result就是number类型

// T 会根据调用函数的时候传递的参数的数据类型来自动判断
function swap<T, U> (arg:[T,U]):[U,T] {
  return [arg[1], arg[0]];
}

const result = swap(['string', 123]); // result就是[numer, string] 类型

// 约定泛型，比如是数组的形式，等有length属性的

function echo<T>(arg:T[]):T[]{
  console.log(arg.length)
  return arg
}
const arrs = echo([1,2,3])
// 约定泛型 通过接口的形式,duck type 只有传递的参数有length就可以满足条件
interface IwithLength{
  length:number
}
function echo<T extends IwithLength>(arg: T): T{
  console.log(arg.length);
  return arg;
}

const result = echo(['string', 123]);
const result = echo({length: 10});
const result = echo('str);

class和interface 也是同样可以使用泛型

// class



interface keyPair<T,U>{
  key: T;
  value: U
}

let kpi: keyPair<number, string> = {key:123, valur: '11'}

let kpi: keyPair<string, number> = {key:'555', valur: 11}

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

let arrt: Array<number> = [1,2,3]

使用interface描述函数的类型

interface Iplus{
  (a:number, b:number):number
}

function plus(a:number, b:number):number{
  return a+b;
}

const a:Iplus =plus

// t根据函数的传值判断
interface Iplus<T>{
  (a:T, b:T):T
}

function plus(a:number, b:number):number{
  return a+b;
}
function plus(a:string, b:string):string{
  return a+b;
}
const a:Iplus<number> =plus
const a:Iplus<string> =plus

类型别名

type PlusType = (x:number, y:number) => number

function sun(x:number, y:number):number{
  return x+y;
}

const sum2:PlusType = sum;

type NameSolve = () => string;
type NameResolve = string | NameSolve

finction getName (n: NameResolve):string{
  if (typeof n === 'string'){
   return n;
  }else{
    return n()
  }
}

类型断言 as

function getlength(input:string | number):numer{
// 如果肯定知道自己的类型是什么可以直接使用as
// 方法1
const str = input as String;
if(str.length){
 return str.length;
}else{
  const number = input as Number
  return number.toString().length
}

// 方法2
if((<string>input).length){
    return （<string>input).length
}else{
  return input.toString().length
}
}

声明文件

jquery.d.ts

declare var jquery:(selector:string) => any