typeScript学习总结

1.基础类型和定义

有：boolean,number,string,[],Tuple,enum,any,void,null,undefined,never

1.字符串
let a :string='hello world'
2.数字
let num :number=25
3.布尔类型
let vv:boolean=true||false
4.数组
let arr:number[]
const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];

class Tree{
  'type':string;
  'age': number;
}
const objArry:Tree[]
5.enum枚举
//如果不指定 enum 中的值，则会从 0 开始，自增长为 0 / 1 / 2 / 3。
enum Direction {
    Up,
    Right,
    Down,
    Left
}
enum Direction {
    Up = 'UP',
    Right = 'RIGHT',
    Down = 'DOWN',
    Left = 'LEFT',
}

function getVal(): number { 
    return 1;
}

enum Direction {
    Up = getVal(),
    Right = getVal(),
    Left // 报错
}

function getVal(): number { 
    return 1;
}
后面直接属性声明了一个初始化的值，比如 0 ，并非通过函数或者变量赋值，则不会报错
enum Direction {
    Up = getVal(),
    Right = getVal(),
    Down = 0,
    Left
}

enum Check {
    No = 0,
    Yes = 'YES'
}
6.Tuple 元数
let x: [string, number];
7.任何类型 any
let course='jkjk'
course=123456
course=[]
8.void //这就是没有返回值的函数，我们就可以给他一个类型注解void，代表没有任何返回值。
function hello(): void {
    alert("Hello Runoob");
}
9.never  如果一个函数是永远也执行不完的，就可以定义返回值为never，那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候，抛出了异常，这时候就无法执行完了)。
function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}
10 undefined
const undefinedArr: undefined[] = [undefined, undefined];
11.null
const nullArr:null[]=[null,null]

2.类型别名

type lady={name:string,age:number} 
let brr :lady []

class Tree{
  'type':string;
  'age': number;
}
let crr :Tree[]

3.Interface 重复的类型注解，定义成统一的接口

interface Girl {
  name: string;
  age: number;
  bust: number;
  [propname: string]: any;
  say():void{
  }
}
const screenResume = (girl: Girl) => {
  girl.age < 24 && girl.bust >= 90 && console.log(girl.name + "进入面试");
  girl.age > 24 || (girl.bust < 90 && console.log(girl.name + "你被淘汰"));
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
};
const girl = {
  name: "大脚",
  age: 18,
  bust: 94,
  sex:'女',
  say(){
  }
};

screenResume(girl);
getResume(girl);

区别：
1.interface创建了一种新的类型，而 type 仅仅是别名，是一种引用
2.接口创建了一个新的名字，可以在其它任何地方使用。 类型别名并不创建新名字—比如，错误信息就不会使用别名。
3.类型别名不能被 extends和 implements
4.如果你无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。

2.限制类
class XiaoJieJie implements Girl {
  name = "刘英";
  age = 18;
  bust = 90;
  sex:'女';
  say() {
    return "欢迎光临 ，红浪漫洗浴！！";
  }
}
3.继承

interface Teacher extends Girl {
  teach(): string;
}
let ther={
	name: "huahua",
  age: 18,
  bust: 94,
  sex:'女',
  say(){
  },
  teach(){
  return 'huahua laoshi' 
  }
}
const getResume22 = (ther: Teacher) => {
  console.log(girl.name + "年龄是：" + girl.age);
  console.log(girl.name + "胸围是：" + girl.bust);
  girl.waistline && console.log(girl.name + "腰围是：" + girl.waistline);
  girl.sex && console.log(girl.name + "性别是：" + girl.sex);
};
getResume22（ther） 

4.类

class Lady{
	sayHi():string{
		return 'hi ,帅哥'
	}
}
class meinv extends Lady{
	sayLove(){
		return 'i love you'
	}
} 
类重写
class meinv extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHi() {
    return "Hi , honey!";
  }
}
super
class meinv extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHello() {
    return super.sayHi() + "。你好！";
  }
}

2.类的访问类型 public ，protected（protected 允许在类内及继承的子类中使用） ，private 
1.public
class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')
    }
}

const person = new Person()
person.name = 'jspang.com'
person.sayHello()
console.log(person.name)
2.private 
class Person {
    private name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}
const person = new Person()
person.name = 'jspang.com'    //此处报错
person.sayHello()
console.log(person.name)  //此处报错

3.protected
class Person {
    protected name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此处不报错
    }
}

class Teacher extends Person{
    public sayBye(){
        this.name;
    }
}

类的构造函数
class Person{
    public name :string ;
    constructor(name:string){
        this.name=name
    }

}

const person= new Person('jspang')
console.log(person.name)

class Person{
    constructor(public name:string){
    }
}

const person= new Person('jspang')
console.log(person.name)

getter setter

class Father{
constructor(public _age:number){
}
get(){
	return this._age-10
}
 set age(age:number){
    this._age=age
  }
}
const dajiao = new Father(28)
console.log(dajiao.age)
dajiao.age=25
console.log(dajiao.age)

抽象类
abstract class ab {
	abstract sit()
}

class Baseei extends ab {
	sit(){
		console.log('sit chouxiang')
	}
}

5.联合类型和类型保护

interface one {
	age:number
}
interface second {
	name:'string'
}
function ju(animal:one |second ){}
类型 in保护
function judgeWhoTwo(animal: one | second ) {
  if ("age" in animal) {
    console.log(animal.age);
  } else {
    console.log(animal.name);
  }
}
类型 typeof 保护
function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}
类型 instanceof  保护
function addObj(first: one | second ) {
  if (first instanceof second) {
    console .log('444')
  }
  return 0;
}

6.函数泛型

function jion<Add>(first:Add,second:Add){
	return`${first}${second}`
}
jion< string > ("jspang", ".com");
jion< number> (1, 2);
多个泛型定义
function jion<Add，Bdd>(first:Add,second:Bdd){
	return`${first}${second}`
}
jion< string ,number> ("jspang", 2);

泛型约束
interface  Girl {
  name:string;
  age:number;
  address:string;
}
class Selects <T extends Girl>{
  constructor(public girls:T[]){}
  get(index:number):Girl{
    return this.girls[index]
  }
}
let arrGirl:Girl[]=[{name:'小黄',age:22,address:'黄白路'},{name:'小黄2',age:24,address:'黄白路2'},{name:'小黄3',age:25,address:'黄白路3'}]
var sel=new Selects(arrGirl)
console.log(sel.get(1));

7.命名空间

namespace Components {
  export class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Header";
      document.body.appendChild(elem);
    }
  }

  export class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Content";
      document.body.appendChild(elem);
    }
  }

  export class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Footer";
      document.body.appendChild(elem);
    }
  }
}

namespace Home {
  export class Page {
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

子命名空间
namespace Components {
  export namespace SubComponents {
    export class Test {}
  }

  //someting ...
}