说人话的Typescripts基础详解(一)

Typescript限定类型

我们把这种类型都叫做强类型

var a: Number = 3;

var b: Number = 4;

b="a"变量声明限定类型后,不能改变变量值的类型。

当前函数设置为输出number类型。

当前函数必须有返回值,且返回值必须为number类型。

eg:

function abcd(): number {


 var a: number = 1;

 return a;

}
void

不需要任何返回值的情况下,输出值为void

function abc(): void {

 //不返回任何值的函数 只执行

}

函数的参数在使用时也必须要给定参数类型

function abcdd(_a: number, b: string): void {

 //不返回任何值的函数 只执行

}

函数中的参数给定类型,我们在执行函数时,必要限定了类型

ts为了照顾原生js 他的模式化是一种模糊的鉴定

比如你对变量a没有给定类型,在其它的强类型中是会报错的,但是在ts中,也并不会报错。

构造函数后不需要给给定类型

class Box {

 // 为什么不需要给定类型呢,因为这个函数本身在执行时,new它以后得到对象,平时不会最直接使用box函数,而是使用new的方式。

 constructor() {}

 play(): void {}

 run(): number {}

}
类型 数组、元组

对于数组的类型给定方式

我一般使用 数组范型 的方式

var arr: Array<number> = [1, 2, 3, 4];

而习惯C语言的同学,一般写成:

var arr1 = number[] = [1,23,4]

数组类型当中的数据类型必须相同

那么要是数组类型不同怎么办,如果不同呢,我们可以定义为元组。

定义元组类型时
var list:[string,number,boolean] = ['a',10,true]

不同的类型元素的数组,这里叫做元组(元素的组合),元组调用的时候,调用的方式和我们数组的调用方式是一样的。

枚举类型

// 你可以把枚举称为常量的定义模式

enum STATUS{WALK='WALK',RUN="run "}

var gh = STATUS.WALK
any类型
var ae:any=1;

void

void主要用于函数,不返回任何值

function abc(): void {

 //不返回任何值的函数 只执行

}
never

never类型是指用不存在的值的类型。用于用于无法到达终点的函数

function error(message:string):never{

   throw new Error(message)

}

function infiniteLoop():never{

   while(true){}

}


object 对象型

错误的给定方式:

var arrbbb:Array<object> = [{name:''}]

正确的给定方式为:

class ItemVo{

   id:number = 0;

   name:string = '';

   price:number = 1;

   selected:boolean = false;

   constructor(_id:number,_name:string,_price:number,_selected:boolean){this.id = _id;this.name = _name;this.price = _price;this.selected = _selected;

   }

}
var arrtEST:Array<ItemVo> = [

   new ItemVo(100,'a',1,false),

   new ItemVo(1001,'a',1,false),

   new ItemVo(1002,'a',1,false)

]

看到这里,大家会想起元组,元组是这种类型,但是元组是数组类型,元组是一个一个元素给的,但是这是一个一个key给定的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue 3和TypeScript中实现表格某一列的字典匹配,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Vue 3和TypeScript,以及相关的依赖。 2. 在Vue组件中定义表格数据和字典数据。你可以使用`ref`来声明响应式的变量,并将其初始化为空数组或空对象。 ```typescript import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const tableData = ref([]); const dictionaryData = ref({}); // 获取表格数据和字典数据的方法,可以从后端接口获取或其他方式 const fetchTableData = () => { // ... }; const fetchDictionaryData = () => { // ... }; // 在组件初始化时获取表格数据和字典数据 fetchTableData(); fetchDictionaryData(); return { tableData, dictionaryData, } }, }); ``` 3. 在获取到表格数据和字典数据后,你可以使用计算属性来进行字典匹配,并返回处理后的表格数据。 ```typescript import { computed } from 'vue'; // ... export default defineComponent({ // ... computed: { processedTableData() { return computed(() => { return this.tableData.value.map((row: any) => { const gender = row.gender; const matchedValue = this.dictionaryData.value[gender] || ''; return { ...row, gender: matchedValue }; }); }); }, }, }); ``` 4. 在模板中渲染处理后的表格数据。 ```html <template> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr v-for="row in processedTableData" :key="row.id"> <td>{{ row.id }}</td> <td>{{ row.name }}</td> <td>{{ row.gender }}</td> </tr> </tbody> </table> </template> ``` 通过以上步骤,你可以在Vue 3和TypeScript中实现表格某一列的字典匹配。请根据实际情况修改示例代码中的变量名、数据获取方法和具体逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值