typescript基础

[TOC]

1.类型声明

let a: number;
let b = false;//隐式类型

//函数和返回值
function sum(a: number, b: number): number {
    return a + b;
}

1.1 类型

1.2 字面量类型声明 - 定义值有范围

//1.定义后无法修改，类似常量
let b : 10;
//b = 11;修改会报错

//2.定义多个值用|连接， 
let gender: "man" | "women";
gender = "man";
gender = "women";
gender = "other";//报错

//3. 定义两种类型
let c: string | boolean;
c = "hello";
c = false;

1.3 any - 任意类型

//any类型变量，相当于关闭了ts的类型检测
let d:any;
d = 10;
d = "hello";
d = false;

//隐式any类型
let a;

//会污染s的类型，不会警告
let e :any;
e = false;
e = "hello";
let s:string;
s = e;

1.4 unknown - 类型安全的any

let e :unknown;
e = false;
e = "hello";
let s:string;

//1.不能将类型“unknown”分配给类型“string”。
//s = e;
//2.正确的做法，判断类型一致在赋值
if(typeof e == 'string'){
    s = e;
}
//3.类型断言
s = e as string;
s = <string>e;

1.5 void | never

function fn(type: number): string | boolean {
    if (type == 1) {
        return '1';
    } else {
        return false;
    }
}
//用来表示空，没有返回值
function fn2(): void {

}
//什么都没有 不是void
function fn3():never {
    throw new Error("报错")
}

1.6 object

//1.不常用
let a: object;
a = {}
a = function () { }

/*2.
{}指定对象中包含哪些属性
语法：{属性名：属性值,属性名2：属性值2}
属性名后加上? 表示该属性是可选的
*/
let b: { name: string, age?: number };
b = { name: 'zhuzi', age: 18 };
b = { name: 'zhuzi' };

//3.[propName: string]: any 表示任意类型的属性值
let c: { name: string, [propName: string]: any };
c = { name: 'zhuzi', a: 10, b: "hello" };

/*4.
设置函数结构的类型声明
语法：(形参:类型,形参2:类型2)=>返回值类型
*/
let d: (a: number, b: number) => number;
d = function (a: number, b: number): number {
    return a + b;
}

1.7 array

/*
两种表示
    类型[]
    Array<类型>
*/
let a: number[];
a = [1, 2, 3];

let b :Array<string>;
b = ["h"]

1.8 tuple - 长度固定的数组

let c : [string,number];
c = ['zhu',18];

1.9 enum

enum Gender {
    Male = 0,
    Female
}
let gender:Gender;
gender = Gender.Male;

1.10 type 、 &

//并且
let m:{name:string} & {age:number};
m = {name:'zhu',age:18}

// 别名
type myType = 1|2|3|4|5;
let k:myType

2.类

2.1 类的简介

/*

class 关键字定义类
    实例属性
    实例方法
    
注意：属性需要初始化。 默认值或constructor 赋值    
*/

class Person {

    //类属性、静态属性
    static total:number;
    //类方法
    static classFun():void{
        console.log('这是类方法');
    }

    //实例属性
    name:String = "孙悟空";
    age:number = 500;


    //实例方案
    sayHello():void{
        console.log(`Hello,my name is ${this.name}`);
        
    }

}

let person = new Person();
console.log(person);
person.sayHello();

2.2 构造函数和this

//类的构造方案和this
class Dog {
    name:string;
    age:number;

    /*
    1.构造函数会在对象创建时调用
    2.构造函数中的对象就是当前创建的对象
    3.可以通过this 向当前对象添加属性
    */
    constructor (name:string,age:number){
        this.name = name;
        this.age = age;
    }

    barke(){
        console.log(`${this.name} 汪汪叫`);
    }
}
let dog1 = new Dog('旺财',2);
let dog2 = new Dog('小黑',10);
dog1.barke();

2.3 继承

//类的继承
/*
Animal：父类 ，Dog：子类 
1. 子类拥有父类所有的属性和方法
2. 子类可以有自己属性和方法
3. 子类可以重写父类的方法
*/
class Animal {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    barke(){
        console.log('动物叫...');
        
    }
}

class Dog extends Animal {
    barke(): void {
        console.log(`${this.name} 狗叫...`);
    }
    run(){
        console.log('狗跑');
        
    }
}

class Cat extends Animal {
    barke(): void {
        console.log(`${this.name} 猫叫...`);
    }
}

let dog = new Dog('旺财',6);
let cat = new Cat('招财猫',10)

dog.barke();
cat.barke();

2.4 super 关键字

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
    barke() {
        console.log('动物叫...');
    }
}

class Dog extends Animal {
    age:number;

    /*
    1.如果子类重写的父类的构造方法 必须调用super 
    */
    constructor(name:string,age:number){
        super(name);//调用父类的构造方法
        this.age = age;
    }
    barke() {
        //2.调用父类的方法
        super.barke();
        console.log('狗叫...');
        
    }
}
let dog = new Dog('旺财', 6);
console.log(dog);
dog.barke();

2.5 抽象类 abstrack

/*
抽象类 abstract 类
1.不能被实例化，只能继承
2.可以添加抽象方法子类必须实现
*/
abstract class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
    //抽象方法没有实现，子类必须重写
    abstract barke():void;
}
class Dog extends Animal {
    barke() {
        console.log('狗叫...');
    }
}
let dog = new Dog('旺财');
dog.barke();

2.6 interface 接口

• 声明使用

  /*
  1.定义类结构，一个类对象应该包含哪些属性和方法
  2.可以当做声明使用
  */
  interface Person{
      name:string,
      age:number
  }
  //3.可以重复声明，会合并
  interface Person{
      gender:number
  }
  //对比type
  // 对对象结构的限制
  type personType = {
      name:string,
      age:number
  }
  let person:personType = {
      name:'朱允见',
      age:18
  }
  

• 限制类的结构

  /*
  1.定义类的时候限制类结构 implements 实现该接口
  2.属性不能有值，方法不能有实现，且实现类都必须实现
  
  */
  interface MyInterface {
      name:string;
      
      sayHello():void;
  }
  class MyClass implements MyInterface {
      name: string;
  
      constructor(name:string){
          this.name = name;
      }
      sayHello() {
          console.log('hi');
      }
      
  }
  let my = new MyClass('小猪');
  console.log(my);
  

2.7 get、set 属性定义位置

class Person {
    /*
        readonly:只读

         修饰符：默认是public
        public:公共的 
        protected:受保护的只能在当前类和子类中使用
        private:私有的，仅在本类可访问
    
    */

    private  _age:number
    constructor(age:number){
        this._age = age;
    }


    //get set 属性存取器
    get age(){
        return this._age;
    }
    set age(value:number){
         if(value<0)return;
        this._age = value;
    }
}

//属性定义可以直接写在构造函数里
class C {
    constructor(public name:string,public age:number,){
        this.age = age;
        this.name = name;
    }
}
let c = new C("测试类",10)

2.8 泛型

/*
泛型 
在定义函数或类是类型不明确，就可以使用泛型
*/

//1 单个泛型
function fn<T>(a: T) {
    return a;
}
//自动推断
let result1 = fn(1);
//指定泛型类型
let result11 = fn<string>('hello');


//2.多个泛型
function fn2<K, T>(a: K, b: T): K {
    return a;
}
let result2 = fn2<number,string>(10,'hello')


//3. 限制泛型
interface MyInterface {
    length:number
}
//3.1 T 必须是MyInterface 的实现类（子类）
function fn3<T extends MyInterface>(a:T):number{
    return a.length;
}
fn3<string>('hello');

//4 类 中泛型
class MyClass <T>{
    name:T;
    constructor(name:T){
        this.name = name;
    }
}
let obj = new MyClass<string>('name');

Ts 项目演练模块化开发demo

贪吃蛇TS 模块化开发demo