TypeScript总结

最新推荐文章于 2024-05-22 14:17:58 发布

chychychy001

最新推荐文章于 2024-05-22 14:17:58 发布

阅读量3.6k

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/chychychy001/article/details/125699200

版权

typeScript总结

变量声明
数据解构
函数
- 可选参数
- 剩余参数
类
模块
完结撒花

变量声明

在ts中声明变量使用let 和 const

let lang: string = "chy";
let ax: number = 18;
//ax = "chy" 不能将类型“string”分配给类型“number”。ts(2322)
const pi = 3.14;
// pi = 1; 无法分配到 "pi" ，因为它是常数。ts(2588)

数据解构

解构就是将数据分解，赋值给不同的变量

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

函数

ts中的函数使用完整类型来定义，就是可以声明函数传入的参数的可以声明他是哪种方类型，也可以声明返回类型。
具体代码如下：

function getSums(x: number,y: number): number{
    return x+y;
}
console.log(getSums(1,2));

可选参数

//可选参数，必须放在必要参数后
function say(firstName: string, lastName?: string) {
    if(lastName) {
        return `Hello ${firstName} ${lastName}!`;
    }
    return `Hello ${firstName}!`;
  }
  console.log(say('chy'));
  console.log(say('chy', 'is so blue'));

剩余参数

当不知道要传进来多少个参数时，可以使用剩余参数来接受
代码如下：

function sheng(s1:string, ...others:string[]){
    console.log(others);
  }
  sheng("chy","li","yang")//[ 'li', 'yang' ]

类

类是面向对象的编程形式，是属性和方法的集合，可以生成Object

类的声明和使用

class Person{
    name: string;//属性
    age: number;//属性
    constructor(name:string,age:number){//构造函数，声明对象的时候使用
        this.name = name;
        this.age = age;
    }
    printPerson():void{
        console.log(this.name);
        console.log(this.age);
    }
  }
  let person = new Person("chy",18);
  person.printPerson();

访问权限

访问权限分为public 、private
public 可以被外界直接访问，但是 private不能被外界直接访问
然后可以设置set、get函数获取内部变量
如下代码：

//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
  private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    
  private _weather: string; //私有属性，习惯以_开头进行命名

  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this._name = name;
    this._weather = weather;
  }
  get name(): string {
    return this._name;
  }
  set name(value: string) {  //error！ _name有readonly属性
    this._name = value;
  }
  get weather(): string {
    return this._weather;
  }
  set weather(value: string) {
    this._weather = value;
  } 
}
  
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);

静态属性 static

拥有静态属性的代码块，只会执行一次，可以直接使用，而不需要实例化
如下代码：

//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
  static place = 'Earth';
  static printInfo() {
    console.log('We have only one Earth!');
  }
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();