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不可以继承,但是可以使用联合类型和交叉类型来模拟继承;

相关推荐
一只小风华~7 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
摇滚侠9 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
叫我阿柒啊10 小时前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发
zheshiyangyang13 小时前
TypeScript学习【一】
javascript·学习·typescript
子兮曰18 小时前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
吴楷鹏19 小时前
TypeScript 为什么要增加一个 satisfies?
前端·typescript
zhangzuying102620 小时前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
叫我阿柒啊1 天前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
烛阴1 天前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
拜无忧2 天前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript