在过去的几年里 TypeScript 变得越来越流行，现在许多工作都要求开发人员了解 TypeScript ，各大厂的大型项目基本都要求使用 TypeScript 编写。 下面是我整理的一些初学者必备的一些知识点～ Typescript 简介 据官方描述： TypeScript 是 JavaScript 的超集，这意味着它可以完成 JavaScript 所做的所有事情，而且额外附带了一些能力。 JavaScript 本身是一种动态类型语言，这意味着变量可以改变类型。使用 TypeScript 的主要原因是就是为了给 JavaScript 添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能改变。它可以防止很多bug ! Typescript 值得学吗？ 下面是学习 Typescript 的几个理由： 研究表明， TypeScript 可以发现 15% 的常见 b...

前言 在群里看到一些问题和言论：为什么你们这么喜欢“类型体操”？为什么我根本学不下去 TypeScript？我最讨厌那些做类型体操的了；为什么我学了没过多久马上又忘了？ 有感于这些问题，我想从最简单的一个角度来切入介绍一下 TypeScript，并向大家介绍并不是只要是个类型运算就是体操。并在文中介绍一种基本思想作为你使用类型系统的基本指引。 引子 我将从一个相对简单的 API 的设计过程中阐述关于类型的故事。在这里我们可以假设我们现在是一个工具的开发者，然后我们需要设计一个 API 用于从对象中拿取指定的一些 key 作为一个新的对象返回给外面使用。 垃圾 TypeScript 一个人说：我才不用什么破类型，我写代码就是要没有类型，我就是要随心所欲的写。然后写下了这段代码。 declare function pick(target: any, ...keys: any): any 他的用户默默的写下了这段代码： pick(undefined, 'a', 1).b 写完运行，发现问题大条了，控制台一堆报错，接口数据

前言 在本文中，我们将介绍六个 TypeScript 的高级技巧，每个技巧都有例子展示其如何实现和使用。使用这些技巧，您不仅可以提高您的代码质量，也可以提高您作为一名 TypeScript 程序员的技能水平。 1 — 高级类型（Advanced Types） 使用 TypeScript 的高级类型，如映射类型和条件类型，可以基于现有类型构建新类型。通过使用这些类型，您可以在强类型系统中更改和操作类型，从而使您的代码具有更大的灵活性和可维护性。 映射类型 映射类型会遍历现有类型的属性，并应用变换来创建新类型。一个常见的用例是创建一个类型的只读版本。 type Readonly<T  = {   readonly [P in keyof T]: T[P]; }; interface Point {   x: number;   y: number; } type ReadonlyPoint = Readonly<Point ; 在这个例子中，我们定义了一个叫做 Readonly 的映射类型，它以类型 T 为泛型参数，并使其所有属

TypeScript 是由微软进行开发和维护的一门开源的编程语言，它是 JavaScript 的严格语法超集，提供了可选的静态类型检查。本文将探索 TypeScript 的发展历程、它对 JavaScript 生态系统的影响，以及它如何成为开发人员的必备工具。 发展历程 2010：设计背景 TypeScript 的发展可以追溯到 2010 年， C 和 Turbo Pascal 的创建者 Anders Hejlsberg 开始思考如何改进 JavaScript 的开发体验。在那个时候，JavaScript 还没有成为主流的开发语言，而且缺乏一些关键的特性，比如模块化和类型系统。因此，Anders Hejlsberg 决定创建一种新的语言，它可以在保留 JavaScript 精髓的同时，增加一些用来构建大型应用的特性。 在接下来的几年里，微软团队投入了大量的时间和精力来开发 TypeScript，并于 2012 年将其首次...

TypeScript 已于 2023.0630 发布 5.2 beta 版本，你可以在 5.2 Iteration Plan 查看所有被包含的 Issue 与 PR。如果想要抢先体验新特性，执行： $ npm install typescript@beta 来安装 beta 版本的 TypeScript，或在 VS Code 中安装 JavaScript and TypeScript Nightly 来更新内置的 TypeScript 支持。 本篇是笔者的第八篇 TypeScript 更新日志，上一篇是 「TypeScript 5.1 beta 发布：函数返回值类型优化、Getter/Setter类型优化、JSX 增强」，你可以在此账号的创作中找到（或在掘金/知乎搜索 林不渡 ），接下来笔者也将持续更新 TypeScript 的 DevBlog 相关，感谢你的阅读。 另外，由于 beta 版本与正式版本通常不会有明显的差异，这一系列通常只会介绍 beta 版本而非正式版本。 using 关键字：显式资源管理 TypeScript 团

前言 在本文中，我们将介绍六个 TypeScript 的高级技巧，每个技巧都有例子展示其如何实现和使用。使用这些技巧，您不仅可以提高您的代码质量，也可以提高您作为一名 TypeScript 程序员的技能水平。 1 — 高级类型（Advanced Types） 使用 TypeScript 的高级类型，如映射类型和条件类型，可以基于现有类型构建新类型。通过使用这些类型，您可以在强类型系统中更改和操作类型，从而使您的代码具有更大的灵活性和可维护性。 映射类型 映射类型会遍历现有类型的属性，并应用变换来创建新类型。一个常见的用例是创建一个类型的只读版本。 type Readonly<T  = {   readonly [P in keyof T]: T[P]; }; interface Point {   x: number;   y: number; } type ReadonlyPoint = Readonly<Point ; 在这个例子中，我们定义了一个叫做 Readonly 的映射类型，它以类型 T 为泛型参数，并使其所有属

作为一种在开发人员中越来越受欢迎的编程语言，TypeScript 不断发展，带来了大量的改进和新功能。在本文中，我们将深入研究 TypeScript 的最新迭代版本 5.0，并探索其最值得注意的更新。 1.装饰器 TypeScript 5.0 引入了改进的装饰器系统，改进了类型检查和元数据生成。 装饰器现在可以更无缝地与类型系统一起工作，使您能够编写更清晰、更健壮的代码。下面是方法装饰器如何工作的一个简单示例： function log<This, Args extends any[], Return ( target: (this: This, ...args: Args) = Return, context: ClassMethodDecoratorContext< This, (this: This, ...args: Args) = Return ) { const methodName = String(context.name); function replacementMethod(this: T

6 月 1 日，TypeScript 5.1 正式发布。以下是该版本中新增的主要功能： 改进函数返回值类型 undefined 的类型推断 getter 和 setter 支持设置不同类型 JSX 元素和 JSX 标签类型之间解耦类型检查 带命名空间的 JSX 标签 typeRoots 在模块解析中被查询 JSX 标签支持链接光标 @Param JSDoc 标签中支持代码补全 优化 可以通过以下 npm 命令来安装最新版本： npm install -D typescript 改进函数返回值类型 undefined 的类型推断 在 JavaScript 中，如果函数没有返回值，就会返回 undefined ： function foo() {   // 没有 return } // x = undefined let x = foo(); 然而，在以前版本的 TypeScript 中，只有返回值类型为 void 和 any 的函数可以没有 return 语句。这意味着即使

如今，越来越多的项目将 JavaScript 代码迁移到 TypeScript，TS 是一种静态类型语言，能够提高项目的可读性、可维护性和健壮性。然而，大规模迁移是一项复杂的任务，从 JavaScript 迁移到 TypeScript 有两种选择： （1）混合迁移： 逐个文件迁移，修复类型错误，然后重复，直到迁移完整项目。allowJS 配置选项允许 TypeScript 和 JavaScript文件同时存于项目中，这使得这种方法成为可能！在混合迁移策略中，不必暂停开发，可以逐个文件逐步迁移。虽然，在大规模项目上，这个过程可能需要很长时间。 （2) 整体迁移： 将 JavaScript 或部分 TypeScript 项目并将其完全转换。需要添加一些 any 类型和 @ts-ignore 注释，以便项目编译无误，但随着时间的推移，可以用更具描述性的类型替换它们。这种策略的优势如下： 跨项目的一致性： 整体迁移将保证每个文件的状态相同，无需记住可以在何处使用 TypeScript 功能以及编译器将在何处防止基本错误。 只修复一种类型比修复文件...

1. Why 在介绍什么叫 TypeScript 类型编程和为什么需要学习 TypeScript 类型编程之前，我们先看一个例子，这里例子里包含一个 promisify 的函数，这个函数用于将 NodeJS 中 callback style 的函数转换成 promise style 的函数。 import as fs from "fs"; function promisify(fn) { return function(...args) { return new Promise((resolve, reject) = { fn(...args, (err, data) = { if(err) { return reject(err); } resolve(data); }); }); } } (async () = { let file = await promisify(fs.readFile)("./xxx.json"); })();

TypeScript 已于 2023.04.18 发布 5.1 beta 版本，你可以在 5.1 Iteration Plan 查看所有被包含的 Issue 与 PR。如果想要抢先体验新特性，执行： $ npm install typescript@beta 来安装 beta 版本的 TypeScript，或在 VS Code 中安装 JavaScript and TypeScript Nightly 来更新内置的 TypeScript 支持。 本篇是笔者的第七篇 TypeScript 更新日志，上一篇是 「TypeScript 5.0 beta 发布：新版 ES 装饰器、泛型参数的常量修饰、枚举增强等」，你可以在此账号的创作中找到（或在掘金/知乎搜索 林不渡 ），接下来笔者也将持续更新 TypeScript 的 DevBlog 相关，感谢你的阅读。 另外，由于 beta 版本与正式版本通常不会有明显的差异，这一系列通常只会介绍 beta 版本而非正式版本。 点评：这个版本的改动应该是这个系列开始发表以来最少的一次，同时改动点也基本全部关注

当前找工作环境恶劣，很多求职者表示招聘不仅要求会 vue，还要求会 react。 刚好这段时间我用 React18 + Vite + TS 为公司 从 0 到 1 开发 了一个项目，就顺便总结了一些前端开发知识和技巧，帮助我记忆这些知识的同时，希望能对你也有所启发。欢迎评论区交流。 我会把代码（当然不是真实项目的。。）上传到 GitHub 上，文末可以取链接。最后还请多多评论、点赞支持！废话不多说，下面开始进入正题： 创建项目 选择 React + TypeScript 模板。不要选用 React + TypeScript + SWC。因为 SWC 不支持 babel 插件，不能转换 es6 语法和特性。这个后面也会说到。 pnpm create vite 添加 eslint 支持 这里有一个 eslint 常用配置、插件的清单，可以收藏看看。 https://github.com/dustins

背景 之前在技术需求中曾调研了基于 TypeScript 的数据校验方案，其中调研了一个叫 Deepkit 的第三方库，可以将 TypeScript 的类型信息保留到运行时进行消费。 TypeScript 带来的 传统开发上，Javascript 基本没有提供任何类型保护，所有的类型错误都需要在运行时才能发现，而TypeScript 为开发者提供了一套静态类型检查的方案，它提倡开发者在源码中主动声明类型信息，并与对应的变量和操作相匹配，并在编译阶段进行检查，类型相关的错误在编译时就暴露出来，一方面使代码更规范了，一方面也极大程度地规避了许多代码错误，提高了代码的健壮性。 TypeScirpt 拥有完备的类型系统。但很可惜，它在这方面的能力在运行时几乎完全不存在。TypeScript C...

2023 年 3 月 17 日，TypeScript 5.0 正式发布！此版本带来了许多新功能，旨在使 TypeScript 更小、更简单、更快。TypeScript 5.0 实现了新的装饰器标准、更好地支持 Node 和打构建工具中的 ESM 项目的功能、库作者控制泛型推导的新方法、扩展了 JSDoc 功能、简化了配置，并进行了许多其他改进。 可以通过以下 npm 命令开始使用 TypeScript 5.0： npm install -D typescript 以下是 TypeScript 5.0 的主要更新： 全新装饰器 const 类型参数 extends 支持多配置文件 所有枚举都是联合枚举 --moduleResolution bundler 自定义解析标志 --verbatimModuleSyntax 支持 export type JSDoc 支持 @satisfies JSDoc 支持 @overload 编辑器中不区分大小写的导入排序 完善 switch/case