您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

一篇文章搞懂TypeScript

时间:2024-01-08 13:45:17  来源:今日头条  作者:秘密菜单

TypeScript 是 JAVAScript 的超集,一方面给动态类型的 js 增加了类型校验,另一方面扩展了 js 的各种功能。

原始数据类型

  • 字符串
  • 数值
  • 布尔
  • null
  • undefined
  • Symbol
  • BigInt
let str: string = '周小黑'
let age: number = 18
let beautiful: boolean = true
let n: null = null
let u: undefiend = undefined
let s: Symbol = Symbol('1')
let int: BigInt = BigInt(10)

any、unknown、void、never

  • any:任意类型,是一切类型的父类型,也是一切类型的子类型。会跳过类型检查,和我们平时写js一样
  • unknown:未知类型,是一切类型的父类型,但不是一切类型的子类型。比 any 更安全,比如声明了一个对象为 unkonw 要读取属性或调用方法时需要先进行具体类型判断或用 as 进行类型断言,收窄类型后才能读取
  • void:没有任何返回值的函数,声明一个 void 类型的变量没有什么用,因为只能赋值为 undefined 和 null(只在 --strictNullChecks 未指定时)
  • never:不存在值的类型

any、unknonwn是所有类型的父类型,null、undefined、never是所有类型的子类型

Object、object、{}

  • Object:原始对象类型,支持所有类型,注意为非原始数据类型时不能访问值的任何属性
  • object:普通对象类型,只能是非原始数据类型对象、数组、函数这些,我们不能访问值的任何属性
  • {}:对象字面量,无自身属性的对象类型,不能进行属性操作
let num: Object = 12
let girl: Object = { age: 18 }
console.log(girl.age) // 会报错

let arr: object = [1, 2, 3]
console.log(arr[0]) // 会报错
console.log(arr) // 可以正常运行

let person: {} = {name: 'zhou'}
console.log(boy.name) // 会报错

// 可以正常运行
let boy: {name: string} = {name: 'zhou'}
boy.name = '周'
console.log(boy)

注意需要访问某个对象的属性或方法时,应该定义具体的属性类型或通过 interface 接口定义类型,才能进行属性的读取、赋值操作。

其他常用类型、DOM类型

  • 其他类型:除了上面提到的一些类型,还有 Function、Date、RegExp、Error、Promise
  • Array和Tuple类型:Tuple元组类型和数组类型类似,不过元组表示一个已知元素数量和元素类型的数组(各元素的类型不必相同)
  • Enum类型:枚举类型
  • DOM类型:Document、htmlElement、NodeList、Event、MouseEvent

interface、type

  • interface:接口,只能定义对象结构的数据类型,可以通过extends扩展,重复定义会被合并
  • type:类型别名,可以定义原始类型,可以通过&符号合并类型,不可以重复定义;除了类型还可以用来限制值;注意类型后面需要用 = 来写,而 interface 则不用

两个都可以用来定义类型,也比较类似,推荐优先使用 interface。

联合类型、交叉类型

  • 联合类型:用 | 表示联合类型,相当于或
  • 交叉类型:用 & 合并多个类型,相当于把多个类型合并到一起,可以用于合并多个 interface 或 type
type Person = {
    name: string
    age: number | string
}

interface Man {
    money: number
}

let boy: Person & Man = {
    name: 'zhou',
    age: '18',
    money: 100
}

console.log(boy)

符号

  • & 且
  • | 或
  • ! 非
  • ?? 空值合并运算符
  • ?. 可选链操作符,用在获取对象的深层属性或方法前
  • ? 加在类型上表示可选参数或者可选属性,一般用在对象属性或者函数参数上
interface Person {
    name: string,
    age?: number
}

let man: Person = {
    name: 'zhou'
}

function add(x: number, y?: number): number {
    return y ? (x + y) : x
}

add(10)
add(10, 12)

字面量

这个用来将变量的值限制成预定的,是对值得限定,看着有点像联合类型(是对类型得限定)

let a: 10 | 'zhou' | [1, 2, 4]
// 也可以用 type 类型别名来写成下面得形式
// type A = 10 | 'zhou' | [1, 2, 4]
// let a: A

a = [1, 2, 4]
a = false // Type 'false' is not assignable to type '"zhou" | 10 | [1, 2, 4]'.ts(2322)

class 类

  • ts 支持面向对象的所有特性,比如:类、接口等
  • 类可以通过 implements 去实现接口 interface
  • 修饰符:public / private / protected / abstract / static(js中也有)

泛型

泛型相当于一个占位符,可以理解成函数参数,使用的时候传进来的是什么,在内部就可以用用占位符去使用,一般多用于函数中,使用时用一对尖括号加上占位符,多用字母 T 占位。就是把定义的类型变量想象成一个函数,只不过参数部分用尖括号传递,使用的时候再用尖括号把具体的类型传进去

// 函数
function func<T>(arg: T): T {
    return arg
}

// interface 接口
interface Person<T> {
    name: string,
    age: number,
    custom: T
}
let man: Person<boolean> = {
    name: 'zhou',
    age: 18,
    custom: true
}

// 元组
type Ftype<T, U> = [number, T, boolean, U]
let fruits: Ftype<Function, string> = [1, () => {}, false, '水果']

内置泛型工具

  • Partial
  • Required
  • Readonly
  • Pick
  • Exclude
  • Extract
  • Omit
  • Record
  • ReturnType
  • ...

 

关键字

extends

  • js 中 class 类实现继承
  • ts 的 interface 接口实现继承
  • 判断类型包含

as

类型断言,将一个大范围的类型收窄

in

遍历,从多个类型中去遍历出每个类型

keyof

ts 2.1 版本中引入,用于获取某种类型中的所有键,返回的是联合类型(跟我们用 Object.keys 获取对象的所有属性键类似,只不过 Object.keys 返回的是所有键名数组)。

获取到类型的键后,我们就可以访问到键对应的类型:

interface Person {
    name: string,
    age: number
}

type Name = Person['name']
type P1 = Person['name' | 'age'] // string | number
// 上面的 P1 也就相当于:
type P2 = Person[keyof Person] // string | number

typeof

  • js 中判断类型
  • ts 中获取一个变量的申明类型

infer

推断的占位,当某个类型不确定时,就可以暂时表示为 xx

interface、type、对象属性多个中的符号

  • interface 和 type 中多个可以用分号、逗号,也可以不加,也可以混用,不过团队开发中尽量统一成一种写法
  • 对象属性多个只能用逗号
interface Person {
    name: string
    age: number;
    gender: string,
}

let man: Person = {
    name: 'zhou',
    age: 18,
    gender: '男'
}


Tags:TypeScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
一篇文章搞懂TypeScript
TypeScript 是 JavaScript 的超集,一方面给动态类型的 js 增加了类型校验,另一方面扩展了 js 的各种功能。原始数据类型 字符串 数值 布尔 null undefined Symbol BigIntlet s...【详细内容】
2024-01-08  Search: TypeScript  点击:(76)  评论:(0)  加入收藏
TypeScript中的null和undefined的区别
在TypeScript中,null和undefined是两个特殊的值,用于表示变量的缺失或未定义。尽管它们在某些情况下可能看起来相似,并且都可以表示"没有值",但它们在语义和用法上存在一些重要...【详细内容】
2023-12-07  Search: TypeScript  点击:(132)  评论:(0)  加入收藏
为什么要在项目中使用TypeScript?
译者 | 李睿随着越来越多的开发人员采用TypeScript,人们需要了解在下一个项目中应该使用TypeScript的原因。尽管它在早期应用中遇到了一些阻力,但在过去十年,它迅速成为一种广...【详细内容】
2023-11-30  Search: TypeScript  点击:(160)  评论:(0)  加入收藏
一文读懂 TypeScript 泛型及应用
泛型是静态类型语言的基本特征,允许将类型作为参数传递给另一个类型、函数、或者其他结构。TypeScript 支持泛型作为将类型安全引入组件的一种方式。这些组件接受参数和返回...【详细内容】
2023-11-20  Search: TypeScript  点击:(193)  评论:(0)  加入收藏
TypeScript 5.3 来了,一大波新特性
根据 TypeScript 路线图,TypeScript 5.3 计划于 11 月 14 日发布。下面是该版本带来的新特性: 导入属性 导入类型中稳定支持 resolution-mode 所有模块模式均支持 resolution-...【详细内容】
2023-11-16  Search: TypeScript  点击:(153)  评论:(0)  加入收藏
万字详解 TypeScript 高级用法
TypeScript 是一种类型安全的 JavaScript 超集,除了基本类型和对象类型之外,TypeScript 还提供了一些高级类型系统,使得我们可以更好地处理复杂的数据结构和业务逻辑。本文将深...【详细内容】
2023-10-31  Search: TypeScript  点击:(339)  评论:(0)  加入收藏
不要在Typescript中使用Function类型
原文链接:https://www.totaltypescript.com/dont-use-function-keyword-in-typescript翻译:一川在Typescript中不应该使用Function作为一个类型,因为它可以表示任何函数。通常,...【详细内容】
2023-09-27  Search: TypeScript  点击:(279)  评论:(0)  加入收藏
为什么选择 TypeScript,它有什么优点吗?
在当今快速发展的软件开发领域,TypeScript技术的重要性日益凸显。TypeScript是一种由微软开发的开源编程语言,它扩展了JavaScript,并为开发者提供了强大的静态类型检查。首先,Ty...【详细内容】
2023-09-22  Search: TypeScript  点击:(191)  评论:(0)  加入收藏
掌握TypeScript,开启高质量前端之旅
相信TypeScript对于一个前端开发来讲应该是不陌生的,因为作为一个前端开发者来说,不是在学习如何使用TS就是在去学习TS如何使用的路上。为什么这么说呢?一些技术的发展离不开人...【详细内容】
2023-09-22  Search: TypeScript  点击:(283)  评论:(0)  加入收藏
反驳来了!放弃TypeScript?说明你无知!
作者 | Robert Vitonsky编译 | 云中 几天前,汉森 (David Heinemeier Hansson)宣布 Turbo8 即将放弃 TypeScript。我心想:放弃就放弃吧,反正我也不知道 Turbo 8 是什么鬼。 然而...【详细内容】
2023-09-15  Search: TypeScript  点击:(232)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(4)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(25)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(22)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(52)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(56)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(65)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(97)  评论:(0)  加入收藏
站内最新
站内热门
站内头条