typeScript简单入门

ts不能赋值为原来已有的数据类型为其它数据类型。

1、ts类型转换

• 首先使用在项目中使用ts是需要配置的，具体怎么配置这里不做讲解。

2、live serve插件，能实时刷新本地文件修改，并自动刷新浏览器。

3、TS中基本数据类型：

• number数值类型，let num=5;等同于let num:number=5;

• boolean 布尔类型，let isLogin=false;等同于let isLogin:boolean=false。

• string字符串，let name=“hello”;等同于let name:string=‘helllo’。

• any任何类型，初始化的时候不指定任何值，即是初始一个任何类型的数据，例如：

  let anything;
  anything=25;
  anything='hello';
  

  上述的写法是不会报错的。

  类似于：let anything:any。尽量不使用any类型。

• 数组，let names:Array=[‘xiaoming’,‘zhangsan’]。格式为数据类型，以及数组中数据类型为字符串。修改数组值：names[0]=‘liubei’,names=[‘zhang’]。

  number数组声明：

  let age:Array<number>=[1,6,89];
  // 或者简写
  let age: number[]=[1,6,68];
  // 声明一个任何类型的数组
  let anyArray:any[]=['hello'，12，false];
  

• 元组

  元组是用来存放多种类型的值。它和数组中any类型区别是元组更加严谨，当知道数组每个位置数据类型的时候，建议使用元组来存放数据。

  // 注意数据类型顺序不可以改变
  let colors:[string, number]=['red', 9393];
  

• 枚举

  枚举的定义是使用enum关键字来声明的。 一个枚举可以包含零个或多个枚举成员，枚举成员具有一个数字值，它可以是常数或计算得出的值。

  enum color{
      Black,
      number=100,
      string,
  }
  console.log(color.Black, color.number,color.string); // 输出结果为0，100， 101
  // 也即是默认为0，1，2。当做出修改的时候会跟随着改变。
  

• 函数类型

function returnValue(){
	return 'hello';
}
// 如果需要对函数返回值的类型做一个限定，可以使用
function returnValue():string{
	return 'hello';
}
// 函数无任何返回值,无参数
function hello(): void{
    console.log(123);
}
// 参数类型限定
function hellos(value1:number, value2:number):number{
    return value1+value2;
    console.log(value1+value2);
}
// 函数类型
这里规定变量myFuhnc存储的函数只能是有两个参数，并且两个参数都是number，并且返回值为number
let myFunc:(a:number, b:number)=>number
myFunc=hellos;
myFUnc(2,3); // 5

• 对象类型和type

// 限定对象参数名称和类型
let dataObj:{name: string, age: number}={
    name: 'ling',
    age: 2,
  }
// 修改时必须名称一致，属性值类型一致
dataObj={
    name: 'lings',
    age: 9,
  }

// 复杂对象
function myFunction(value1: number, value2: number):number[]{
    return [value1, value2];
  }
let dataObj:{age: number[], myFunc: (a: number, b: number)=>number[]}={
    age: [12, 89],
    myFunc: myFunction,
  }
// 对于上述类型限定比较长，可以先定义好类型再使用
type MyType={age: number[], myFunc: (a: number, b: number)=>number[]};
let dataObj:MyType={
    age: [12, 89],
    myFunc: myFunction,
  }

• union type(或)

let unionType: string | number | Boolean=2;
unionType='hello';
unionType=true;

• 类型检查

let checkType=18;
if(typeof checkType==="number" ){
    console.log('数值');
}

• null和undefined
• never,never类型是任何类型的子类型，也可以赋值给任何类型，但是，不能将其它类型转为never类型。

let x:never=123;
x=2; // 不允许，因为2是数值类型，不允许赋值给never类型。

never应用场景就是抛出异常和死循环

// 抛出异常
function err(message: string):never{
   throw new Error(message);
}
// 死循环
function loop():never{
    while(true){
        console.log('123');
    }
}
// 将never类型赋值给其它类型是不会报错的
let x:number=2;
x=err('错误')；
console.log(x);

4、面向对象

4.1、类

// 属性前边不加限制默认使用public，不仅能在类里边使用也能在外边使用。还有protected（被保护的），只能在类里边使用或者子类里边获取，在外边获取不到。private（私有的）只能在类自己里边获取，在子类和外部均得不到。
class Parents{
    name: string;
    protected age: number;
    constructor(name: string, age: number,public userName: string){
      this.name=name;
      this.age=age;
      this.userName=userName;
    };
    printAge(){
      console.log(this.age);
    }
  }
  const person=new Parents('liu', 12, 'liufei');
  console.log(person.name, person.userName);
  person.printAge();

4.2、类的继承

class Child extends Parents{
    public studentId: number;
    constructor(name: string, age: number, userName: string, studentId: number){
      super(name, age, userName);
      this.studentId=studentId;
    };
  }
  const childens=new Child('领', 16, '林哥', 202007080001);
  console.log(childens.name, childens.studentId, childens);

4.3、给私有属性设置值set或获取值get

class User{
    private _name: string;
    set setName(name: string){
      this._name=name;
    }
    get getName(){
      return this._name;
    }
    constructor(name: string){
      this._name=name;
    };
  }
  const users=new User("领");
  console.log(users.getName);// 领
  users.setName="你好更改";
  console.log(users.getName); // 你好更改

4.4、静态属性和静态方法

所谓静态属性和静态方法，就是不用实例化就能够获取到的属性和方法，前边加static

class User{
    static height :number=900;
    static getHeight(height: string): string{
      return height;
    }
  }
  console.log(User.height, User.getHeight('900px'))

4.5、命名空间namespace

用关键字namespace来声明命令空间，外边要想使用，必须使用export抛出去。

namespace MyMath{
    export const name:string='加油';
    export function getName(name:string):string{
      return name;
    }
  }
  const names=MyMath.name;
  console.log(names, MyMath.getName("今朝"));

4.6、模块

导出export

引入import

5、接口

5.1、类型使用interface关键字来声明，对属性进行类型的限定，类似于type,但是和type使用有些区别。

​ ① 其中不加？是必须传的，加了？可以传，也可以不传。

​ ② readonly是只读的不允许修改。

​ ③ [propName:string]任何名字，并且可传可不传，随便起名字。

​ ④ 方法定义方法名+（）：返回值

interface Person{
    name: string;
    age?: number;
    readonly desc: string,
    [propName: string]: any;
    greet(): void;
  }
  const everyOne: Person={
    name: '领',
    age: 16,
    desc: '性格直爽',
    random: [123],
    greet(){
      console.log(this.random);
    }
  }
  everyOne.greet();
  console.log(everyOne);

5.2、interface和type区别

​ interface和type区别是： interface能被继承，type不能被继承。在类里边尽量使用interface，在非类里边两者都可以使用。

5.3接口继承及类的实现

使用关键字implements来实现接口，一个类可以实现多个接口

① 例如一个类实现一个接口可以使用

interface Person{
    name: string;
    age?: number;
    readonly desc: string,
    [propName: string]: any;
    greet(): void;
  }
  class People implements Person{
    name: string; // 没有初始值，需要使用构造器，从外部传入
    desc: string='加速度';
    greet(){console.log(1)};
    constructor(name: string){
      this.name=name;
    };
  }
  const everyOne=new People('小明');
  console.log(everyOne);

② 一个类实现多个接口，中间用逗号隔开

interface Person{
    name: string;
    age?: number;
    readonly desc: string,
    [propName: string]: any;
    greet(): void;
  }
  interface Status{
    id: number;
  }
  class People implements Person, Status{
    name: string='华哥';
    desc: string='加速度';
    id: number=12345;
    greet(){console.log(1)};
  }
  const everyOne=new People();
  console.log(everyOne);

③ 接口继承 使用extends关键字

interface Status{
    id: number;
  }
  interface People extends Status{
    work: string;
  }
  const workShop: People={
    id: 1123,
    work: '前端开发',
  }
  console.log(workShop);

6、typeScript泛型Generic

6.1、什么时候使用泛型？

答: 当我们调用一个函数的时候，不想立即声明函数参数类型，以及函数返回值类型。而是等到我们调用接口的时候才确定传递的参数类型，此时可以使用泛型，泛型的定义就是<>，假如定义一个T的泛型。当调用的时候传递类型会根据你传递的进行处理，如果，不想传递类型，交给ts自己去推断也是可以的。

function getName<T>(name: T): T{
    return name;
  }
  console.log(getName<string>('领哥'));
  console.log(getName(true));
  console.log(getName(123));

也可以在接方法中使用泛型

interface Person{
    <T>(name: T):T;
  }
  function getName<T>(name: T): T{
    return name;
  }
  const people:Person=getName;
  console.log(people('ling'))
  console.log(people<string>('领哥'));
  console.log(people(true));
  console.log(people(123));

也可以将泛型提升到接口层面

interface Person<T>{
    (name: T):T;
  }
  function getName<T>(name: T): T{
    return name;
  }
  const people:Person<string | number>=getName;
  console.log(people('ling'));
  console.log(people(123));

6.2、给泛型约束

假如限定泛型中传入的参数必须有height属性，可以写成如下写法：

function getHeight<T extends {height: any}>(obj: T): T{
    return obj.height;
  };
  const Obj={
    height: 180,
    age: 20,
    name: 'ling',
  }
  console.log(getHeight(Obj));

或者给泛型限定类型

function getHeight<T extends number>(obj: T): T{
    return obj;
  };
  const Obj=180
  console.log(getHeight(Obj));