typescript语法初级

这是我参与更文挑战的第22天，活动详情查看： 更文挑战

什么是typescript？

• typescript是javascript的一个超级
• 必须通过响应的编译器才能进行运行

typescript的优点

• 有更好的报错机制
• 更好的编辑器提示
• 更好的语义化申明以及可读性

typescript的运行环境

1、安装typescript -g
拥有了tsc命令

tsc demo.ts
复制代码

2、安装ts-node
可以在node状态下直接运行

ts-node demo.ts
复制代码

静态类型的深度理解以及各种类型讲解

（1）、当某个变量类型申请之后，那么变量类型的方法随之加载

Const a:number = 2
// 那么a就可以使用a*3的属性方法
复制代码

（2）、基础类型

number
string
boolean
null
undefined
symbol
void
复制代码

(3)、对象类型

• 类 类型

Class aa {};
let bb: aa;
复制代码

• 函数型

Const aa:()=>number
复制代码

• 数组
• date类型

类型注解和类型推断

类型注解
当变量声明后赋予的变量类型，由我们自主定义变量类型

类型推断
根据你赋予变量的值，而定义变量的类型

** 函数的类型返回最好要定义（返回值的类型： 除了正常的返回还有void和never）

函数声明的方式

let func = (name:string):string => {
  return name + '111';
}
let func2:(name:string) => string = (name:string) => {
  return name + '111';
}
复制代码

数组和元组

（1）、数组类类似于Javascript数组

// 类型别名
type User = {name: string, age: number};
const UserArray: User[] = [];
复制代码

(2)、元组 tuple
元组
根据数组的顺序，来确定数组对应下标的类型

let UserInfo: [string,number,string] = ['洛阳白牡丹', 18, 'man'];
复制代码

Interface 接口

(1)、和type类型别名不同，类型别名可以直接代表一个数据类型，但是interface必须是一对象（能用接口描述规范的都用接口）

type UserName = string;
interface Users{
    name: string
}
复制代码

(2)、接口类型的属性，可定义只读

interface Users{
    readonly name: string
}
复制代码

(3)、接口类型的属性，可以只表明自己已知，其他的用propName来替代

interface Users {
    name: string,
    [propName:string]：any
}
复制代码

(4)、Class implements 接口，那么这个声明的class就必须包含这个接口的属性

type User = {name: string, age:number}
class UserClass implements User {
    name: 'perter.wang';
    age: 18;
}
复制代码

(5)、接口的继承

type User = {name: string, age:number}
interface Users extends User {
    sex: string
}
复制代码

类的概念

（1）、创建和使用类

// 创建类

class User {
    name: string = 'mudan';
    getName() {
        return this.name;
    };
    setUserName(name: string) {
        this.name = name;
    }
}

// 创建实例

let user = new User();
user.setUserName('洛阳白牡丹');
user.getName();
复制代码

(2)、类的继承和重写

// 创建类
class User {
    name: string = 'mudan';
    getName() {
        return this.name;
    };
    setUserName(name:string){
        this.name = name;
    }
}

class UserMater extends User {
    boss:string = 'wangtiantian'
    getBoss() {
        return this.boss;
    };
    // 重写该方法
    getName() {
        // super 关键字 代表着 父类 直接指向父类
        return super.getName() + this.getBoss();
    }
}

// 创建实例
let company = new UserMater();
company.getBossAndstaff();
复制代码

类的属性 对应的方法 和访问类型

（1）、Private,protected,public 访问类型

• 默认的访问类型是public，public允许在类的内部或者外部进行调用和赋值

• private只允许在类内中使用

• protected允许在类内以及继承的子类中使用

（2）、Constructor 含义及用法

• 在类被实例化的时候，constructor会被自动执行

class ZaerDa {
    name:string = 'link';
    arms:string;
    constructor(name:string,arms:string){
        this.name = name;
        this.arms = arms;
        this.link();
    }
    link() {
        console.log('正在连接。。。');
        console.log('姓名：' + this.name);
        console.log('武器' + this.arms);
    }
}
let gamer = new ZaerDa('wpfly','MasterSword');
复制代码

• 在子类要继承父类的时候，创建自己的构造器的时候，要手动调用以下父类的构造器，且在调用父类的构造函数的时候要按照父类构造函数的要求传入参数

class Links extends ZaerDa {
    constructor() {
        super('wpfly','MasterSword');
    }
}
复制代码

类中的getter和setter

（1）、Getter

• 当类中的私有变量无法访问的时候，可以定义一个getter进行获取该属性的值

class ZaerDa {
    private name:string;
    private arms:string;
    constructor(name:string,arms:string){
        this.name = name;
        this.arms = arms;
    }
    get getName() {
        return this.name; // 可以在外部直接调用这个方法
    }
}
复制代码

（2）、Setter

• 当类中的私有变量无法赋值的时候，可以定义一个setter进行获取该属性的值

class ZaerDa {
    private name:string;
  private arms:string;
  constructor(name:string,arms:string){
    this.name = name;
    this.arms = arms;
  }
  set setName(name:string){
    this.name = name;
  }
}
复制代码

（3）、综合使用 单例模式

class ZaerDa {
  private 
palyer:ZaerDa;
  // constructor 是 private 所以外部无法进行实例化
  private constructor(){}

  static getPlay(){
    if(!this.palyer){
      this.palyer = new ZaerDa();
    }
    return this.palyer;
  }
}
复制代码

抽象类

（1）抽象类的定义
• 很多的类如果有一个共同的属性或者方法 那么定义一个抽象类将这些方法整合到一起
• 抽象类只能被继承不能被实例化
（2）抽象类的定义和使用

abstract class Palyers{
  abstract palyer(): number;
};
class PalyerOne extends Palyers{
  palyer(){
    return 1;
  }
}
复制代码