一起来学习TypeScript的类型
更新时间:2022年02月16日 14:16:23 作者:Edison Dont
这篇文章主要为大家详细介绍了TypeScript的类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
前言
TypeScript学习笔记第一部分,关于TS的类型声明以及基本类型。
一、类型声明
- 类型声明
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量(参数、形参)的类型
- 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
- 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
- 语法:
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
- 自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果变量的声明和赋值同时进行时,可以省略掉类型声明
//先声明类型再赋值 let a: string; a = 'Hello'; //声明类型并赋值 let b: number = 123; //声明变量和赋值同时进行 let c = false; c = true; //编译器自动判断变量c为boolean
二、类型
类型 | 例子 | 描述 |
---|---|---|
number | 1,-33, 2.5 | 任意数字 |
string | 'hi', "HI" | 任意字符串 |
boolean | true,false | 布尔值true或false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | {name: "Alice"} | 任意的JS对象 |
array | [1, 2, 3] | 任意JS数组 |
tuple | [4, 5] | 元素,TS新增类型,固定长度的数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
1.number
let a: number; a = 10; a = 33; //a = 'hello'; 变量a的类型是number, 不能赋值字符串
2.string
let b: string; b = 'hello'; //b = 123; 变量b的类型是字符串, 不能赋值number
3.boolean
let c: boolean; c = true;
4.字面量
let d: 10; // 此时d只能等于10 //let d = 11; 则会报错,限制了该变量就是字面量的值(有点类似常量)
5.联合类型
let A: boolean | string; // 变量A既可以是布尔类型也可以是字符串类型 A = true; A = "Hello"; A = false; A = "World"; // 字面量的联合类型限制变量B只能是"male"或"female" let B: "male" | "female"; B = "male"; B = "female"; // B = "trans" 错误
6.any
任意类型,相当于关闭了TS对类型的限制(尽量不要用)。
let a: any; a = true; a = "hi"; a = 123; // 如果声明变量不指定类型,则TS解析器会自动判断变量的类型为any let b; b = true; b = "hi"; b = 123;
注意any类型的变量可以赋值给任意变量,容易出现问题。
// any 任意类型,相当于关闭了ts对类型的限制(尽量不要用) let B: any; B = 10; B = 'string'; B = true; let S: string; S = B; // any类型可以赋值给任意类型变量,容易出现问题。
7.unknown
类型安全的any,不能直接赋值给其他变量。
let a: unknown; a = 10; a = "string"; a = true; let b: string; // b = a; 赋值时编译器会报错,不能将“unknown”类型分配给“string”。
如果一定要赋值,可以赋值前类型判断或者使用断言。
let a: unknown; a = 10; a = true; a = "string"; let b: string; /* * 断言: * 1. 变量 as 类型 * 2. <类型> 变量 */ b = a as string; b = <string> a; /* * 赋值前类型判断 */ if (typeof c === 'string'){ b = a; }
8.void
没有返回值 => 返回的是空值 / undefined
function foo(): void { } console.log(typeof foo()); // => undefined function foo1(): void{ return undefined; } function foo3(){ // 不写void默认为void } // 写了返回值不写返回值类型 => 自动判断返回值类型 function foo4(){ return 1; } console.log(typeof foo4()); // => number
9.never
没有值,不能是任何值(连undefined都没有)
function foo(): never{ throw new Error('raise'); }
10.object
let o: {name: string, age: number}; o = { name: "Edison", age: 25 } // 定义可选参数 // [propName: string]: any 任意类型的属性 let a: {name: string, [propName: string]: any}; b = { name: 'Edison', age: 24, gender: "female" } // 定义函数结构 let foo: (a: number, b: number) => number; foo = function (n1, n2) { return n1 + n2; }
11.array
/* * 元组: 长度和类型还有顺序必须与储存元素一一对应 * [类型,类型] */ let a = [string, number]; a = ["hello", 123]; //以下报错 a = [123, "hello"]; a = [123]; a = ["hello"]; a = ["hello", 123, 456];
12.tuple
/* * 元组: 长度和类型还有顺序必须与储存元素一一对应 * [类型,类型] */ let a = [string, number]; a = ["hello", 123]; //以下报错 a = [123, "hello"]; a = [123]; a = ["hello"]; a = ["hello", 123, 456];
13.枚举enum
enum Gender { Male = 0, Female = 1 } let person: {name: string, gender: Gender}; person = { name: "Edison", gender: Gender.Male }
14.其他
// & 同时满足 let i: {name: string} & {age: number} & {gender: Gender}; i = person; // i = b; Error // 类型别名 type myType = typeof i; let person1: myType; let person2: myType;
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
这篇文章主要介绍了微信小程序非swiper组件实现的自定义伪3D轮播图效果,涉及微信小程序事件响应及元素属性动态操作实现轮播图效果相关技巧与注意事项,需要的朋友可以参考下2018-12-12关于javascript document.createDocumentFragment()
documentFragment 是一個無父對象的document對象.2009-04-04
最新评论