一起学Typescript | 1、TypeScript 的特性与变量声明

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

什么是 TypeScript

关于TypeScript，官方是这样来介绍的：TypeScript —— 添加了类型系统的 JavaScript，适用于任何规模的项目。下图可以清晰地看出 TypeScript 和 JavaScript 的关系：

为什么要学 TypeScript

我们所熟悉的 JavaScript 对于数据类型并没有约束，写法相对比较“随意”，一个变量可以赋不同数据类型的值，所以会存在一种隐式类型转换的形式，使得变量类型难以确定。

这种形式在语法上非常灵活，但副作用就是代码质量参差不齐，项目难以维护。

而 TypeScript 弥补了 JavaScript 的缺点，它的类型系统可以对类型进行自动推断。并且，TypeScript 完全兼容 JavaScript，可编译为 JavaScript。

TypeScript 类型系统

1. 按照检查时机划分：

   • 动态类型：只有运行时才会进行类型检查
   • 静态类型：编译阶段就能确定每个变量的类型

2. 按照是否允许隐式类型转换划分：

   • 强类型：数据类型不兼容会报错，如python
   • 弱类型：数据类型不兼容不会报错

所以，TypeScript是静态类型，JavaScript 和 TypeScript 都属于弱类型

安装及编译

npm install -g typescript  // 安装

tsc home.ts // 使用tsc指令编译ts文件

变量声明

1. 数据类型

• 基础类型
  • number
  • boolean
  • string
  • null、undefined （ null undefined 是所有类型的子类型）
  • symbol （ES6）
  • enum // 枚举
  • void
  • any // 任意类型
• 对象类型
• 数组类型
• 函数类型

2. 变量声明

基本形式： let [变量名] : [类型] = 值;

let year: number = 2022; // 数字类型
let num: number = undefined; 
let name: string = ''; // 字符串类型
let flag: boolean = true; // 布尔类型

任意类型 any：

变量如果在声明的时候未指定类型，会被识别为 any 任意值类型。 声明为any类型的字段运允许在赋值的时候改变类型。

let luckyNumber;  
// 等价于： 
// let luckyNumber: any;

luckyNumber = 'eight';
attr = 8;

注：在变量声明的时候，Typescript 依据类型推论的规则，所以如果安装原来JS的习惯定义变量，TS会自动进行类型推断，当数据重新赋值为其他类型的时候，会导致报错。

举个栗子：

在js中完全没问题

let luckyNumber = 'eight'
luckyNumber = 8

但在ts中，编译器首先就进行了类型检查：

如果ts中是 any 类型不会报错：