面向JS程序员的TypeScript

定义类型

你可以在 JavaScript 中使用多种设计模式。 但是,某些设计模式使得自动推断类型变得困难(例如,使用动态编程的模式)。 为了涵盖这些情况,TypeScript 支持 JavaScript 语言的扩展,它为你提供了告诉 TypeScript 类型应该是什么的地方。

例如,要创建一个包含 name: stringid: number 的推断类型的对象,你可以编写:

js 复制代码
const user = {
	name: "Kevin",
	id: 0,
}

你可以使用interface声明明确描述此对象的形状:

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

然后,你可以在变量声明后使用类似: TypeName的语法来声明 JavaScript 对象符合新interface的形状:

ts 复制代码
const user: User = {
    name: "Kevin",
    id: 0,
}

如果你提供的对象与你提供的接口不匹配,TS会警告你

由于JS支持类和面向对象编程,因此TS也支持:

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

class UserAccount {
    name: string;
    id: number;

    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
}

const user2: User = new UserAccount("Book", 1)

组合类型

使用 TypeScript,你可以通过组合简单类型来创建复杂类型。 有两种流行的方法可以做到这一点: 联合和泛型。

联合

使用联合,你可以声明一个类型可以是多种类型之一。 例如,你可以将 boolean 类型描述为 truefalse

ts 复制代码
type MyBool = true | false;

注意: 如果将鼠标悬停在上面的 MyBool 上,你会看到它被归类为 boolean。 这是结构类型系统的一个属性。 更多内容请见下文。

联合类型的一个流行用例是描述允许值是的stringnumber字面 的集合:

ts 复制代码
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

联合也提供了一种处理不同类型的方法。 例如,你可能有一个接受 arraystring 的函数:

ts 复制代码
function getLength(obj: string | string[]) {
  return obj.length;
}

泛型

泛型为类型提供变量。 一个常见的例子是数组。 没有泛型的数组可以包含任何东西。 具有泛型的数组可以描述数组包含的值。

ts 复制代码
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
相关推荐
艾莉丝努力练剑7 分钟前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
独立开阀者_FwtCoder13 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder16 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder16 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
witton2 小时前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合