TypeScript五分钟速成

1.类型约束

介绍：为了避免给字符串类型分配一个数值，则整个针对字符串相关的操作都是错误的

//1.类型推断，不建议使用
let str1 = "abc"; // 推断 str 为字符串类型
str1 = 10; //报错，不能将数值赋值给字符串类型

//2.类型注解，建议使用
let str2: string = "abc"; // 推断 str 为字符串类型
str2 = 10; //报错，不能将数值赋值给字符串类型

//3.类型断言
let numArr = [1, 2, 3];
const result = numArr.find((item) => item > 2) as number;
result * 5;
//ts比较严谨，若 result 为未定义的时候，则不能与 5 相乘，所以报错（在js中可以）
//所以加上 as number 来约束 result 的类型

2.基础类型和联合类型

let v1: string = "abc";
let v2: number = 10;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;
//联合类型：v4 只能被分配 string 和 null 类型
let v4: string | null = null;
let v5: 1 | 2 | 3 = 2;

3.数组

//数组的类型约束
let arr1: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b", "c"];

4.元组

功能：指定数组的元素个数和每个元素的类型

let t1: [number, string, number?] = [1, "a", 2];
//'?'为可选项，该位置可不填，但是填了之后也只能是对应的类型

5.枚举

//定义
enum MyEnum {
 A,
 B,
 C,
}

//访问
console.log(MyEnum.A);
console.log(MyEnum[0]);

//输出
0 
"A" 

6.函数

function MyFn1(a: number, b: string): string {
 return a + b;
}
//a 和 b 规定了约束了参数的类型
//():string 约束了返回值的类型。可以为 void 表示函数无返回值

function MyFn2(a: boolean, b = 10, c?: string, ...rest: number[]): boolean {
 return a;
}
//b 和 c 都为可选项
//b 不填则默认为 10，c 不填默认没有
//...rest 为剩余参数，且剩余值为一个数组结构，则可对其进行约束，为...rest: number[]
//注意，必选参数在左，可选参数在右，否则报错

//使用
const f: boolean = MyFn2(true, 20, "zx", 1, 2, 3, 4, 5);
console.log(f);

//输出
true 

7.接口

//正常定义对象类型
const obj = {
 name: "xiaomin",
 age: 15,
};

//使用接口
interface obj {
 name: string;
 age: number;
};

//使用该接口来定义对象
const obj: obj = {
 name: "a",
 age: 10,
};

8.类型别名

//若很多参数都需要定义约束类型
let a: string | number = 10;
let b: string | number = 20;
let c: string | number = 30;

//则使用类型别名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 20;
let c: MyType = 30;

9.泛型

功能：若一个函数是比较通用的函数，如下面的函数，想让他处理一组字符串、布尔类型、数值类型，则可以使用泛型

//对函数定义泛型
function myFn<T>(a: T, b: T, ...r: T[]): T[] { //这里的T可以是任意变量名，如Q、P
 return [a, b, ...r];
}

//使用
//也可以 const arr = myFn(1, 2, 3, 12, 3); 因为 ts 支持类型推断
const arr: number[] = myFn<number>(1, 2, 3, 12, 3);
console.log(arr);

//输出
[1, 2, 3, 12, 3] 

10.函数重载功能

//函数重载功能
function hello (value: string | number) : string {
    if (typeof value === 'string') {
        return 'my name is: ' + value
    } else if (typeof value === 'number') {
        return 'My age is: ' + value;
    } else {
        return "no accepet"
    }
}

console.log(hello(18))
console.log(hello("qq"))

11.接口继承操作

//接口继承操作

interface Parent {
    prop1: string,
    prop2: number
}

interface Child extends Parent {
    prop3: string
}

const myObj: Child = {
    prop1: '',
    prop2: 1,
    prop3: ''
}

typescript命令创建配置文件: tsc --init

12.类的基本定义操作(其实和java差不多)

class Article {
  public title: string;
  content: string;
  aaa?: string;
  bbb = 100;

  private tempData?: string; //只能在Article里被访问，不能通过a.tempData访问，子类也不可以
  protected inneraData?: string; //只能在当前类的内部或者其子类内部访问

  static author: string; //静态变量，直接调用Article.author
  //叠甲，加了readonly就不可修改
  private static readonly au: string = "aa";

  constructor(title: string, content: string) {
    this.title = title;
    this.content = content;
  }
}

const a = new Article("标题", "cont");

class B extends Article {
  constructor(title: string, content: string) {
    super(title, content);
    this.inneraData;
  }
}

class User {
  private _password: string = "";
  get password(): string {
    //get属性可以直接获取值
    return "*****";
  }

  set password(newPass: string) {
    //set属性为设置方法
    this._password = newPass;
  }
}

const u = new User();
console.log(u.password); //可以访问
console.log(u._password);//不可访问

//abstract抽象类，不具有实例，是用来规范格式的
//抽象成员，只能在抽象类中使用，子类不能自动继承，每次都要在子类中定义对应的成员
abstract class Animal {
  abstract name: string;
  abstract maskSound(): void;
  move(): void {
    //非抽象类，子类可以自动继承
    console.log("move!!");
  }
}

class Cat extends Animal {
  name: string = "小猫"; // 必须写，不然报错
  maskSound(): void {} // 必须写，不然报错
}

13.类实现接口

接口与抽象类的区别是，一个类可以同时实现多个接口，但只能继承一个抽象类

interface Animal {
  name: string;
  get sound(): string;
  makeSound(): void;
}

interface B {
  age: number;
}

class Dog implements Animal, B {
  name: string = "小狗";
  get sound() {
    return "";
  }
  makeSound(): void {}
  age: number = 11;
}

14.泛型类

interface Animal {
  name: string;
  get sound(): string;
  makeSound(): void;
}

interface B {
  age: number;
}

class Dog implements Animal, B {
  name: string = "小狗";
  get sound() {
    return "";
  }
  makeSound(): void {}
  age: number = 11;
}

class MyClass<T> {
  public value: T;
  constructor(value: T) {
    this.value = value;
  }

  do(input: T): T {
    console.log("处理数据", this.value);
    return input;
  }
}

const myStr = new MyClass<string>("hello");
//myStr.do(1) //因为用了泛型，上面初始赋了hello是字符串类型，T就作为字符串类型，不能传如数字，会报错
myStr.do("aaa"); //不会报错