为什么要用typeScript

1. ts 能带来什么好处？

• 静态类型能够在开发的时候发现潜在的问题

1. 定义了函数，但是忘记传递参数，做一个书写时的校验 2. 编写时更友好的提示 3. 更好的可读性

2 .对类型的理解

• 基础类型 number, string, null, undefined, symbol, boolean, void

  const count: number = 123;  
  const username: string = 'liuliu'
  

• 对象类型

  const user: {
    name: string;
    age: number;
  } = {
    name: 'spock',
    age: 10,
  };
  
  // 数字组成的数组
  const numbers: number[] = [1, 2, 3];
  
  // 类 ：spock类必须是Person 类的实例
  class Person {}
  const spock: Person = new Person();
  
  // 函数：getTotal是一个函数，并且函数的返回值是number类型
  const getTotal: () => number = () => {
    return 123;
  };
  

  • 类型注解和类型推断

  类型注解： 定义的时候声明total变量的类型是number

  let total: number;
  total = 10;
  

  类型推断： ts会尝试分析变量的类型
  

• 函数的返回值

void： 函数没有返回值

function sayHello(): void {
  console.log('没有返回');
}

never: 函数不会执行到最后

function errorEmitter(): never {
  throw new Error();
  console.log('Error后面的代码不会再执行');
}

对于函数的参数解构的写法: add 函数中两个解构的参数类型的指定以及函数的返回值类型

function add({ first, second }: { first: number; second: number }): number {
  return first + second;
}
const sum = add({ first: 1, second: 2 });

• 函数的两种类型写法

const fun1 = (str: string): number => {
  return parseInt(str);
};

const fun2: (str: string) => number = (str) => {
  return parseInt(str);
};

• 其他case

const date = new Date(); // ts 的类型会推断出date

interface Person {
  name: string;
}
const rowData = '{"name":"memo"}';
const rowData1: Person = JSON.parse(rowData); // parse 在ts无法推断出是什么类型

let temp: number | string = 233; // 一个变量接受多个类型
temp = 'momo';

3. 数组和元祖

• 数组

//  数组中的元素都是数字
const arr: number[] = [1, 2, 3];

// 数组中有数字也有字符串
const arr1: (number | string)[] = [1, '2', 3];

// type alias类型别名
//对象数组类型的注解： 数组中的每一个对象都必须包含name 和 age 属性
type User = { name: string; age: number };
const objectArr: User[] = [
  {
    name: '233',
    age: 20,
  },
];

• 元祖 tuple

// 数组中的每一项值都是固定的 并且类型也是一一对应的
const teacherInfo: [string, string, number] = ['dell', 'male', 23];
//  用于读取csv或者excal文件时
const teacherList: [string, string, number][] = [
  ['dell', 'male', 23],
  ['lola', 'female', 23],
];

4. interface 接口

interface 和type的区别： interface ，type都可以代表一个对象、函数；type 还可以表示基础类型、元祖

// 能用interface 就用interface

type Person1 = string;
type Person2 = {
  name: string;
};

interface Person3 {
  name: string;
}

interface Person {
  // readonly name: string; // 设置属性只读
  name: string;
  age?: number; // 选填
}

const setPersonName = (person: Person, name: string): void => {
  person.name = name;
};
const person = {
  name: 'ddll',
  sex: 'male',
};

setPersonName(person, '233');

// 引发错误的写法（error: ）未声明类型的变量直接对象传递会报错
// note: 字面量的形式 ts会做强校验
setPersonName({
  name: 'ddll',
  sex: 'male', // sex 属性没有声明
}, '233');

多余未知参数的写法

interface Person {
  // readonly name: string; // 设置属性只读
  name: string;
  age?: number;
  [propName: string]: any; // 接受定义的任意类型,额外的属性
}

当添加一个方法时，person中也需要添加该方法

interface Person {
  // readonly name: string; // 设置属性只读
  name: string;
  age?: number;
  [propName: string]: any;
  say(): string;
}

const setPersonName = (person: Person, name: string): void => {
  person.name = name;
};
const person = {
  name: 'ddll',
  sex: 'male',
  say() {
    return 'sya hello';
  },
};
setPersonName(person, '233');

一个类 去应用一个接口的写法

interface Person {
  // readonly name: string; // 设置属性只读
  name: string;
  age?: number;
  [propName: string]: any;
  say(): string;
}
// 需要name属性 和 say 方法
class User implements Person {
  name: 'nn';
  say() {
    return 'hello';
  }
}

接口可以做继承

interface Person {
  // readonly name: string; // 设置属性只读
  name: string;
  age?: number;
  [propName: string]: any;
  say(): string;
}

interface Teacher extends Person {
  teach(): string;
}

const person = {
  name: 'ddll',
  sex: 'male',
  say() {
    return 'say hello';
  },
  teach() {
    return 'say teach';
  },
};
const getPersonName = (person: Teacher): void => {};
getPersonName(person);

接口定义函数

//  sayHi 函数接受一个word的字符串，并且返回字符串
interface SayHi {
  (word: string): string;
}

const say: SayHi = (word: string) => {
  return word;
};

5. class 继承

super 的一个作用： 将父类的方法重写之后，还需要调用父类的方法，则可以通过super调用

class Person {
  getName() {
    return 'lee';
  }
}
// 类的继承
class Teacher extends Person {
// 类的重写
  getName() {
    return super.getName() + 'jqq'; // 调用父类的方法
  }
}

const teacher = new Teacher();
console.log(teacher.getName()); // leejqq

6. private、public、protected、static 访问类型

private：只允许在类内部调用
public：允许在类内外部被调用
protected：允许在类内部和继承的子类中使用

static：把这个方法挂在类上面，而不是实例上

class Person {
  private name: string;
  public sayHi() {
    this.name;
  }
}
class Teacher extends Person {
  sayAge() {
    this.age;
  }
}

const person = new Person();
// person.name = '233' // 无法赋值
person.sayHi(); // 可以正常调用

7. constructor

class Person {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person('deee');
console.log(person.name); // deee

------------------------------------
// 简化写法
class Person {
  // public name: string;
  constructor(public name: string) {
    // this.name = name;
  }
}
------------------------------------

constructor ：在new 一个实例的时候就会被执行

class Person {
  constructor(public name: string) {}
}

class Teacher extends Person {
  constructor(public age: number) {
    super('dlll');
  }
}
// super调用父类的构造函数 并且需要传递相对应的参数

const teacher = new Teacher(20);
console.log(teacher.name); // dllll
console.log(teacher.age); // 20

9 . setter 、getter

可以用于对私有变量的保护

class Person {
  constructor(private _name: string) {}
  //  get 的方式暴露private的变量，加密后输出
  get name() {
    return this._name + ' 233';
  }
  set name(name: string) {
    const realName = name.split(' ')[0];
    this._name = realName; // djjj
  }
}

// 传入的是变量djjj 但是输出的时候是通过get 运行后获取的数据
const person = new Person('djjj');
console.log(person.name); //djjj 233
// 这里调用set 方法赋, 只取了前面一部分，后面获取的值还是通过get 去暴露出来的数据
person.name = 'djjj 233';
console.log(person.name); //djjj 233

10 . 单例模式

一个类只允许获取这个类的一个实例。
static： 把这个方法挂在类上面，而不是实例上

class Demo {
  private static instance: Demo;
  private constructor(public name: string) {}

  //  通过这个方法 只能生成一个实例
  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo('djjj 233');
    }
    return this.instance;
  }
}

const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
console.log('demo1:', demo1.name); // djjj 233
console.log('demo2:', demo2.name); // djjj 233

11 . 抽象类 abstract

抽象类只能继承，不能被实例化

// 抽象类
abstract class Gemo {
  width: number;
  abstract getArea(): number;
}

class Circle extends Gemo {
  // 该方法是抽象方法，继承的子类需要定义
  getArea() {
    return 123;
  }
}

interface接口 对通用性的属性做一个继承

interface Person {
  name: string;
}
// Teacher | Student 都有name属性
interface Teacher extends Person {
  teachingAge: number;
}
interface Student extends Person {
  age: number;
}
const teacher = {
  name: 'djjj',
  teachingAge: 3,
};
const student = {
  name: 'cddd',
  age: 20,
};

const getName = (user: Person) => {
  console.log(user.name);
};

getName(teacher);
getName(student);

12 . tsc 编译打包操作

1. 打包命令
   在package.json 文件中

"scripts": {
    "dev": "ts-node ./src/crowller.ts",
    "build": "tsc -w", // -w 可以在执行build操作的时候监听文件的修改，自动打包
  },

2. 输出打包位置
   可以在 tsconfig,json 文件下，修改 "outDir": "./build"，这样就会将打包的ts文件输出到根目录的build文件夹中

👵