interface typescript 拓展属性 typescript新特性

转载

网络安全侠 2023-07-13 14:49:32

文章标签 typescript 前端 JSX 新特性赋值 文章分类 TypeScript 前端开发

TypeScript的常用新特性

TypeScrtpt作为Javascript的超集，拥有Javascript的基本特性，在保留基本的关键字以及内置函数外，还有作为TypeScript的新特性。其中作为TypeScript的最基本的新特性为type，因为Javascript中对变量的定义是弱类型的，在TypeScript中新增了对变量进行定义的特性。TypeScript的出现就是为了贴近面向对象的语法。

强类型

JavaScript是一个弱类型的语言，在定义变量时不用对变量进行类型上的定义，如Java语言中，对数值型的变量用Int定义，字符型的用char定义，在Javascript都可以用var定义，JavaScript中是先对变量进行判断类型在对其进行定义。

//JavaScript
var a = 10
//TypeScript
var b : number = 11		//将b定义为number类型
var c : string = 11		//将c定义为String类型，但是赋值的类型为number，报错
var d : any = 10 		//将d定位为any类型，即任意类型的值，赋值的类型是可以任何类型

更加智能的自定义类型

type newType = number | string | boolean
function fun(param: newType) {
  console.log(typeof param)	//number
}
fun(1)

针对于多态性，当参数有多个的情况下，在es5中可通过arguments获取参数集合，在es6中可通过…rest，对参数进行解构来获取参数集合。
在TS中，因为有了强类型的出现，可以自定义的去定义参数的类型，当参数多个时。
这种用法在4.2以下的版本会报错，因为number的参数数量是不可知的，需将number放到最后面，但是这又不符合我们对于变量类型的定义后的时候，与业务需求发生冲突。

let a: [string, ...number[], boolean] = ['hello', 10, 20, false]
console.log(a)

interface

interface的作用在于为类型命名以及类型的定义设定契约，声明的变量需按照规则来对属性进行定义赋值。

interface personType {
  name:string;
  age:number;
  height?:number	//可选属性，即为非必填属性
  readonly num:number	//只读属性
}
//正确定义
let xiaoming :personType = {
  name:'xiaoming',
  age:18,
  num:123
}
xiaoming.num = 321	//报错，只读属性只能在初始化时定义，不能对其进行修改。
let xiaohong :personType = {
  name: 456,  //报错，报错信息：不能将类型“number”分配给类型“string”。
  ages:18     //报错，报错信息：不能将类型“{ name: string; ages: number; }”分配给类型“personType”。
}

如果对象在参数类型不确定时，且其可以放入多余的属性，可以考虑不对变量进行规约，也可在接口中添加 [propName: string]: any

interface personType {
  name:string;
  age:number;
  [propName: string]: any
}
//不报错
let xiaoming :personType = {
  name: '456',
  age:18,
  sex:'男',
  weigth:180  
}

以上都是对于对象的类型接口定义，除对象外数组、函数等都有其接口定义的方式。

//函数类型接口
interface funcType{		
  (x:string,y:number):string	//规约：x为string类型，y为number类型，返回值为string类型
}

let fun:funcType	//先定义变量
fun = (x:string,y:number)=>{	//再给变量赋值给一个函数，其函数要求为，参数为string+number
  return x+y	//返回值为string型
}

class

Javascript中，对于类的定义有两种，一种是ES5中利用function配合this来定义类，另一种是ES6中新增了class关键字来对类进行声明。

//ES5
function Person(name,age){
	this.name = name
	this.age = age
	this.speak =()=>{
		console.log(this.name,this.age)
	}
}
let xiaoming = new Person('xiaoming',18)
xiaoming.speak()
//ES6
class Person{
  constructor(name,age){
    this.name = name
    this.age = age
  }
  speak(){
    console.log(this.name,this.age);
  }
}
var xiaohong = new Person('xiaohong',17)
xiaohong.speak()

class Person{
  constructor( 
    public name: string,
    public age:number,
    private num:number,
    ){
    }
}

//Ts
class Person {
  constructor(public name: string, public age: number) {}
  speak = () => {
    console.log(this.name + this.age)
  }
}
var xiaohua = new Person('小花', 18)
xiaohua.speak()

在VSCode新建ts文件，在终端通过node执行，会发现报错，但在项目中运行却没问题。

interface typescript 拓展属性 typescript新特性_typescript