TypeScript学习笔记(4)-基本类型

基本类型

布尔类型

最基本的数据类型是 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 ： 尖括号语法

(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)