TypeScript基础

TypeScript

1.类型的定义

Typescript和JavaScript所共有的类型

1.数字类型number，Typescript和JavaScript一样，不区分整数类型(int)和浮点类型(double)，统一为number类型

let foo:number = 100;

2.布尔类型只有两个取值：true，false，

let foo:boolean = true;

3.字符串的取值：string，

let foo:string = 'sjhg';

4.数组的定义：Array，

let foo:Array<string> = [];//不推荐
let foo:Array[] = [] //推荐

5.对象类型：默认会做所以可以直接定义，

let foo  = {
	name='aaa'
};

6.null和undefined的定义：，

let foo:null = null;
let foo:undefined = undefined 

2.数组的定义：Array，

let foo:Array<string> = [];//不推荐
let foo:Array[] = [] //推荐

Typescript所有的类型

any类型：在某些情况下，无法确定变量的类型，并且可能它会发生一些变化，这个时候可以使用any类型，在赋值时候，不做限制

let foo:any = ‘11111’;
foo = 123,
foo = true

unknown类型：只能赋值给any和unknown类型，用于描述类型不确定的变量

let foo:unkonwn = ‘11111’;
foo = 123,
foo = true

void类型：用来指定一个函数没有返回值的，那么返回值就是void类型

function foo(num1,mun2):void{
	
}

never类型：表示永远不会发生值的类型，比如一个函数，在死循环或者抛出一个异常时候使用

function foo(num1,mun2):never{
	
}

tuple类型：是元组类型，多种元素的组合

let foo:[string,num,num] = ['sdfa',121,14] //使用元组就必须要进行赋值
function foo(num1:number,mun2:number):never{
	
}

函数的参数对象类型：当一个函数的参数是对象的时候

//函数的参数是对象类型的,?表示这个参数是可选类型
function foo(point:{x:number,x:number,z?:number}){
	console.log(point.x)
}
foo({x:123,y:321})

联合类型：允许我们使用多种运算符，从现有类型中构建新类型

//number|string 联合类型
function foo(point:number|string){
	console.log(point)
}
foo({x:123,y:321})

类型断言as：有时候无法获取具体的类型信息，需要使用类型断言

//<img id='img' src= "">
const el document.getElementById('#img') as HTMLImageElement
//把el指向到HTMLImageElement元素上 

可选链操作符 ‘?.’ ：作用是当对象属性不存在时，会短路，直接返回undefind，如果存在才会继续执行

const el = {
	friend:{
		name:'zmy'
	}
}
const a = el.friend?.name

??和!! 的作用
!! 操作符：将一个其他类型转换成boolean类型
?? 操作符：空值合并操作符，是一个逻辑操作符，当操作符左侧是null或者undefined时，返回其右侧操作数，否则返回左侧操作数

const foo:string|null = null
const eoo = foo??'ssss'
console.log(eoo) //输出ssss

1.类的使用

1.类的定义

class Person {
   name ='zmy'
   age = 18
   eat(){
     console.log(this.name+this.age);
   }
 }
 const p = new Person()
 console.log(p);

2.类的继承extends：

class Person {
      name ='zmy'
      age = 18
      eat(){
        console.log(this.name+this.age);
      }
    }
    class Student extends Person {
      title='student'
    }
    const p = new Person()
    const stu = new Student()
    console.log(p,stu.title);;

3.类的成员修饰符
public：修饰符是在任何地方可见、公有的属性或方法，默认编写的属性就是public
private：修饰符是仅在同一类中可见，私有的属性或者方法
protected：修饰的是仅在类自身及子类中可见、受保护的属性或方法

class Person {
   name ='zmy'
   private age = 18
   protected number = 1213
   eat(){
     console.log(this.name+this.age);
   }
 }
 class Student extends Person {
     getNumber(){
		return this.number
	}
 }
 const p = new Person()
 const num = new Student ()
 console.log(p);
 console.log(num.getNumber());

1.接口的使用：interface

1.接口声明对象类型

interface InfoType {
   name:string
   age:number
 }

 const info:InfoType = {
   name:'zmy',
   age:18
 }

1.接口的继承

interface InfoType {
   name:string
   age:number
 }

 const info:InfoType = {
   name:'zmy',
   age:18
 }

1.枚举类型的使用：enum

1.枚举类型的声明

enum InfoType {
   LEFT,
   TIGHT,
   TOP,
   BOTTOM
 }

1.泛型：enum

1.类型的参数化，定义函数时，不定义参数类型，二十调用时候，用参数形式决定类型

function name<Type>(params:Type) {
 return params
}
//1.明确传入类型
name<number>(20)
name<{age:number}>({age:18})
name<any[]>(['abc'])
//2.类型推导
name(20)

2.泛型的接口使用

interface InfoType<T1,T2>{
   name:T1
   age:T2
 }

 const info:InfoType<string,number> = {
   name:'zmy',
   age:18
 }