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

相关推荐
Amd7941 小时前
Nuxt.js 应用中的 prepare:types 事件钩子详解
typescript·自定义·配置·nuxt·构建·钩子·类型
王解1 天前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
鸿蒙开天组●1 天前
鸿蒙进阶篇-网格布局 Grid/GridItem(二)
前端·华为·typescript·harmonyos·grid·mate70
zhizhiqiuya1 天前
第二章 TypeScript 函数详解
前端·javascript·typescript
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
王解2 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
_jiang2 天前
nestjs 入门实战最强篇
redis·typescript·nestjs
清清ww2 天前
【TS】九天学会TS语法---计划篇
前端·typescript
努力变厉害的小超超3 天前
TypeScript中的类型注解、Interface接口、泛型
javascript·typescript
川石教育3 天前
Vue前端开发:元素动画效果之过渡动画
前端·vue.js·前端框架·前端开发·vue前端