typescript manual

Function

parseInt String to int

reportpeList.value[parseInt(request.value.report!)]

二维数组取某一类

 <el-checkbox-group :v-model='dataHelper.getAllData("code","Group",10).map(element=>element.name)'>

在数组中过滤值，以及大小写

reportpeList2 就是过滤后的值

    reportpeList2.value = reportpeList.value.filter(
      (_item) => _item.value == request.value.oeport
    )

### 大小寫

```clike
item.cmCustNo?.toLowerCase()?.includes(query.toLowerCase()) ||
item.cmCoName?.toLowerCase()?.includes(query.toLowerCase())

teamTreeRef.value!.filter(val.toUpperCase())

片段

Object.keys循環form表單

把form的數據添加到form data (Multi Part Data)，然後再submit。

Object.keys(form).forEach((key) => {
	formData.append(key, form[key])
})

元素

HTMLButtonElement

获取操作对象
<button @click=“handleClick” name=“button_name”>Click

const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(event.target);
console.log(event.currentTarget.name);
};

或者

<button @click='event=>{console.log(event.currentTarget)}' name="button_name">Click</button>

<button @click='event=>{console.log(event.target)}' name="button_name">Click</button>

日期

格式化日期

const testCases = [

  new Date().toLocaleDateString(), // 8/19/2020
  
  new Date().toLocaleString(undefined, 
  {year: 'numeric', month: '2-digit', day: '2-digit', 
  weekday:"long", hour: '2-digit', hour12: false, 
  minute:'2-digit', second:'2-digit'}), // 'Wednesday, 14/06/2023, 13:43:57'
  
  new Date().toLocaleDateString('en-US', 
  {year: 'numeric', month: '2-digit', day: '2-digit'}), 
  // 08/19/2020 (month and day with two digits)
  
  new Date().toLocaleDateString('en-ZA'), 
  // 2020/08/19 (year/month/day) notice the different locale
  
  new Date().toLocaleDateString('en-CA'), 
  // 2020-08-19 (year-month-day) notice the different locale
  
  new Date().toLocaleString("en-US", {timeZone: "America/New_York"}), 
  // 8/19/2020, 9:29:51 AM. (date and time in a specific timezone)
  
  new Date().toLocaleString("en-US", 
  {hour: '2-digit', hour12: false, timeZone: "America/New_York"}), 
   // 09 (just the hour)
   
]

内部变量和外部变量

const allMenu = ref([] as MenuItem[])

或者

export function useMenu() {
const allMenu = ref([] as MenuItem[])
}

在function 结束后useMenu就失效了，即使return出去，也没有数据为null。

定义数组，并初始化

const topMenu1: MenuItem[] = ref([])
const topMenu2 = ref([] as MenuItem[])
const topMenu3 = ref<MenuItem[]>()

兩種方法定義對象

    const custItemReq = {} as CustomerItemRequest
    const custItemReq: CustomerItemRequest = {}

是否初始化的区别

不通过{} 进行初始化，就不可以使用，所以定义变量最好养成初始化的习惯

const pageRequest = ref<PageRequest>({})
与
const pageRequest = ref<PageRequest>()
不可以使用
pageRequest.value.pageNum = 1

定义数据结构时？的作用

如果定义的数据结构每个值是必填项，或者定义成非必填项(?)，在使用时是不同的。

必填项 必须逐个赋值，即使初始化也要逐一赋值为空
如果都是非必填项，直接通过{} 直接赋值，简单

export interface RoleItem {
  roleId?: number
  roleCode?: string
}
//rest query form
roleRequest.value = {}
与
export interface RoleItem {
  roleId: number
  roleCode: string
}
初始化的形式
//rest query form
roleRequest.value.roleName = ''
roleRequest.value.roleDesc = ''

reqByCondition() 和 reqByCondition 的区别

在TS 中
reqByCondition 不会运行


reqByCondition() 会运行

捕获键盘回车键

const keyDown=(e) => { 
  if (e.keyCode == 13 || e.keyCode == 100) { 
    onSubmit()
  }
}
onMounted(() => { 
  window.addEventListener('keydown',keyDown)
})
onUnmounted(() => { 
  window.removeEventListener('keydown',keyDown,false)
})

throw new Error

throw new Error(“Get data error”) 是在浏览器的Console中显示错误信息。

在浏览器中调试Json

定义类型

定义数组

// 用于初始化空列表
userList: [] as UserInfo[],

// 用于尚未加载的数据
user: null as UserInfo | null,

function

Named function

function add(x: number, y: number): number {
  return x + y;
}

anonymous function

let myAdd = function (x: number, y: number): number {
  return x + y;
};

Axios

经典片段

 const ax = axios.create({
  baseURL: 'yourbaseUrl',
  withCredentials: true,
});

const loginUser = () => { const body ={username:state.values.email, password:state.values.password};
ax.post('/login',body).then(function(response){
return response}).then().catch(error => console.log(error));}

错误及解决

ref value

ref是一个对象，必须通过value才能使用

  const onSubmit = async () => {
    await saveOrUpdate(form)
  }
 修正后
const onSubmit = async () => {
    await saveOrUpdate(form.value)
  }

because it is a constant

Cannot assign to 'menuArr' because it is a constant.

const menuArr = ref([] as MenuItem[])
menuArr = data.content

因为 ref 定义的时一个 constant 常量，赋值的时候是对常量的值进行赋值，而不是常量。

menuArr.value = data.content

API 和 客户端定义的数据结构不一样

错误信息，并不是服务器端没有返回数据，而是双方的数据结果不同导致不能赋值。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')

Server

export type UserResponse = {
  success: string
  code: number
  message: string
  content: {
    id?: number
    userName?: string
    userPasswd?: string
    userFirstName?: string
  }
}

Client

export interface UserProfile {
  id?: number
  userName?: string
  userPasswd?: string