TypeScript学习第十二篇 - 各种数据类型的定义

1. 数组类型

javascript 复制代码
const list1: number[] = [1, 2, 3];

const list2: Array<number> = [1, 2, 3];

const list3: [number, string, boolean] = [1, '2', true];

const list4: [{ name: string; age: number }] = [{ name: 'Jack', age: 30 }];

const list5: Array<{ name: string; age: number }> = [{ name: 'Jack', age: 30 }];

interface User {
    name: string
    age: number
}

const list6: Array<User> = [{ name: 'jack', age: 30 }]

2. 函数类型

javascript 复制代码
function add1(a: number, b: number): number {
    return a + b
}

function add2(a: number, b: number): void {
    console.log(a, b)
}

function add3(a: number, b: number): unknown {
    throw new Error('Error')
}

const add4 = (a: number, b: number): number => {
    return a + b
}

const add5: (a: number, b: number) => number = (a, b) => {
    return a + b
}

3. 元组类型

javascript 复制代码
const list: [number, string, boolean, object] = [1, '2', true, {}]

4. 交叉类型

javascript 复制代码
type AgeType = { age: number }

type UserType = { id: number; name: string }

const user: UserType & AgeType = { id: 1, name: 'Jack', age: 30 }

const userAge: AgeType = { age: 30 }

const userInfo: UserType = { id: 2, name: 'Tom' }

5. 接口类型

5.1. 类型的定义

javascript 复制代码
interface Person {
    name: string
    age: number
}

const Jack: Person = {
    name: 'Jack',
    age: 30
}

const Tom: Person = {
    name: 'Tom',
    age: 30
}

5.2. 定义只读可选

javascript 复制代码
interface Student {
    readonly name: string
    age?: number
}

const Lily:Student = {
    name: 'Lily'
    // 由于age为可选属性,只处可以省略
}

Lily.name = 'Tom'
// 报错,因为是只读属性

5.3. 定义任意属性

javascript 复制代码
interface Student {
    age: number,
    name: string,
    // 任意属性类型一定要为已声明属性的父类型,一般用联合类型,也可以用任意类型。
    [k: string]: string | number
}

const Jack:Student = {
    id: 1,
    age: 30,
    edu: '本科'
    name: 'Jack',
    gender: 'male',
}

任意属性类型一定要为已声明属性的父类型,一般用联合类型,也可以用任意类型。

5.4. 接口定义函数

javascript 复制代码
interface Sum {
    (x: number, y: number): number
}
const add: Sum = (x, y) => {
    return x + y
}

也可以通过type定义函数类型。

javascript 复制代码
type Sum = (x: number, y: number) => number

5.5. 接口的继承

javascript 复制代码
interface User {
    id: number
    name: string
}

interface Person extends User{
    age: number
}

interface Person {
    gender: string
}

const Tim: Person = {
    id: 1,
    age: 30,
    name: 'Tim',
    gender: 'Male'
}

通过type来实现类似于接口的继承。

javascript 复制代码
type User = { id: number; name: string }
type Person = { age: number } | User



const Tim: Person = {
    id: 1,
    age: 30,
    name: 'Tim',
}

6. 接口和Type区别?

  1. 接口通过interface定义,type是用来定义类型别名;

  2. 接口可以重复定义,type不可以;

  3. 接口可以继承,type不可以继承,但是可以使用联合类型和交叉类型来模拟继承;

相关推荐
熊猫钓鱼>_>6 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋6 小时前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
m0dw9 小时前
vue懒加载
前端·javascript·vue.js·typescript
流影ng1 天前
【HarmonyOS】并发线程间的通信
typescript·harmonyos
duansamve2 天前
TS在Vue3中的使用实例集合
typescript·vue3
FanetheDivine2 天前
ts中如何描述一个复杂函数的类型
前端·typescript
struggle20253 天前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
执剑、天涯3 天前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
chéng ௹4 天前
Vue3+Ts+Element Plus 权限菜单控制节点
前端·javascript·vue.js·typescript
武清伯MVP4 天前
阮一峰《TypeScript 教程》学习笔记——基本用法
笔记·学习·typescript