TypeSctipt学习第二篇

TypeSctipt学习第二篇

 这里是读阮一峰老师的TS文章笔记记录

链接: link

TypeScript主要是类型约束与TS静态自检测。就是写代码的时候就给你排除存在的错误了。
所以Ts就行去设计一些规范按照这些规范来减少错误发生。
JavaSctipt没有的强类型与潜在的问题监测TS加进去了。

1.变量声明

let x:string;变量x的后面使用冒号，声明了它的类型为string。

2.联合类型

let x:string|number;这个变量可以是string或者number.

3.联合类型 可以 直接用值来设置，类似枚举

let setting: true | false;//值可以是true或false
let gender: "male" | "female";
let Color: "赤" | "橙" | "黄" | "绿" | "青" | "蓝" | "紫";值可以是其中一个
    Color="橙";

4.函数参数，返回值规定类型

function toString(num: number,id: number | string): string {这里规定了参数，返回值类型
  return String(num);
}

//函数类型限制
function distanceFromOrigin([x, y]: [number, number]) {}

5.判断参数scheme的类型是http还是https

function getPort(scheme: "http" | "https") {http,https 这是类型
  switch (scheme) {
    case "http":
      return 80;
    case "https":
      return 443;
  }
}

6.交叉类型，同时满足几种类型

let x: number & string;

7.type命令用来定义一个类型的别名。

定义一个类型，用于限制变量的值必须是我定义的类型。
type关键字会给你的类型取一个名字 你后面用它去限制变量就行。

type abc = number;
let age: abc = 55;
type leix1=number | string 联合离线 or
type leix2='男' | '女'     类似枚举

type Area={width:number,heigth:number} 定义一个类型
let a:Area;这个a就是Area类型的
type Address={guojia:string,shenfen:string} 定义一个类型
type houser=Area & Address; 交叉类型
let b:houser={...} 需要同时有以上两个类型

8.判断x的类型

if (typeof x === "string") {...}

9.数组声明

let a:number[]=[1,2,3];一个类
let arr: (number | string)[]=[1,'b',2];数组内多个类型
let arr: Array<number> = [1, 2, 3];泛型，就是可以是自定义的类型
let arr: Array<number | string>[1, 2, 3,'aaa'];;泛型  可以是多种类型
    arr.length = 2;这样可以将只保留前面两个元素在里面，删除其他元素

10.只读数组，不能再去修改它

const arr: readonly number[] = [0, 1];
const arr = [0, 1] as const;
实际上，TypeScript 提供了两个专门的泛型，用来生成只读数组的类型。
const a1: ReadonlyArray<number> = [0, 1];
const a2: Readonly<number[]> = [0, 1];

11.多维数组

TypeScript 使用T[][]的形式，表示二维数组，T是最底层数组成员的类型。

var multi: number[][] = [[1, 2, 3],[23, 24, 25]];

12.元组（tuple）是 Ts 特有的数据类型,

	类型可以自由设置的数组，即数组的各个成员的类型可以不同。
	const s: [string, string, boolean] = ["a", "b", true];
	let a: [number, number?] = [1]; 第二个成员是可选的，可以省略
	元组个数也是严格根据类型个数
	let x: [string, string] = ["a", "b"];
	x[2] = "c";  报错
	但是，使用扩展运算符（...），可以表示不限成员数量的元组
	type NamedNums = [string, ...number[]];//[string, ...boolean[], number];
	const b: NamedNums = ["B", 1, 2, 3];

13.只读元组

// 写法一
type t = readonly [number, string];
// 写法二
type t = Readonly<[number, string]>;

14.数组与元组的区别：数组类型写[]外面

数组:number[]，
元组:[number]

15.三种特殊类型

any //类型表示没有任何限制
unknown //赋值给any和unknown以外类型的变量都会报错
never//什么类型都不是

16.undefined和null既是值，又是类型。

let a:undefined=undefined;

17类 和 类的继承

父类
class person{
  name:string,
  age:number
  constructor(name:string,age:number){构造函数
  this.name=name
  this.age=age
  }
  speak(){
	  console.log(`我叫${this.name},今年${this.age}岁！`)
  }
}
子类，继承
class Student extends person{
  banji:string
  constructor(name:string,age:number,banji:string){
   super(name,age)
   this.banji=banji
  }
   study(){
	  console.log(`我叫${this.name},今年${this.age}岁,我在${this.banji}`)
  }
  Override speak(){...}重写父类方法
}

构造函数简写，修饰符不能丢

class person{
  constructor(public name:string, public age:number){}//不用声明不用this.name=name
  }

类的四种修饰符 ,去修饰属性或方法 访问限制
public‌：默认修饰符，表示公共的，任何位置都可以访问该成员。没有明确指定修饰符时，默认即为public。
‌private‌：表示私有的，只有自身内部可以访问，外部、子类中都无法访问该成员数据。
‌protected‌：表示受保护的，自身内部和子类中可以访问，外部无法访问。
‌readonly‌：表示只读，仅可在构造函数中修改。

class person{
  constructor(private name:string, public age:number){}//不用声明不用this.name=name
  }

抽象类 abstract

不能被实例化，存在的意义就是被继承，有抽象方法，有具体实现方法。

  abstract class car{
      constructor(public pinpai:string){}构造函数
      abstract info():string 抽象方法
      showinfo():void{具体方法
        console.log(${this.pinpai})
      }
   }
 下面继承 实现它
 class toyota extends car{
  constructor(pinpai:string, public color:string){super(pinpai)}子类构造函数
  info():string{ return this.color;}实现抽象方法
}

接口 interface

去约束别的 类，对象 ,函数 的实现方式。

 定义一个接口，继承它的必须有这些属性方法
 interface Iperson{
    name:string,
    age:number
    speak(n:number):void
 }
 定义一个  类   去实现 接口
 Class zhangsan implements Iperson{...里面正常写只要有接口的属性 和方法就行}
 实现多个用逗号隔开

 定义一个接口，继承它的必须有这些属性方法
 interface Iperson{
    name:string,
    readonly sex:number,只读
    age?:number 可选
    speak(n:number)=>void
 }
 定义一个  对象  去实现 接口
 const lisi:Iperson={...里面正常写只要有接口的属性 和方法就行}

 定义一个接口，用来约束函数
 interface IF1{
    (a:number,b:number):number; 参数返回值必须跟这一样
 }
 一个  函数  去实现 接口
 const fun1:IF1=(a,b)=>{
  return a+b;
 }

接口之间的继承 I1 extends I2{...}
使用就是都要满足

泛型

参数类型设计时不知道，调用时候才给类型。

泛型函数

 定义泛型函数，这里不知道参数的类型是什么
 function logshow<T>(data:T){
  console.log(data);
}
logshow<string>("php");现在告诉他传一个字符串

 定义泛型函数，多个参数
 这个方法说我有两个参数，类型都不知道，返回值类型是其中的一个类型
 function logshow<T,A>(data1:T,data2:A):T|A{
  return Date.now()%2?data1:data2;
}
logshow<string,number>("php",20);现在告诉他传一个字符串

泛型接口

 定义一个接口,接口里面需要一个类型，什么类型不知道现在
 interface Iperson<T>{
    name:string,
    readonly sex:number,只读
    age?:number 可选
    info:T
    speak(n:number)=>void
 }
 定义一个对象去实现 接口,现在才给它类型，可以是自定义类型。
 const lisi:Iperson<number>={..    info:100}

泛型类

 定义泛型类
 class person<T>{
  constructor(name:string,age:number,info:T)
  show():string{
    return this.name
  }
}
const obj=new person<string>("php",20,"hello");实例化类的时候告诉它是个string

装饰器

通过方法 类上面加特性 让类有一些其他的功能。