TypeScript基础(一)

前言

TS在前端领域越来越火，也有更多的项目框架（vue3）使用 TS 开发，作为前端程序员，TS 已经成为一项必不可少的技能；而目前很多公司也是趋向于使用TS进行开发，本次内容旨在介绍一些TS的基础知识，让我们更熟悉TS，了解到TS的一些优势，更习惯使用TS；

简介

什么是 TypeScript ？

是 JavaScript 类型的超集，包含了 ES6\7\8 未来标准 (JS 当前标准 ES5）
TypeScript - 强类型定义

为什么要使用 TypeScript ?

• 规范代码，增加代码的可读性和可维护性
• 在编译阶段就可以及时发现错误
• 在原生基础上加了一层类型定义
• 类型检查 避免低级错误

TypeScript无法直接在node环境或浏览器中运行（需要编译成JavaScript）

一、TS工作流

1. 开发环境配置

npm install typescript -g

tsc file.ts // 将ts文件编译成js文件

2. TS工作流

二、TS基础

注：以下红色划线处为编译器代码报错处

1. 变量声明

// const 定义不可改变的常量
const num = 1
num = 2

2. TypeScript的类型（类型相关文档）

• 基本类型：Boolean、Number、String、Null、undefined、Object、Array
• 新的类型：Tuple、Enum、void、never、any
• 高级类型: Union 联合类型、Literal 字面量类型

3. 🍃 Boolean、Number 与 String

• ts编译器自动识别变量类型

// 增加类型定义，告诉编译器只能接收number类型参数
function add(num1:number, num2:number) {
   return num1 + num2;
}
const a = 1, b = 3
console.log(add(a, b));

// ❌ 错误示例 
const c = '1', d = '3'
console.log(add(c, d)); 
console.log(add(+c, +d)); 

• 初始自动映射类型

 // 自动映射类型
let isTrue = true;
isTrue = 'true';
 
let isTrue boolean = true
isTrue = false

4. 🍃 Array 与 Tuple 元组类型

• Array 数组类型

// 定义数组类型
let list1: number[] = [1, 3, 4, 5];  // 便于理解
let list2: Array<number> = [2, 4, 6, 7];
let list3 = [1, 2, 3, 4]

// ❌ 示例
list1.push('3') // 类型“string”的参数不能赋给类型“number”的参数
list3.push(true) // 类型“boolean”的参数不能赋给类型“number”的参数

let list4: any[] = [25, "美少女", true]; 
let list5: Array<any> = [35，'程序猿', false];

• Tuple 元组类型
  定义：固定长度、固定类型的数组

let person1: [string, number] = ['小红', 18]

• ❌ 示例 1

// 更改类型
person1[0] = 20

• ❌ 示例 2

// 更改长度
person1[2]

• ❌ 示例 3

// bug 使用.push可以突破两个的界限，编译不会报错
person1.push('小明')

5. 🍃 Union 联合类型

• 联合类型数组

let person2 = ['程序猿', 35]

person2[0] = "外卖小哥";
person2[1] = 36;

// 所以也可以这样写
let person2:(string | number)[] = ['程序猿', 35]
let person2: Array<string | number> = ['程序猿', 35]

• 联合类型常量

let union: string | number;
union = 28;
union = "28";
let union2: number | string | string[];

• 合并数字与字符串

// ❌ 示例
function merge(m1: number | string, m2: number | string) {
  return m1 + m2
}

function merge(m1: number | string, m2: number | string) {
  if (typeof m1 === "string" || typeof m2 === "string") {
    // 字符串拼接
    return m1.toString() + m2.toString();
  } else { 
    // 数字相加
    return m1 + m2;
  }
}
  
let mergeNum = merge(2, 5);
console.log(mergeNum); // 7

let mergeString = merge("hello:", "world");
console.log(mergeString); // hello:world

6. 🍃 Literal 字面量类型

定义：可指定字面量为某些固定值

// 字面量与联合类型 只能为0、1、2
let literal: 0 | 1 | 2;
literal = 1;

// ❌ 示例
literal = 4

学习推荐：
TypeScript 入门教程
TypeScript中文网
github - awesome-typescript