基本类型
布尔类型
最基本的数据类型是 true
或 false
值,称为布尔值。
let flag: boolean;
let yes = true;
let no = false;
数字类型和大整数类型
与在 JavaScript 中一样,TypeScript 中的所有数字都是浮点数或大整数。 这些浮点数的类型为 number
,而大整数的类型为 bigint(
bigint是es 2020新增语法)
。
let x: number;
let y = 0;
let z: number = 123.456;
let big: bigint = 100n;
字符串类型
关键字 string
表示以 Unicode UTF-16 代码单元的形式存储的字符序列。
与 JavaScript 一样,TypeScript 也使用双引号 ("
) 或单引号 ('
) 将字符串数据括起来。
let s: string;
let empty = "";
let abc = 'abc';
模版字符串形式 : ` ${ expr } `
let firstName: string = "王大可";
let sentence: string = `我的名字是 ${firstName}.
我正在学习 TypeScript.`;
console.log(sentence);
void、null 和 undefined 类型
JavaScript 和 TypeScript 具有两个用于表示缺少的值或未初始化的值的基元值:null
和 undefined
。 这些类型在函数上下文中最有用。后面在介绍。
枚举类型enum
每当过程接受一组有限的变量时,请考虑使用枚举。 枚举使代码更清晰、可读性更好,尤其是在使用有意义的名称时。
使用枚举:
- 帮助减少由于转置或错误输入数字而导致的错误。
- 使将来更改值变得容易。
- 使代码更易于阅读,这意味着不太可能出现错误。
- 确保向前兼容性。 通过使用枚举,将来有人更改与成员名称对应的值时,代码失败的可能性更小。
//前端技能枚举
enum WebSkill {
HTML,
CSS,
JavaScript,
TypeScript,
Vue,
React,
SASS
}
let mySkills: WebSkill = WebSkill.HTML;
console.log(mySkills); //输出0
默认情况下,enum
值以 0 开头,因此 mySkill为 0, 可以定义枚举值
// let firstName: string = "王大可";
// let sentence: string = `我的名字是 ${firstName}.
// 我正在学习 TypeScript.`;
// console.log(sentence);
//前端技能枚举
enum WebSkill {
HTML=99,
CSS=120,
JavaScript,
TypeScript,
Vue,
React,
SASS
}
let mySkills: WebSkill = WebSkill.TypeScript;
console.log(mySkills); //输出122
//若要显示与枚举值关联的名称,我们可以使用提供的索引器
console.log(WebSkill[mySkills]); //输出 TypeScript
any 和 unknown
any表示 任何一种类型
使用场景 比如某个值来自第三方库或者用户输入可以使用。
any
类型选择不进行类型检查,并且不会强制你在调用、构造或访问这些值的属性之前进行任何检查。
let wdkValue: any = 10;
wdkValue = '王大可'; // 可以赋值
wdkValue = true; // 可以赋值
console.log(wdkValue.name); // 输出 undefined
wdkValue(); // 输出 wdkValue(); // Returns "wdkValue is not a function" error
wdkValue.toUpperCase(); // 输出 TypeError: wdkValue is not a function
any类型不进行类型检查,所有编辑器不会提示异常,但是运行时 根据具体类型会报相应错误。
any
的所有便利都以失去类型安全性为代价。 类型安全是使用 TypeScript 的主要动机之一。 如果不需要,应避免使用any
。
unknown any很灵活 解决 any可能导致的意外错误而引如的类型
相同点 都可以赋值任何类型 但是 无法访问 unknown
类型的任何属性,也不能调用或构造它们。
将上面的代码类型改为unknown则
let wdkValue: unknown = 10;
wdkValue = '王大可'; // 可以赋值
wdkValue = true; // 可以赋值
console.log(wdkValue.name); // “wdkValue”的类型为“未知”。
wdkValue(); // “wdkValue”的类型为“未知”。
wdkValue.toUpperCase(); // “wdkValue”的类型为“未知”。
现在它将引发类型检查错误,并阻止编译代码,直到采取适当的措施来解决它们为止。
any
和unknown
之间的核心区别在于你无法与unknown
类型的变量进行交互;这样做会产生“编译器”错误。
any
将绕过所有编译时检查,并且在运行时评估对象;如果该方法或属性存在,它将表现出预期的效果。否则也会报出相应错误
类型断言
简单说就是 类型断言是让编译器知道 我在使用什么变量,相当于已经检查过了该类型,对运行时没有影响。
形式1 : as 语法
(wdkValue as string).toUpperCase();
形式2 : 尖括号语法
(<string>wdkValue).toUpperCase();
推荐as语法 使用
< >
进行类型转换时,某些 TypeScript 应用程序(例如 JSX)可能会发生混淆。
let wdkValue: unknown = 10;
wdkValue = true;
wdkValue = '王大可'; //此处推断为string
if (typeof wdkValue === "string") {
console.log((wdkValue as string).toUpperCase()); //输出 王大可
} else {
console.log("Error - A string was expected here."); //输出错误信息
}
类型保护
上面的例子在if
块中使用 typeof
在运行时检查表达式的类型。 此条件测试称为“类型保护”
类型 | Predicate |
---|---|
string | typeof s === "string" |
number | typeof n === "number" |
boolean | typeof b === "boolean" |
undefined | typeof undefined === "undefined" |
function | typeof f === "function" |
array | Array.isArray(a) |