TypeScript基础

ts = js+类型系统+es6 --> 编译 -> js 相比 flow 功能更加强大，生态健全、完善 可以完全按照 js 标准语法编写代码 1.ts 配置文件 2.标准款内置对象 yarn tsc --locale zh-CN 中文错误命令

object 类型

const foo: object = function () {}; // {} // []
const obj: { foo: number, bar: string } = { foo: 1, bar: "!23" };

Array 类型

const arr1: Array<number> = [1, 2, 4];
const arr1: number[] = [1, 2, 4];
function sum(...args:number[]){
  return args.reduce(args,current)=>prev+current,0)
}

元组类型

const tuple[number:string] = [23,"123"]
const [age,name] =tuple
Object.entries({
  foo:123,
  bar:234
})

枚举类型(会影响编译后的结果，会编译为双向的键值对对象，会动态)

  enum postStatus={
    Draft=0,
    unPubilshed=1,
    Pubilshed=2
  }
  enum postStatus={
    Draft=0,
    unPubilshed,
    Pubilshed
  }
  enum postStatus={
    Draft="11",
    unPubilshed="ddd",
    Pubilshed="qwe"
  }
  const enum postStatus={
    Draft="11",
    unPubilshed="ddd",
    Pubilshed="qwe"
  }
const post = {
  status: postStatus.Draft, //2 //0ss
};

接口 interfaces

可以约定一个对象中有哪些类型 用于约束对象的结构，一个对象实现一个接口必须拥有这个接口约束的所有成员 1.可选成员

interfaces Post {
  title:string;
  content:string
  subtitle?:string//可选成员
  readonly summary:string //只读成员
  [prop:string]:string//动态成员
}
function printPost(post:Post){
  consple.log(post)
}

类

1. 在 ts 中类的属性需要一个初始值，可以在等号后面赋值或者在构造函数中初始化
2. 类的访问修饰符, 构造函数的访问修饰符只能是 public，private 不能被实例化
3. 只读 readonly,不允许被修改 4.类与接口
4. 抽象类 abstract 只能被继承，不能用 new 方式被实例对象了

  public name: string; //公有成员，可以在外部被使用
  private age: number; //私有属性  只能在内部使用访问
  protected readonly gender: boolean; //抽保护的成员` 只能在内部和子类中使用

interface Eat {
  eat(food: string): void;
}
interface Run  {
  run(food: string): void;
}
// 通过Extends实现继承时，需要通过调用parent方法来调用父元素的initialize方法从而继承父元素的属性
// 而通过Implements实现继承时，直接就可以继承父元素的属性，这种方式很适合父类不止一个的情况下

class Person implements Eat,  Run {
  eat() {
    console.log(123);
  }
  run() {
    console.log(123);
  }
}
abstract class Animal implements Eat,  Run {
  eat() {
    console.log(123);
  }
  run() {
    console.log(123);
  }
}
class Dog extends Animal{
  ...
}

class Person {
  public name: string; //公有成员
  private age: number; //私有属性
  protected gender: boolean; //抽保护的成员
  constructor(name: string, age: number, gender: boolean) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  sayHi(msg: string): void {
    console.log(123, this.age);
  }
  static create(name: string, age: number, gender: boolean) {
    return new Person(name, age, gender);
  }
}

interface EatAndRun {
  eat(food: string): void;
  run(distance: number): void;
}
interface Eat {
  eat(food: string): void;
}
interface Run {
  run(food: string): void;
}
class Person implements Eat,  Run {
  eat() {
    console.log(123);
  }
  run() {
    console.log(123);
  }
}

泛型 可以极大程度的复用代码,把我们定义是不能明确的类型变为参数

function createArr<T>(length: number, value: string): number[] {
  const arr = Array < T > length.fill(valuess);
}
const res = createArr < string > (4, "22");
//泛型接口
interface Identities<V, M> {
  value: V;
  message: M;
}

类型申明

如果安装的模块不包含类型声明文件则手动安装类型声明模块"@types/" .d.ts===类型声明模块

type 和 interface 区别?

typeof 操作符

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

const sem: Person = { name: "semlinker", age: 30 };
type Sem = typeof sem; // type Sem = Person

webpack 配置 eslint

  npm install eslint --save-dev
  npx eslint --init
  npm install babel-eslint --save-dev
  npm install eslint-loader --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 如果你的这个js文件在node_modules里面，就不使用babel-loader了
        exclude: /node_modules/,
        use: ["babel-loader", "eslint-loader"],
      },
    ],
  },
};