首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript基础——基本类型检查

为什么要使用TypeScript?...JavaScript设计之初只是为了补充Java的,在浏览器上做一些小的效果,并不是为了做大型复杂项目而开发的,js本身也是有很多缺陷的,关于为什么要用TS,小伙伴们可以瞅瞅这篇文章 :我们为什么要学习TypeScript...基本类型检查 1. 如何进行类型约束 类型约束其实很简单,只需要在变量、函数参数、函数返回值位置上加上:类型就可以了。...:表示任意类型,对该类型,TS不进行类型检查 看到这,我想大家已经知道TS有非常强大的类型检查系统,那么有个小问题 灵魂一问: 请问手机号应该定义成数字还是数字字符串?...tupleType:[string,number]; //第一项必须为字符串,第二项必须为数字,只能有两项,否则报错 tupleType = ["法医",5]; any类型:any类型可以绕过类型检查

1.2K10

实现TypeScript运行时类型检查

中的类型TypeScript 在设计之初便以兼容JavaScript 为原则, 所以JSON 也可以直接转换为TypeScript 中的类型.比如有以下JSON 数据:{ "gender": 0}该..., 那么便有可能导致严重的业务逻辑缺陷.根本原因在于, TypeScript 不会对数据的类型进行运行时的检验, TypeScript类型基本上只存在于编译时.这是众多BUG 的源头, 想以下以下场景...TypeScript 的运行时类型检查.io-ts 使用的是组合子(combinator)作为抽象模型, 这与大部分validator generator有本质上的区别.本文会着重带领读者实现io-ts...:interface Parser { parse: (i: I) => Either;}TypeScript类型系统由于我们的最终目标是实现于TypeScript 类型系统一一对应的类型检查..., 所以我们先理一理TypeScript 类型系统的(部分)基本机制.首先是TypeScript 的primitive 类型:type Primitive = number | string | boolean

2.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

TypeScript-字面量类型TypeScript-可辨识联合、可辨识联合完整性检查

字面量概述字面量就是源代码中一个 固定的值例如数值字面量: 1, 2, 3, ...例如字符串字面量: 'a', 'abc', ...在 TS 中我们可以把字面量作为具体的类型来使用:当使用字面量作为具体类型时..., 该类型的取值就必须是该字面量的值type MyNum = 1;let value1: MyNum = 1;let value2: MyNum = 2;如上的代码在编译器当中 let value2:...MyNum = 2; 是报错的,取值就必须是该字面量的值可辨识联合概述具有共同的 可辨识特征一个类型别名, 包含了具有共同的 可辨识特征 的类型的 联合关于什么是共同的可辨识特征如下:// 正方形interface...Math.PI * s.radius ** 2; }}如上代码中的 Shape 就是一个 可辨识联合:因为: 它的取值是一个 联合因为: 这个联合的每一个取值都有一个共同的 可辨识特征可辨识联合完整性检查在企业开发中..., 如果想对可辨识联合的完整性进行检查, 主要有两种实现方式分别如下方式一给函数添加返回值 + 开启 strictNullChecks如果实现的不完整在编译器当中是会进行报错的:图片// 正方形interface

18920

TypeScript与Babel、webpack的关系以及IDE对TS的类型检查

只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性。...带着这个问题,我们由浅入深,逐步介绍TypeScript、Babel以及我们日常使用IDE进行ts文件类型检查的关系,让你今后面对基于ts的工程能够做到游刃有余。...这就是为什么许多人将 Typescript 类型检查分到一个单独的进程。然而,Babel + TypeScript 组合仍然提供更快的编译,这要归功于 Babel 的高级缓存和单文件发射架构。...为什么类型检查失效了?还记得我们前面提到的babel怎么处理ts的? Babel 如何处理 TypeScript 代码?它删除它。...babel部分的处理,根类型没有根本的关系,而类型检查使用到的tsconfig和tsc则只作用在类型检查的部分,根ts代码编译没有任何关系。

40130

TypeScript类型声明

当我们使用TypeScript编写代码时,类型声明是非常重要的,它帮助我们定义变量、函数、类等的类型,从而提供更好的代码提示、类型检查和代码可读性。...以下是关于TypeScript类型声明的详细内容:基本类型声明在TypeScript中,我们可以使用以下关键字来声明基本类型:let num: number = 42;let str: string =...(Type Assertion)类型断言允许我们手动指定变量的类型,并告诉TypeScript编译器我们知道更多关于变量的类型信息。...: number; readonly id: number;}以上是关于TypeScript类型声明的一些重要内容。通过合理使用类型声明,我们可以增强代码的可读性、类型安全性和可维护性。...类型声明是TypeScript的核心特性之一,可以帮助我们构建更健壮的代码和应用程序。我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

21220

Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查

Element-Plus,但感觉这两款组件库太偏向业务风格了,现在项目的搭建最好能偏年轻化一点,最后还是选择了:Nuxt UI,主要是 Nuxt UI 是 Nuxt 官方推荐的,而且完美兼容 Nuxt,并且是用 TypeScript...编写的,并为所有组件和可组合函数提供类型。...tailwindcss 的类名都生效了:如果你遇到 icon 类似的错误,你应该还需要安装 @iconify-json/heroicons 这个库pnpm add @iconify-json/heroicons配置 TypeScript...1、 安装依赖pnpm add -D vue-tsc@^1 typescript 2、 添加到 nuxt.config 配置中 export default defineNuxtConfig({...// 构建时启动类型检查 typescript: { typeCheck: true } })总结到这里,我们的准备工作就完成了,可以在页面组件中使用 Nuxt UI 的组件,后续就可以着手开发页面

11910

TypeScript 基础类型

TypeScript 基础类型 TypeScript 包含的数据类型如下表: 数据类型 关键字 描述 任意类型 any 声明为 any 的变量可以赋予任意类型的值。...**注意:**TypeScript 和 JavaScript 没有整数类型。...---- Any 类型 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。...1、变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查,示例代码如下: let x: any = 1; // 数字类型 x = 'I am who I am'...; // 字符串类型 x = false; // 布尔类型 改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查,示例代码如下: let x: any = 4; x.ifItExists

59910

TypeScript函数类型

# 声明式类型函数 通过如下代码我们实现了一个返回值为number类型的方法,同时我们也对返回值和参数进行了约束 ``` function funcType(name:string,age:number...对方法进行添加默认值 ``` function funcType2(name:string="张三",age:number=18):number{ return age; } ``` # 表达式类型函数...numbe } var funcType6:funcType5=function(name:string,age:number):number{ return age; } ``` # 联合类型重载...通过如下代码我们可以实现一个联合类型函数,当然这可以采用重载的方式 当我们的参数是number类型时我们的返回值是number类型,当我们的参数是string类型时我们的返回值是string类型,这一块具体在我们实际业务中可以根据实际需求进行相应修改

73520

TypeScript】条件类型

条件类型(Conditional Types)是TypeScript中一种强大的类型系统特性,它允许我们根据类型关系来推断和选择类型。...X : Y这表示如果类型T可以赋值给类型U,则条件类型为X,否则为Y。...,它检查类型T是否为number类型。...根据条件的结果,返回不同的字符串类型。分布式条件类型条件类型还可以在联合类型上使用,这称为分布式条件类型。当我们传入一个联合类型的参数时,条件类型会遍历每个成员,并根据条件进行推断。...条件类型TypeScript类型系统的一个重要部分,它允许我们在类型级别上进行条件分支和类型选择。通过巧妙地组合泛型、联合类型和条件类型,我们可以定义出非常复杂且强大的类型

20940

TypeScript类型声明

前言本文主要讲解TypeScript的基本数据结构,主要包括JS基本数据类型以及TS特有的数据类型。...数组中数据的位置、类型以及个数必须要和声明的类型、声明类型的位置、声明类型的个数保持一致,否则就会报错。...)声明变量类型为any时编译时会绕过所有类型的检测,直接通过编译阶段的检查可以任意访问属性的方法和属性any类型可以赋值给任意类型如果变量初始没有定义类型,默认为any;经过赋值后,TS会根据赋值类型来标识变量的类型...;console.log(booleanValue)//trueany在使用过程中就像一个潘多拉魔盒,即使使用了断言,也丧失了在静态类型检查阶段发现错误的可能性。...具有以下特点:never类型是所有类型的子类型,即never类型可以赋值给任何类型。其他任何类型均不是never类型的子类型,即其他类型均不可赋值给never类型,除了never本身。

32930

TypeScript 类型系统

针对 JavaScript 上面的问题,聪明的同学就想那我们就给 JavaScript 加个类型吧,和 Java 一样,能够对变量的类型进行定义,这个想法就是 TypeScript类型系统, 在很大程度上弥补了...从 TypeScript 的名字就可以看出来,「类型」是其最核心的特性,TypeScript 也主要致力于解决 JavaScript 的类型混乱问题。...TypeScript 是静态类型 类型系统按照「类型检查的时机」来分类,可以分为下面 2 种 动态类型 静态类型 动态类型是指在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。...TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查,所以 TypeScript 是静态类型,这段 TypeScript 代码在编译阶段就会报错了: let foo...大部分 JavaScript 代码都只需要经过少量的修改(或者完全不用修改)就变成 TypeScript 代码,这得益于 TypeScript 强大的[类型推论][],即使不去手动声明变量 foo 的类型

82400
领券