Typescript-基础1

Typescript的介绍

优点

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

缺点

• 需要一定的学习成本
• 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅
• 现在普遍还是使用javascript编写代码，老项目用不到
• 增加前期开发的成本，毕竟你需要写更多的代码（但是便于后期的维护）

安装环境

安装typescript

• 1.首先，先创建一个文件夹，在文件夹里面新建一个后缀为 index.ts 的文件

      在控制台全局安装
npm install -g  typescript // 全局安装 ts

• 不记得自己是否已经安装过 typescript 的，可以使用以下命令来验证：

tsc -v 

• 如果出现版本，则说明已经安装成功

Version 4.6.3

• 生成 tsconfig.json 配置文件

tsc --init

• 在我们 index.ts 文件中,随便写点什么

const s:string = "彼时彼刻，恰如此时此刻";
console.log(s);

• 控制台执行 tsc helloworld.ts 命令，目录下生成了一个同名的 helloworld.js 文件，代码如下

var s = "彼时彼刻，恰如此时此刻";
console.log(s);

• 通过tsc命令，发现我们的typescript代码被转换成了熟悉的js代码,我们接着执行

node helloworld.js

安装 ts-node

• 那么通过我们上面的一通操作，我们知道了运行tsc命令就可以编译生成一个js文件，但是如果每次改动我们都要手动去执行编译，然后再通过 node命令才能查看运行结果岂不是太麻烦了。
• 而 ts-node 正是来解决这个问题的

npm i -g ts-node // 全局安装ts-node

• 有了这个插件，我们就可以直接运行.ts文件了

ts-node index.ts

便捷启动插件

• 1.先安装将ts转为js的插件

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

tsc index.ts // 控制台输出指令编译ts文件为js文件

• 安装直接启动内置web服务组件

npm i live-server -g // 全局安装

live-server // 控制台输入指令直接启动内置web服务

• 实现多个任务同时执行

npm i npm-run-all -g

npm-run-all // 控制台输入指令实现多个任务同时并发执行

• 在配置文件 package.json 中的 scripts 中配置指令

"scripts": {
    "a":"live-server", 
    "b":"tsc -w",
    "start":"npm-run-all -p a b" // 控制台输入npm start指令同时执行a和b两个任务
  },

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]

//编译之后的js如下：
var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];
// 可以看到我们的枚举并没有被编译成js代码 只是把color这个数组变量编译出来了

作者：呛再首
链接：https://juejin.cn/post/7124117404187099172
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

• Array 类型

对数组类型的定义有两种方式:
const arr: number[] = [1,2,3];
const arr2: Array<number> = [1,2,3];

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

元组（ Tuple ）表示一个已知数量和类型的数组,可以理解为他是一种特殊的数组
const tuple: [number, string] = [1, "zhangmazi"];

注意：需要注意的是，元组类型只能表示一个已知元素数量和类型的数组，长度已指定，越界访问会提示错误。例如，一个数组中可能有多种类型，数量和类型都不确定，那就直接any[]。

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

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

  let str: string = 'zhangmazi';
  str = null; // 编译正确
  str = undefined; // 编译正确

• 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; // 编译正确

unknown与any的最大区别是：任何类型的值可以赋值给any，同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它，但它只能赋值给unknown和any