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

相关推荐
摸鱼仙人~1 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔2 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE2 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
前端拿破轮2 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林2 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript
奋飛2 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
BillKu12 天前
Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
前端·javascript·typescript
小Lu的开源日常12 天前
Drizzle vs Prisma:现代 TypeScript ORM 的深度对比
数据库·typescript·前端框架
Shixaik12 天前
配置@为src
typescript·前端框架
BillKu13 天前
Vue3 + TypeScript合并两个列表到目标列表,并且进行排序,数组合并、集合合并、列表合并、list合并
vue.js·typescript·list