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

相关推荐
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
周三有雨8 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
小王码农记15 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
Star7682 天前
ts泛型的一个小知识
前端·typescript
盛夏绽放2 天前
Vue 3与TypeScript集成指南:构建类型安全的前端应用
前端·vue.js·typescript
Swift社区2 天前
使用 AI 在医疗影像分析中的应用探索
typescript·tensorflow·openai
九月儿3 天前
Vue3 + Vite 项目引入 Typescript
前端·typescript
周三有雨3 天前
Object.prototype.hasOwnProperty.call(item, key) 作用与用途
前端·javascript·vue.js·typescript·原型模式
swipe3 天前
Typescript进阶之类型体操套路四
前端·javascript·typescript
MavenTalk3 天前
Solana应用开发常见技术栈
rust·typescript·公链·solana·区块链开发·web3.js