typescript基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：…

---

一、typescript基础环境搭建

1.安装node.js运行环境
2.使用npm安装typescript（npm install typescript -D）
3.使用npm安装ts-node运行命令（npm install ts-node -D）
4.npm init -y 生成 js的配置文件
5.tsc --init 生成ts的配置文件
6(运行命令(tsc/ts-node)记着带上npx)
…

二、typescript基础语法

1.基础类型

代码如下（示例）：

// 基础类型 null, undefined, symbol, void ...
const a: number = 123;
const b: string = 'Dell';
const c: boolean = true;

// 对象类型
interface Person {
    name: string;
    age: number;
}
const teacher: Person = {
    name: 'Dell',
    age: 18
};

class Animal {}
const animal = new Animal();

const d: number[] = [1, 2, 3];

const e: [number, string] = [1, 'lee'];

const getTotal: () => number = () => {
    return 123;
};

const func = (str: string) => {
  return parseInt(str, 10);
};

const func1: (str: string) => number = str => {
  return parseInt(str, 10);
};

const date = new Date();

2.类型注解与类型推断

1.type annotation 类型注解, 我们来告诉 TS 变量是什么类型
2.type inference 类型推断, TS 会自动的去尝试分析变量的类型
3.如果 TS 能够自动分析变量类型，我们就什么也不需要做了
4.如果 TS 无法分析变量类型的话，我们就需要使用类型注解
代码如下（示例）：

// let count: number;
// count = 123;
// let countInference = 123;
// const firstNumber = 1;
// const secondNumber = 2;
// const total = firstNumber + secondNumber;

function getTotal(firstNumber: number, secondNumber: number):number {
  return firstNumber + secondNumber;
}
const total = getTotal(1, 2);

const obj = {
  name: 'dell',
  age: 18
};

3.函数相关类型

代码如下（示例）：

// ts中函数的三种写法
// function sayHello1(value: string): string {
//     return value
// }

// const sayHello2 = function (value: string): string {
//     return value
// }

// const sayHello3 = (value: string): string => {
//     return value
// }

function add(first: number, second: number): number {
  return first + second;
}

function sayHello(): void {
  console.log('hello');
}

function errorEmitter(): never {
  while(true) {}
}

function add2({ first, second }: { first: number; second: number }): number {
  return first + second;
}

function getNumber({ first }: { first: number }) {
  return first;
}

const total = add2({ first: 1, second: 2 });
const count = getNumber({ first: 1 });

4.数组与元组

代码如下（示例）：

// 数组
const arr: (number | string)[] = [1, '2', 3];
const stringArr: string[] = ['a', 'b', 'c'];
const undefinedArr: undefined[] = [undefined];

// type alias 类型别名
type User = { name: string; age: number };

class Teacher {
  name: string;
  age: number;
}

const objectArr: Teacher[] = [
  new Teacher(),
  {
    name: 'dell',
    age: 28
  }
];

// 元组 tuple
const teacherInfo: [string, string, number] = ['Dell', 'male', 18];
// csv
const teacherList: [string, string, number][] = [['dell', 'male', 19], ['sun', 'female', 26], ['jeny', 'female', 38]];

5.接口

代码如下（示例）：

// interface 和 type 相类似，但并不完全一致
interface Person {
  // readonly name: string;
  name: string;
  age?: number;
  [propName: string]: any;
  say(): string;
  heat?: () => string;
}

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

interface SayHi {
  (word: string): string;
}

const getPersonName = (person: Person): string => {
  return person.name
};

const setPersonName = (person: Teacher, name: string): void => {
  person.name = name;
};

const person = {
  name: 'dell',
  sex: 'male',
  say() {
    return 'say hello';
  },
  teach() {
    return 'teach';
  },
  heat(){
    return '123'
  }
};

const res = getPersonName(person);
setPersonName(person, 'lee');

class User implements Person {
  name = 'dell';
  say() {
    return 'hello';
  }
}

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

6.类的定义与继承

代码如下（示例）：

class Person {
  name = 'dell';
  getName() {
    return this.name;
  }
}

class Teacher extends Person {
  getTeacherName() {
    return 'Teacher';
  }
  getName() {
    return super.getName() + 'lee';
  }
}

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

7.类的访问权限与构造器

private, protected, public 访问类型
1.public 允许我在类的内外被调用
2.private 允许在类内被使用
3.protected 允许在类内及继承的子类中使用

代码如下（示例）：

// class Person {
//   public name: string;
//   public sayHi() {
//     this.name;
//     console.log('hi');
//   }
//   private sayABC() {
//     this.name;
//   }
// }

// class Teacher extends Person {
//   public sayBye() {
//     this.sayHi();
//   }
// }

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

// constructor
// class Person {
//   // 传统写法
//   // public name: string;
//   // constructor(name: string) {
//   //   this.name = name;
//   // }
//   // 简化写法
//   constructor(public name: string) {}
// }
// const person = new Person('dell');
// console.log(person.name);

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

class Teacher extends Person {
  constructor(public age: number) {
    super('dell');
  }
}

const teacher = new Teacher(28);
console.log(teacher.age);
console.log(teacher.name);

8.类的静态属性，setter与getter, 单例模式

代码如下（示例）：

// getter and setter
// class Person {
//   constructor(private _name: string) {}
//   get name() {
//     return this._name + ' lee';
//   }
//   set name(name: string) {
//     const realName = name.split(' ')[0];
//     this._name = realName;
//   }
// }

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

// 单例模式
class Demo {
  private static instance: Demo;
  private constructor(public name: string) {}

  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo('dell lee');
    }
    return this.instance;
  }
}

const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
console.log(demo1.name);
console.log(demo2.name);

9.抽象类，多态代码示例

代码如下（示例）：

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

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

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

// class Circle extends Geom {
//   getArea() {
//     return 123;
//   }
// }

// class Square {}
// class Triangle {}

interface Person {
  name: string;
}

interface Teacher extends Person {
  teachingAge: number;
}

interface Student extends Person {
  age: number;
}

interface Driver {
  name: string;
  age: number;
}

const teacher = {
  name: 'dell',
  teachingAge: 3
};

const student = {
  name: 'lee',
  age: 18
};

// 多态
const getUserInfo = (user: Person) => {
  console.log(user.name);
};
getUserInfo(teacher);
getUserInfo(student);

---

总结

提示：…