TypeScript 笔记

对象

<script setup lang='ts'>
import { ref,reactive} from 'vue';
let obj = {
  name:'王五',
  age:25,
  gender:'男',
  address:'海南省',
  hobby:'篮球',
  gather:[1,2,3,4,'万年青','茉莉花','平安树','珍珠吊兰'],
  procedure:()=>{
    console.log('这是一个方法')
  }
}
// 新增key
// 1、
let obj:any   = {
  name:'王五',
  age:25,
  gender:'男',
  address:'海南省',
  hobby:'篮球',
  gather:[1,2,3,4,'万年青','茉莉花','平安树','珍珠吊兰'],
  procedure:()=>{
    console.log('这是一个方法')
  },
}
obj['newKey'] = 123

// 2、
type obj = {name:string,[propName:string]:any};
let itemObj:obj = {
  name:'王五',
  age:12
}
itemObj['interest'] = '篮球';
console.log(itemObj);


//取值方式
console.log(obj.name)
console.log(obj['name'])
//遍历对象
// 1、
let i:keyof typeof obj
for(i in obj){
  console.log(obj[i])
}
// 2、
for(let [key,val] of Object.entries(obj)){
  console.log(key,val)
}
// 3、
for(let i in obj){
  console.log(obj[i as keyof typeof obj])
}

</script>

遍历方式4、

import { ref,reactive} from 'vue';

  interface commodityDateType {
    name:string,
    introduce:string,
    price:number,
    count:number
  }

  let commodityDate = reactive<commodityDateType>({
    name:"",
    introduce:"",
    price:0,
    count:0
  })

  let swipeDate = ref<commodityDateType[]>([]);

  // 添加商品信息
  function addSwipe():void{
    let item:commodityDateType = {
      name:"",
      introduce:"",
      price:0,
      count:0
    }
    for(let [key,val] of Object.entries(commodityDate)){
      (item as any)[key] = val;
    }
    swipeDate.value.push(item)
  }

  // 删除商品
  function deleteSwipe(index:number):void{
    swipeDate.value.splice(index,1)
  }

数组

let arr = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
//取值
arr[1]
//新增
arr.push('实验项');
//删除
arr.splice(2,1)

//遍历数组
//场景：在接口中拿到数据之后进行数组的循环 用any类型的数组
let arr:any[] = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
arr.forEach(element => {
  console.log(element,'输出')
});
// 其他情况下的遍历
// 遍历值
let arr = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
for (let entry of arr) {
  console.log(entry); 
}
// 遍历索引
let arr = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
for (let i in arr) {
  console.log(i); // "0", "1", "2",
}
// 传统for循环
let arr = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
for (var _i = 0; _i < arr.length; _i++) {
    var num = arr[_i];
    console.log(num);      // "1", "2", "3"
}
// forEach
let arr = [1,2,3,4,5,6,'万年青','茉莉花','珍珠吊兰'];
arr.forEach((val, idx, array) => {
  console.log(val, idx, array);
});

函数

初期过度阶段常用的声明方法。参数类型为任意值 返回值为空。完全相当于没限制

function fn(a:any,b:any):void{
  console.log(a,b)
}

有明确的类型声明
这种声明方式 输入多余的（或者少于要求的）参数，是不被允许的

function fn(a:string,b:number):void{
  console.log(a+b)
}
fn('张三',2)

使用可选值 可选的参数可以不传。但可选参后面不能出现必填参数
如果使用默认值那么这个参数会自动识别为可选参数。

function fn(a:string,b:number,c?:string):void{
  console.log(a+b+(c?c:''))
}
fn('张三',2)

泛型在函数中的使用

使用例子：

function fn<T>(a:T,b:T):Array<T>{
  return [a,b];
}
console.log(fn<number>(1,2))

下面的程序是一个错误的实例 ：因为 在使用泛型的时候ts程序也同样遵循着一个原则，如果程序无法预期结果的类型就会报错。（换句话说如果程序无法控制自己那么就会报错）
这个函数的的报错是因为，传入的类型是T但因为进行了相加的处理所以返回值得类型是不可控的所以报错了

``error
function fn<T>(a:T,b:T):T{
  return a+b;
}
// 此程序的报错是因为，传入的类型是T但因为进行了相加的处理所以返回值得类型是不可控的所以报错了

关于赋值和类型的转换

// 一个any类型的值，在赋值时转换成 string的格式
let str:any = '1234567';
let ff = str as string;

//数组的装换
let arr = [1,2,3,4,5,6];
let arr2 = arr as any[];

//对象的转换
let Obj = {
  name:'王五',
  age:12
}
type objType = {[propName:string]:any};
let obj2 = Obj as objType
obj2['interest'] = '篮球'
console.log(obj2)

vue3 + vite + ts 移动端适配

使用插件：
amfe-flexible
postcss-pxtorem

1、
安装 amfe-flexible
主要是将1rem设为viewWidth/10。
npm install amfe-flexible --save

//main.ts
import 'amfe-flexible';

2、
npm install postcss-pxtorem --save
在src同级目录下创建 postcss.config.js
rootValue 的值为设计稿10分之一的大小，比如750px的设计稿 rootValue则为75

module.exports = {
  "plugins": {
      'postcss-pxtorem': {
          rootValue: 75,
          propList: ['*']
      }
  }
}

3、
index.html中

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">