TypeScript基础

TS类属性和方法，在JS中是怎样定义的

//a.ts
class Parent {
  public name = "这是父类";
  public age = 42;
  static sex = "男";
  say() {
    console.log("说话");
  }
}
Parent.sex;
const a = new Parent();
a.name;
a.say();

ts转js代码

//a.js
var Parent = (function () {
    function Parent() {
        this.name = "这是父类";
        this.age = 42;
    }
    Parent.prototype.say = function () {
        console.log("说话");
    };
    Parent.sex = "男";
    return Parent;
}());
Parent.sex;
var a = new Parent();
a.name;
a.say();

可以看出，Parent等于一个立即执行函数，类方法直接放到 js原型空间上了
类静态属性和 js函数属性一样。调用方式几乎是一样的，当然这里不用立即执行函数结果也一样。但如何代码多了，很可能会被污染。

---

类型注解

let 左边注解 = 或者右边注解

type Typeman = (name: string, age: number) => void;
let xiaoA: Typeman = function (name, age) {
  console.log(name, age);
};
xiaoA("小A", 18);

---

函数rest参数 和 函数结构

//当然下面用resxxx也是可行的
function funa(name: string, age: number, ...rest: any) {
  console.log("rest:", rest);
}
funa("老王", 45, "男", "游戏");

type TypStuobj = { username: string; age: number };
// 函数解构
function subInfo({ username, age }: TypStuobj) {
  console.log("name:", username, " age:", age); //这样就不用obj.xx操作了
}
subInfo({ username: "lisi", age: 33 });

---

string 和 String 的区别

//string. //它没有点操作
String.apply; //它有点操作
let strA: string = "aaa"; //这操作下，就有点操作了
strA.length;

let a: Object = 3; //大写的Object,是所有类型的根，所以可以是number
//let b: object = 4; //报错，小写的object就是对象类型

---

BigInt

const numberMax = Number.MAX_SAFE_INTEGER; //取number最大数
const maxOne = numberMax + 1;
const maxTwo = numberMax + 2;
console.log(numberMax, maxOne, maxTwo); //可以看出maxOne === maxTwo
//超过了number的最大数，会失准。所以用BigInt，但BigInt的n是es2020后出来的，TS配置文件需要修改

const bigInt = BigInt(Number.MAX_SAFE_INTEGER);
const bigOne = bigInt + BigInt(1);
const bigTwo = bigInt + 2n; //需要修改tsconfig.json中target和lib，为es2020以上
console.log(bigInt, bigOne, bigTwo);

---

取值要点

let obj = { name: "Tom", age: 25 };

// let username="name"
// obj[username] //报错，因为username变量右边的值是可变的，
// 如果右边是names,那么obj[names]就不存在

const username = "name";
console.log(obj[username]); //改成const就能确定右边值，所以也就不会出错

let obj2: object = { name: "Lisa", age: 18 }; //左边类型改成了object
//console.log(obj2[username]); //那自然就点不出来属性
//console.log(obj2.name); //报错，点不出来
console.log((obj2 as any)[username]); //将类型转成any

---

never类型

type info = string | number | boolean;
function funb(param: info) {
  console.log("param:", param); //此时param.会有string和number是属性
  if (typeof param === "string") {
    console.log("string:", param); //param. 只会有string属性
  } else if (typeof param === "number") {
    console.log("number:", param); //param. 只会有number属性
  } else {
    console.log("其他：", param); //鼠标放param上就能看见，它是never类型
  }
}
funb("aaa");
funb(2022);
//如果扩展info为 string | number | boolean,那never就自动变成boolean了

---

any 和 unknown

any： 可以是任何类型的父类，也可以是任何类型的子类
unknown：可以是任何类型的父类，不能做任何类型的子类

---

元组

符合2条件的数组就是元组：
定义时，元素类型确定，但各个元素类型不必相同。
元素赋值时，该值必须是当前位置的类型

let salary: [string, number, number, string] = ["王五", 8000, 10000, "ok"];

console.log(
  "salary类型:",
  typeof salary,
  Object.prototype.toString.call(salary)
);
//salary类型: object [object Array]

// 元组...rest
let [username, age, ...rest]: [name_: string, age_: number, ...rest: any[]] = [
  "Lisa",
  18,
  "北京某某某某",
  "13300001111",
  "一起飞",
  100,
];
console.log("username:", username); //Lisa
console.log("age:", age); //18
console.log("rest:", rest); //[ '北京某某某某', '13300001111', '一起飞', 100 ]

const只读

typescript4新增的 readonly

数组只读:
const arr1 = [10, 30, 40, "abc"];
//arr1 = [100, 30, 40, "abc"] //报错 const肯定是不允许覆盖的
arr1[0] = 100; //改元素是可以的

const arr2 = [10, 30, 40, "abc"] as const; //设为只读，这样元素也不能改变了
//arr2[0] = 100;  //改元素是报错的

//arr2是只读，传不进函数里。但函数参数后面加上readonly就OK了
function funa(arr: readonly any[]) {
  console.log(arr);
}
funa(arr2);

对象只读:
const obj1 = { name: "tom", age: 18 } as const;
console.log("访问obj只读属性：", obj1.name);//访问obj只读属性： tom
//obj1.name="sam" //修改只读属性，报错

let constnum5 = [10, 30, 40, 60, "abc"] as const;
function tail(arr: readonly [any, ...any[]]) {
  let [first, ...rest] = arr;
  return rest;
}
console.log(tail(constnum5)); //[ 30, 40, 60, 'abc' ]