TypeScript 是一种类型化的语言,允许你指定变量、函数参数、返回的值和对象属性的类型。
以下是 TypeScript 高级类型的使用方法总结,而且带有例子。
Intersection 类型是一种把对多种类型进行组合的方法。这意味着你可以把给定的多种类型合并,并得到一个带有全部属性的新类型。
type LeftType = {
id: number
left: string
}
type RightType = {
id: number
right: string
}
type IntersectionType = LeftType & RightType
function showType(args: IntersectionType) {
console.log(args)
}
showType({ id: 1, left: "test", right: "test" })
// Output: {id: 1, left: "test", right: "test"}
代码中的 IntersectionType ”组合了两种类型: LeftType 和 RightType,并使用 & 符号来构造交 intersection 类型。
Union 类型用来在给定变量中使用不同类型的注释。
type UnionType = string | number
function showType(arg: UnionType) {
console.log(arg)
}
showType("test")
// Output: test
showType(7)
// Output: 7
showType 函数是一个 union 类型,它能够接受字符串和数字作为参数。
泛型类型是一种用来重用给定类型的一部分的方式。它用来处理参数传入的类型 T。
function showType<T>(args: T) {
console.log(args)
}
showType("test")
// Output: "test"
showType(1)
// Output: 1
要构造一个泛型类型,需要用到尖括号并将 T 作为参数进行传递。
在下面的代码中,我用的是 T(这个名称随你决定)这个名字,然后使用不同的类型注释调用了两次 showType 函数,因为它是可以重用的。
interface GenericType<T> {
id: number
name: T
}
function showType(args: GenericType<string>) {
console.log(args)
}
showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}
function showTypeTwo(args: GenericType<number>) {
console.log(args)
}
showTypeTwo({ id: 1, name: 4 })
// Output: {id: 1, name: 4}
还有另一个例子,例子中有一个接口 GenericType,这个接口接收通用类型 T。由于它是可重用的,因此我们可以用字符串和数字来调用它。
interface GenericType<T, U> {
id: T
name: U
}
function showType(args: GenericType<number, string>) {
console.log(args)
}
showType({ id: 1, name: "test" })
// Output: {id: 1, name: "test"}
function showTypeTwo(args: GenericType<string, string[]>) {
console.log(args)
}
showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] })
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}
泛型类型可以接收多个参数。在例子中传入两个参数:T 和 U,然后将它们用作属性的类型注释。也就是说,我们现在可以给这个该接口并提供两个不同的类型作为参数。
TypeScript 提供了方便的内置实用工具,可帮助我们轻松地操作类型。在使用时需要将要处理的类型传递给 <>。
Partial 允许你将所有类型为 T 的属性设为可选。它将在每个字段旁边添加一个 ? 标记。
interface PartialType {
id: number
firstName: string
lastName: string
}
function showType(args: Partial<PartialType>) {
console.log(args)
}
showType({ id: 1 })
// Output: {id: 1}
showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John", lastName: "Doe"}
代码中有一个名为 PartialType 的接口,它作为函数 showType() 的参数的类型注释。要想使属性是可选的,必须用到 Partial 关键字,并传入 PartialType 类型作为参数。现在所有字段都变成了可选的。
与 Partial 不同,Required 使所有类型为 T 的属性成为必需的。
interface RequiredType {
id: number
firstName?: string
lastName?: string
}
function showType(args: Required<RequiredType>) {
console.log(args)
}
showType({ id: 1, firstName: "John", lastName: "Doe" })
// Output: { id: 1, firstName: "John", lastName: "Doe" }
showType({ id: 1 })
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName
即使在之前先将它们设为可选的,Required 也会使所有符合条件的属性成为必需的。而且如果省略掉属性的话TypeScript 将会引发错误。
这个类型会对所有类型为 T 的属性进行转换,使它们无法被重新赋值。
interface ReadonlyType {
id: number
name: string
}
function showType(args: Readonly<ReadonlyType>) {
args.id = 4
console.log(args)
}
showType({ id: 1, name: "Doe" })
// Error: 无法给'id'重新赋值,因为它是只读属性。
在代码中用 Readonly 来使 ReadonlyType 的属性不可被重新赋值。如果你一定要为这些字段赋值的话,将会引发错误。
Besides that, you can also use the keyword readonly in front of a property to make it not reassignable.
除此之外,还可以在属性前面使用关键字“ readonly”,以使其无法重新分配。
interface ReadonlyType {
readonly id: number
name: string
}
它允许你通过选择某个类型的属性 k ,从现有的模型 T 中创建一个新类型。
interface PickType {
id: number
firstName: string
lastName: string
}
function showType(args: Pick<PickType, "firstName" | "lastName">) {
console.log(args)
}
showType({ firstName: "John", lastName: "Doe" })
// Output: {firstName: "John"}
showType({ id: 3 })
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'
Pick 与前面看到的那些有点不同。它需要两个参数 —— T 是要从中选择元素的类型,k 是要选择的属性。还可以通用管道符号 (|)将它们分开来选择多个字段。
Omit 与Pick 相反。它从类型 T 中删除 K 属性。
interface PickType {
id: number
firstName: string
lastName: string
}
function showType(args: Omit<PickType, "firstName" | "lastName">) {
console.log(args)
}
showType({ id: 7 })
// Output: {id: 7}
showType({ firstName: "John" })
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'
Omit 的工作方式与 Pick 类似。
Extract 使你通过选择出现在两个不同类型中的属性来构造类型。它从 T 中提取所有可分配给 U 的属性。
interface FirstType {
id: number
firstName: string
lastName: string
}
interface SecondType {
id: number
address: string
city: string
}
type ExtractType = Extract<keyof FirstType, keyof SecondType>
// Output: "id"
在代码中的两个接口里有共有的属性 id。通过 Extract 可以把 id 提取出来。如果你有多个共享字段,Extract 将会提取所有相似的属性。
与 Extract 不同,Exclude 通过排除已经存在于两个不同类型中的属性来构造类型。它排除了所有可以分配给 U 的字段。
interface FirstType {
id: number
firstName: string
lastName: string
}
interface SecondType {
id: number
address: string
city: string
}
type ExcludeType = Exclude<keyof FirstType, keyof SecondType>
// Output; "firstName" | "lastName"
在上面的代码中,属性 firstName 和 lastName 可分配给 SecondType 类型,因为它们在那里不存在。通过 Extract 可以按预期返回这些字段。
Record 可以帮你构造一个类型,该类型具有给定类型 T 的一组属性 K。当把一个类型的属性映射到另一个类型时,用 Record 非常方便。
interface EmployeeType {
id: number
fullname: string
role: string
}
let employees: Record<number, EmployeeType> = {
0: { id: 1, fullname: "John Doe", role: "Designer" },
1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}
// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }
Record 的工作方式相对简单。在代码中,它期望用 number 作为类型,这就是我们把 0、1 和 2 作为 employees 变量的键的原因。如果试图将字符串用作属性,则会引发错误。接下来,属性集由 EmployeeType 给出,因此该对象具有字段 id、 fullName 和 role。
它允许你从类型 T 中删除 null 和 undefined。
type NonNullableType = string | number | null | undefined
function showType(args: NonNullable<NonNullableType>) {
console.log(args)
}
showType("test")
// Output: "test"
showType(1)
// Output: 1
showType(null)
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.
showType(undefined)
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.
在代码中吧 NonNullableType 作为参数传给了 NonNullable,NonNullable 通过从该类型中排除 null 和 undefined 来构造新类型。也就是说,如果你传递可空的值,TypeScript 将会引发错误。
顺便说一句,如果把 --strictNullChecks 标志添加到 tsconfig 文件,TypeScript 将应用非空性规则。
映射类型允许你获取现有模型并将其每个属性转换为新类型。注意,前面介绍的一些实用工具类型也是映射类型。
type StringMap<T> = {
[P in keyof T]: string
}
function showType(arg: StringMap<{ id: number; name: string }>) {
console.log(arg)
}
showType({ id: 1, name: "Test" })
// Error: Type 'number' is not assignable to type 'string'.
showType({ id: "testId", name: "This is a Test" })
// Output: {id: "testId", name: "This is a Test"}
StringMap<> 会将传入的任何类型转换为字符串。也就是说,如果在函数 showType() 中使用它,那么接收到的参数必须是字符串,否则 TypeScript 将会报错。
类型保护使你可以用运算符检查变量或对象的类型。它实际上是一个检查用 typeof、instanceof 或 in 所返回类型的条件块。
function showType(x: number | string) {
if (typeof x === "number") {
return `The result is ${x + x}`
}
throw new Error(`This operation can't be done on a ${typeof x}`)
}
showType("I'm not a number")
// Error: This operation can't be done on a string
showType(7)
// Output: The result is 14
代码中有一个普通的 JavaScript 条件块,该块检查通过 typeof 检测到的参数的类型。在这种情况下就保护你的类型了。
class Foo {
bar() {
return "Hello World"
}
}
class Bar {
baz = "123"
}
function showType(arg: Foo | Bar) {
if (arg instanceof Foo) {
console.log(arg.bar())
return arg.bar()
}
throw new Error("The type is not supported")
}
showType(new Foo())
// Output: Hello World
showType(new Bar())
// Error: The type is not supported
和像前面的例子一样,这也是一个类型保护,它检查接收到的参数是否为 Foo 类的一部分,并对其进行处理。
interface FirstType {
x: number
}
interface SecondType {
y: string
}
function showType(arg: FirstType | SecondType) {
if ("x" in arg) {
console.log(`The property ${arg.x} exists`)
return `The property ${arg.x} exists`
}
throw new Error("This type is not expected")
}
showType({ x: 7 })
// Output: The property 7 exists
showType({ y: "ccc" })
// Error: This type is not expected
在代码中,in 运算符用来检查对象上是否存在属性 x。
用来对两种类型进行测试,并根据测试的结果选择其中的一种。
type NonNullable<T> = T extends null | undefined ? never : T
这个例子中的 NonNullable 检查该类型是否为 null 并根据该类型进行处理。
近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?
Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。
交叉类型:将多个类型合并为一个类型、联合类型:表示取值可以为多种类型中的一种、混合类型:一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性、类型断言:可以用来手动指定一个值的类型
在做比较大的,多人合作的项目的时候,TypeScript会更加地适合,这得益于它的可读性,面向对象性以及易于重构的特点。但如果只是自己做小程序,不需要太多人参与的时候,JavaScript则会更加简单。
有两种方式安装TypeScript,如何创建第一个TypeScript文件,在TypeScript中,可以使用interface来描述一个对象有firstName和lastName两个属性,TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程
使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的
谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!