typescript学习

小柒62
74 阅读4分钟

什么是 TypeScript

  1. 简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
  2. ts 支持类型支持，ts = type +JavaScript。

TypeScript优缺点

优点

  • 增强代码的可维护性，尤其在大型项目的时候效果显著
  • 友好地在编辑器里提示错误，编译阶段就能检查类型发现大部分错误
  • 支持最新的JavaScript新特特性
  • 周边生态繁荣，vue3已全面支持 typescript

缺点

  • 需要一定的学习成本

  • 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅

  • 增加前期开发的成本，毕竟你需要写更多的代码（但是便于后期的维护）

安装环境

安装typescript

npm install -g typescript // 全局安装 ts

检查安装版本

tsc -v

生成 tsconfig.json 配置文件

tsc --init

TypeScript 基础类型

Boolean 类型

const flag: boolean = true;

Number 类型

const count: number = 10;

String 类型

let name: string = "树哥";

Enum 类型

枚举类型用于定义数值集合，使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。如周一到周日，方位上下左右等

  • 普通枚举

初始值默认为 0 其余的成员会会按顺序自动增长 可以理解为数组下标

enum Color {
  RED,
  PINK,
  BLUE,
}

const red: Color = Color.RED;
console.log(red); // 0

设置初始值

enum Color {
  RED = 2,
  PINK,
  BLUE,
}
const pink: Color = Color.PINK;
console.log(pink); // 3
  • 字符串枚举
enum Color {
  RED = "红色",
  PINK = "粉色",
  BLUE = "蓝色",
}

const pink: Color = Color.PINK;
console.log(pink); // 粉色
  • 常量枚举

使用 const 关键字修饰的枚举，常量枚举与普通枚举的区别是，整个枚举会在编译阶段被删除 我们可以看下编译之后的效果

const enum Color {
  RED,
  PINK,
  BLUE,
}

const color: Color[] = [Color.RED, Color.PINK, Color.BLUE];
console.log(color); //[0, 1, 2]

Array 类型

对数组类型的定义有两种方式:

  const arr: number[] = [1,2,3];
  const arr2: Array<number> = [1,2,3];

元组（tuple）类型(不常用）

上面数组类型的方式，只能定义出内部全为同种类型的数组。对于内部不同类型的数组可以使用元组类型来定义

元组（ Tuple ）表示一个已知数量和类型的数组,可以理解为他是一种特殊的数组

  const tuple: [number, string] = [1, "zhangmazi"];

undefined和null（不常用）

默认情况下 null 和 undefined 是所有类型的子类型。 也就是说你可以把 null 和 undefined 赋值给其他类型。

  let a: undefined = undefined;
  let b: null = null;

  let str: string = 'zhangmazi';
  str = null; // 编译正确
  str = undefined; // 编译正确
复制代码

如果你在tsconfig.json指定了"strictNullChecks":true ，即开启严格模式后， null 和 undefined 只能赋值给 void 和它们各自的类型。 （这里感谢评论区指出） null 和 undefined 只能给它们自己的类型赋值

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误
复制代码

但是 undefined 可以给 void 赋值

let c:void = undefined // 编译正确
let d:void = null // 编译错误
复制代码

any 类型

any会跳过类型检查器对值的检查，任何值都可以赋值给any类型

  let value: any = 1;
  value = "zhangmazi"; // 编译正确
  value = []; // 编译正确
  value = {};// 编译正确
复制代码

void 类型

void 意思就是无效的, 一般只用在函数上，告诉别人这个函数没有返回值。

  function sayHello(): void {
    console.log("hello 啊，树哥！");
  }
复制代码

never 类型（不常用）

never 类型表示的是那些永不存在的值的类型。 例如never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

值会永不存在的两种情况：

  • 1 如果一个函数执行时抛出了异常，那么这个函数永远不存在返回值（因为抛出异常会直接中断程序运行，这使得程序运行不到返回值那一步，即具有不可达的终点，也就永不存在返回了）
  • 2 函数中执行无限循环的代码（死循环），使得程序永远无法运行到函数返回值那一步，永不存在返回。
// 异常
function error(msg: string): never { // 编译正确
  throw new Error(msg); 
}

// 死循环
function loopForever(): never { // 编译正确
  while (true) {};
}

Unknown 类型

unknown与any一样，所有类型都可以分配给unknown:

  let value: unknown = 1;
  value = "zhangmazi"; // 编译正确
  value = false; // 编译正确
avatar
文章
阅读
粉丝