typescript-基础入门

写在前面

JavaScript 是一门弱类型语言，变量的数据类型具有动态性，只有执行时才能确定变量的类型。以往的前端开发过程中，很容易出现以下的报错：

// 读取对象上不存在的属性
Uncaught TypeError: Cannot read property ... of undefined

// 类型错误
TypeError: 'undefined' is not a ...

以对象 obj 为例，在 typescript 中可以用接口来定义一个对象类型

interface IObj {
   
  name: string
}

const obj: IObj;

通过这种方式限制 obj 的属性类型，在赋值时只能是添加 name 属性，并且不能给 name 赋值 string 以外的类型；每当你获取 obj 属性的值时，会在编译阶段检查该属性是否存在，不存在会提前抛出类型错误。

在变量声明之前做好类型定义，并通过提前暴露和修复这些可能出现的类型错误，可以大大降低应用在运行时出现错误的概率，使得 javascript 应用更加健壮，这一切得益于类型思维。

作用总结为以下几点：

• 类型检查
• 提供更丰富的语法（es6）
• 编译器提示友好

思维方式决定了编程习惯，编程习惯奠定了工程质量，工程质量划定了能力边界

数据类型

number

数字类型，但是new Number(0)这种是对象，并不是数字类型

let num: number = 0;
let num = 0; // 这样也可以，ts 会进行隐性的类型推论，不过还是建议明确定义类型

string

let str: string = "str";

boolean

let bool: boolean = true;

数组

主要有两种方式定义数组类型，一般只能定义数组元素都为某一种类型的数组

let arr: number[] = [1, 2, 3];
let arr: Array<number> = [1, 2, 3];
// 定义一个不确定元素类型的数组
let arr: any[] = [];
// 定义一个只读的数组
let arr: ReadonlyArray<number> = [1, 2];

元组

元组可以用于定义一个具有多种类型元素的数组，元素数量已知，并且他们的顺序是确定的

const arr: [string, number] = ["cat", 1];
const arr: [string, number?] = ["cat", 1];
const arr: [string, number?] = ["cat"];
function fn(...args: [number, string]): void;

TypeScript 4.0 支持为元组类型设置标签

function fn(...args: [age: number, id: string