TypeScript onePage#

1let name: string | undefined; // 联合类型
2// name.的时候没有提示了
3if (typeof name === "string") {
4  // name.  确定为string出现提示了
5}
6//即类型保护

1type Gender = "男" | "女";
2type User = {
3  name: string;
4  age: number;
5  gender: Gender;
6};
7let u: User;
8
9u = {
10  name: "ads",
11  gender: "男",
12  age: 34,
13};
14
15function getUsers(g: Gender): User[] {
16  return [];
17}
18getUsers("女");

1function combine(a: number, b: number): number;
2function combine(a: string, b: string): string;
3function combine(a: number | string, b: number | string): number | string {
4  //两个数字，相乘返回；
5  //两个字符串，拼接返回
6  if (typeof a === "number" && typeof b === "number") {
7    return a * b;
8  } else if (typeof a === "string" && typeof b === "string") {
9    return a + b;
10  }
11  throw new Error("a和b必须是相同类型");
12}
13const result1 = combine(1, 2);
14const result2 = combine("1", "2");

1enum Gender {
2  male = "男",
3  female = "女",
4}
5let gender = Gender.male;
6
7function printGenders() {
8  const vals = Object.values(Gender);
9  vals.forEach((v) => console.log(v));
10}
11printGenders();

1enum Level {
2  level1 = 1, //不赋值就是0，后面依次递增
3  level2,
4  level3,
5}
6let l: Level = Level.level1;
7l = Level.level2;
8console.log(l); //2

1enum Permission {
2  // 通过2进制位上的标识确定权限
3  Read = 1, //2^0   0001
4  Write = 2, //2^1  0010
5  Create = 4, //2^2 0100
6  Delete = 8, //2^3 1000
7}
8//3 == 0011 可读，可写
9// 1. 如何组合权限:    |:或运算
10// let p1 = Permission.Read | Permission.Write;
11let p2: Permission = Permission.Read | Permission.Write;
12
13// 2. 如何判断是否拥有某个权限
14
15function hasPermission(target: Permission, per: Permission) {
16  //target里面包不包含per
17  return (target & per) === per; //且运算
18}
19// 判断变量p2是否拥有可读权限
20hasPermission(p2, Permission.Read);
21
22// 3. 如何删除某个权限
23
24p2 = p2 ^ Permission.Write; //异或（两个位置相同取0不同取1）

1export default {
2  name: "kevin",
3  sum(a: number, b: number) {
4    return a + b;
5  },
6};

1interface User {
2  name: string;
3  age: number;
4}
5// 和类型别名的区别:约束类
6/* type User = {
7    name:string,
8    age:number
9} */
10let u: User = {
11  name: "abc",
12  age: 19,
13};

1interface User {
2  name: string;
3  age: number;
4  // 书写方式1    sayHello:() => void
5  // 书写方式2    sayHello():void
6  // 和类型别名一样，接口，不出现在编译结果中,所以不能写函数实现
7  sayHello(): void;
8}
9let u: User = {
10  name: "abc",
11  age: 19,
12  sayHello() {
13    console.log("asda");
14  },
15};

1type Condition = (n: number) => boolean;
2
3function sum(numbers: number[], callBack: Condition) {
4  let s = 0;
5  numbers.forEach((n) => {
6    if (callBack(n)) {
7      s += n;
8    }
9  });
10  return s;
11}
12const result = sum([3, 4, 5, 6, 7], (n) => n % 2 !== 0);
13console.log(result);

1interface Condition {
2  (n: number): boolean;
3}
4
5// 可以这样写
6/* type Condition = {//定界符
7    (n:number):boolean
8} */
9
10function sum(numbers: number[], callBack: Condition) {
11  let s = 0;
12  numbers.forEach((n) => {
13    if (callBack(n)) {
14      s += n;
15    }
16  });
17  return s;
18}
19const result = sum([3, 4, 5, 6, 7], (n) => n % 2 !== 0);
20console.log(result);

1interface A {
2  T1: string;
3}
4interface B extends A {
5  //接口B里面有A里面所有成员
6  T2: number;
7}
8let u: B = {
9  T2: 33,
10  T1: "ab",
11};

1interface A {
2  T1: string;
3}
4interface B {
5  T2: number;
6}
7interface C extends A, B {
8  T3: boolean;
9}
10let u: C = {
11  T2: 33,
12  T1: "abc",
13  T3: true,
14};

1type A = {
2  T1: string;
3};
4type B = {
5  T2: number;
6};
7type C = {
8  T3: boolean;
9} & A &
10  B;
11
12let u: C = {
13  T2: 123,
14  T1: "abc",
15  T3: true,
16};

1interface Duck {
2  sound: "嘎嘎嘎";
3  swin(): void;
4}
5let person = {
6  name: "伪装成鸭子的人",
7  age: 11,
8  //sound: "嘎嘎嘎",这里需要类型断言，因为这里的sound:嘎嘎嘎是string,但是要求sound是嘎嘎嘎字面量
9  sound: "嘎嘎嘎" as "嘎嘎嘎",
10  swin() {
11    console.log(this.name + "正在游泳，并发出了" + this.sound + "的声音");
12  },
13};
14let duck: Duck = person; //这个结构满足鸭子的特征，所以可以赋值了

1interface Condition {
2  (n: number, i: number): boolean;
3}
4
5function sum(numbers: number[], callBack: Condition) {
6  let s = 0;
7  for (let i = 0; i < numbers.length; i++) {
8    const n = numbers[i];
9    if (callBack(n, i)) {
10      s += n;
11    }
12  }
13  return s;
14}
15// const result = sum([3, 4, 5, 6, 7], n => n % 2 !== 0);
16// const result = sum([3, 4, 5, 6, 7], (n, i) => i % 2 !== 0);
17// console.log(result);

1class User {
2  name: string;
3  age: number;
4  gender: "男" | "女";
5  constructor(name: string, age: number, gender: "男" | "女" = "男") {
6    this.name = name;
7    this.age = age;
8    this.gender = gender;
9  }
10}
11const u = new User("abc", 19);

1class User {
2  name: string;
3  age: number;
4  gender: "男" | "女" = "男";
5  constructor(name: string, age: number) {
6    this.name = name;
7    this.age = age;
8  }
9}
10const u = new User("abc", 1);
11u.gender = "女"; //可改

1class User {
2  readonly id: number;
3  name: string;
4  age: number;
5  gender: "男" | "女" = "男";
6  pid?: string;
7  constructor(name: string, age: number) {
8    this.id = Math.random();
9    this.name = name;
10    this.age = age;
11  }
12}

1class User {
2  name: string;
3  age: number;
4  gender: "男" | "女" = "男";
5  publishNumber: number = 3; //每天一个可以发布多少文章
6  curNumber: number = 0; //当前可以发布的文章数
7  constructor(name: string, age: number) {
8    this.name = name;
9    this.age = age;
10  }
11}
12const u = new User("abc", 1);
13u.publishNumber; //不希望外部使用
14u.curNumber; //不希望外部使用
15// JS用Symble

1class User {
2  constructor(public name: string, public _age: number) {}
3  set age(value: number) {
4    if (value < 0) {
5      this._age = 0;
6    } else if (value > 200) {
7      this._age = 200;
8    } else {
9      this._age = value;
10    }
11  }
12  get age() {
13    return Math.floor(this._age);
14  }
15}

1function take(arr: any[], n: number): any[] {
2  if (n > arr.length) {
3    return arr;
4  }
5  const newArr: any[] = [];
6  for (let i = 0; i < n; i++) {
7    newArr.push(arr[i]);
8  }
9  return newArr;
10}
11const newArr = take(["2", 3, 4, 5, 1], 3);
12console.log(newArr);
13// any应该相同

1function take<T>(arr: T[], n: number): T[] {
2  //T依附于函数
3  if (n > arr.length) {
4    return arr;
5  }
6  const newArr: T[] = [];
7  for (let i = 0; i < n; i++) {
8    newArr.push(arr[i]);
9  }
10  return newArr;
11}
12take<number>([1, 2], 2); //调用的时候才知道T的类型

1// 回调函数：判断数组中的某一项是否满足条件
2// type callback = (n: number, i: number) => boolean;
3type callback<T> = (n: T, i: number) => boolean;
4// 封装一个filter
5function filter<T>(arr: T[], callback: callback<T>): T[] {
6  const newArr: T[] = [];
7  arr.forEach((n, i) => {
8    if (callback(n, i)) {
9      newArr.push(n);
10    }
11  });
12  return newArr;
13}
14
15const arr = [3, 4, 5, 2, 1, 6];
16console.log(filter(arr, (n) => n % 2 !== 0));
17
18// 接口
19interface callback<T> {
20  (n: T, i: number): boolean;
21}

1export class ArrayHelper<T> {
2  constructor(private arr: T[]) {}
3  take(n: number): T[] {
4    if (n > this.arr.length) {
5      return this.arr;
6    }
7    const newArr: T[] = [];
8    for (let i = 0; i < n; i++) {
9      newArr.push(this.arr[i]);
10    }
11    return newArr;
12  }
13  shuffle() {
14    for (let i = 0; i < this.arr.length; i++) {
15      const targetIndex = this.getRandom(0, this.arr.length);
16      const temp = this.arr[i];
17      this.arr[i] = this.arr[targetIndex];
18      this.arr[targetIndex] = temp;
19    }
20  }
21  private getRandom(min: number, max: number) {
22    const dec = max - min;
23    return Math.floor(Math.random() * dec + max);
24  }
25}
26const helper = new ArrayHelper([1, 2]); //自动类型推导
27
28helper.take(); //结果是number类型

1interface hasNameProperty {
2  //nameToUpperCase函数只能传递满足此接口的类型
3  name: string;
4}
5/**
6 * 将某个对象name的属性的每个单词的首字母大写，并将该对象返回
7 */
8function nameToUpperCase<T extends hasNameProperty>(obj: T): T {
9  obj.name = obj.name
10    .split(" ")
11    .map((s) => s[0].toUpperCase() + s.substr(1))
12    .join(" ");
13  return obj;
14}
15const o = {
16  name: "kevin",
17  age: 19,
18};
19const newO = nameToUpperCase(o);
20console.log(newO.name);