typeScript学习（一）

基础类型 null undefined symbol boolean void

const count: number = 123;
const teacher: string = "zhen";

对象类型 

//对象类型
// 对象
const teacher: { name: string; age: number } = { name: 'zhen', age: 18 }
// 数组
const numbers: number[] = [1, 2, 3]
// 类
class Person {}
const zhen: Person = new Person() //翻译一下就是zhen必须是Person类对应的对象
// 函数 (() => number 翻译getTotal是个函数，返回数字类型)
const getTotal: () => number = () => {
  return 123
}

对象类型之函数相关类型

// 函数相关类型
// 函数 (() => number 翻译getTotal是个函数，返回数字类型)
const getTotal: () => number = () => {
  return 123
}
function add1(first: number, second: number): number {
  return first + second
}
add1(1, 1)

//函数返回值为空（void）的类型
function sayHello(): void {
  console.log("Hello")
}
// 函数为never的例子(不会执行完就可以用never类型)
// function errorEmitter(): never {
//   while (true) {}
// }
function errorEmitter(): never {
  throw new Error("错误调用never")
  console.log(111)
}
// Es6解构函数
function add({ first, second }: { first: number; second: number }): number {
  return first + second
}
const total = add({ first: 1, second: 2 })

基础复习

// 箭头函数两种写法
const fun = (str: string): number => {
  return parseInt(str, 10)
}
console.log(fun("10"))
const fun1: (str: string) => number = (str) => {
  return parseInt(str, 10)
}
console.log(fun("10"))
//对于JSON这些方法，用下面这种case
interface Person {
  name: string
}
const rawData = '{"name":"zhen"}'
const newDate: Person = JSON.parse(rawData)

//对于一个变量有两种值 可以用例如number | string的方式
let aa: string | number = "123"
aa = 123

 数组和元组

// 数组和元组
// 数组
const arr: (number | string)[] = ["1", 1, "2"]
const stringArr: string[] = ["1", "2"]
const undefinedArr: undefined[] = [undefined]
// type alias 类型别名
type User = { name: string; age: number }
const userArr: User[] = [
  {
    name: "zhen",
    age: 18,
  },
]
// class ts也认为可以充当类型别名的作用
class Teacher {
  name: string
  age: 18
}
const teacherArr: Teacher[] = [
  new Teacher(),
  {
    name: "zhen",
    age: 18,
  },
]
// 元组tuple,具体到每个参数的类型
const teacherInfo: [string, string, number] = ["zhen", "xuan", 18]
const teacherList: [string, string, number][] = [["zhen", "xuan", 18]]

interface接口

常见面试题：interface和type有什么区别？

interface只能定义一些对象类型，函数等，但type可以定义一些基础类型。

只有不能用interface的时候，才有type来表示

 例如：type Person = string  interface Person { name:string }   

// interface和type 相似，但不完全相似，type可以定义一些基础类型
interface Person {
  // readonly name: string; 只读
  name: string
  age?: number //可选
  [propName: string]: any // 接受string类型，返回any类型
  say(): string
}
// 继承
interface Teacher extends Person {
  teach(): string
}
const getPersonName = (person: Person): void => {
  console.log(person.name)
}
const setPersonName = (person: Teacher, name: string): void => {
  person.name = name
}

const person = {
  name: "zhen",
  say() {
    return "say hello"
  },
  teach() {
    return "teach"
  },
}
getPersonName(person)
setPersonName(person, "zhen2")
// 函数的类型
interface SayHi {
  (word: string): string //函数接受word参数的类型是string,返回string
}
const SayHi: SayHi = (word: string) => {
  return word
}

类中的访问类型和构造器

// private,protected,public 访问类型
// public 公共 允许我在类的内外被调用
// private 只允许在类内被使用
// protected 允许在类中继承子类的使用
class Person {
  protected name: string = "dell"
  public sayHi() {
    console.log(this.name)
  }
}
class Teacher extends Person {
  public sayName() {
    console.log(this.name)
  }
}
const person = new Person()
person.name = "zhen"  // protected访问不到。只有public访问得到
person.sayHi()

 //constructor

// //constructor
class Person {
  // 传统写法
  public name: string
  constructor(name: string) {
    this.name = name
  }
  //传统写法等同于下面的简化写法
  constructor(public name: string) {
    this.name = name
  }
}
const person = new Person("zhen") //constructor的执行时间是在new Person()这一瞬间开始执行的
console.log(person.name)

　　

// class Person {
//   constructor(public name: string) {}
// }
// class Teacher extends Person {
//   constructor(public age: number) {
//     super("yang")
//   }
// }
// const aa = new Teacher(11)
// console.log(aa.name)
// console.log(aa.age)

静态属性getter,setter

// name是私有属性，不想被外部所调用
// get和set可以保护私有变量
class Person {
  // _name是不想被外部访问到的变量
  constructor(private _name: string) {}
  // 通过get和set的方法可以间接访问到，并做相应处理
  get name() {
    return this._name + " ~~~"
  }
  set name(name: string) {
    const realName = name.split(" ")[1]
    this._name = realName
  }
}
const person = new Person("zhen")
console.log(person.name)
person.name = "zhen 测试"
console.log(person.name)

// 设计模式，单例模式（一个类里面，只允许通过这个类获取一个这个类的实例）
// 希望Demo永远只能生成一个类的实例
class Demo {
  private static instance: Demo
  private constructor(public name: string) {
    console.log(name)
  }
  // static 其实是public static的简写，是把static后面的属性挂载类上，而不是实例上面
  static getInstance() {
    console.log(this) //没有new 所有this指向class类本身
    if (!this.instance) {
      this.instance = new Demo("zhen") //在里面就可以访问到constructor
    }
    return this.instance
  }
}
const demo1 = Demo.getInstance()
const demo2 = Demo.getInstance()
console.log(demo1.name)
console.log(demo2.name)

 类中的readonly和抽象类

//类中使用readonly
class Person {
  constructor(public readonly _name: string) {}
  get name() {
    return this._name
  }
}
const person = new Person("zhen")
person.name = "111" //修改不了
console.log(person.name)

//抽象类(把共用性的class属性进行封装)
abstract class Geom {
  width: number
  getType() {
    return "Gemo"
  }
  abstract getArra(): number
}
class Cirtcle extends Geom {
  getArra() {
    return 111
  }
}
class Square {}
class Triangle {}