前端TypeScript经常用到的方法与技巧

前言

前端TypeScript经常用到的方法与技巧

 

正文

ts环境搭建（基础环境/vue3环境）

环境搭建在这个地方展示两种：

1、ts编译

npm install -g typescript

然后在此环境下新建一个xxx.ts文件，编写ts代码后，使用以下命令编译文件。

tsc xxx.ts

2、vue中使用

vue3中正常安装即包含了ts（vue3本身就使用了ts编译）。

然后在script标签中添加lang="ts"即可。

常用的原始类型、类型推断、联合类型

TS官网：原始数据类型包括：布尔值、数值、字符串、`null`、`undefined` 以及 ES6 中的新类型 [`Symbol`]和 ES10 中的新类型 [`BigInt`]
但是常用的原始类型有：布尔值、数值、字符串

let bol = false;
let num = 0;
let str = '';

或者 

let bol:boolean = false;
let num:number = 0;
let str:string = '';

但是，无论是上面还是下面的写法，当你给 str赋值1时候，都会报错，原因是，TS拥有强大的类型推断功能，它能根据第一次赋值，推断出变量的类型。

那么，声明了一个变量，怎么可以即赋值字符串又赋值数字呢？

联合类型：在声明变量时候，使用 | 分隔每个类型。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

接口是什么以及接口的使用方法

1、接口是什么

接口，使用interface来声明，官网介绍了它和类（class）的关系。但是很多前端可能很少使用类这个概念。 so，接口的另外一个解释就比较好理解了常用与对「对象的形状」进行描述

例如：

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

tom.like = 'LOL'

当你向tom添加新属性时候，会提示类型Person上不存在新属性，或者修改现有属性但是类型不会。

2、接口常用来做什么？

接口的用来做什么呢？接口解释时候说：接口用于对象的形状。所以可以从此入手。当我们得到了一个需求。

需求：声明一个对象:Person(一般接口首字母大写)，包括name、eat、like、age四个属性（属性结束后使用;分割），前三个必须是字符串，最后一个是数字。不能新增或者删除属性。

然后如果不使用TS，那么就需要使用Object中的proxy进行数据监听，或者是Object.defineProperty中数据劫持等api中的get和set进行定义。 但是有了TS，只需要

interface Person {
    name: string;
    eat: string;
    like: string;
    age: number;
}
let xiaoming:Person = {
    name: '小明',
    like: 'eat 胡建人',
    eat: '胡建人',
    age: 9527,

数组基础类型以及数组和接口的联合使用

1、数组基础类型表示法【类型 方括号】

  let fibonacci: number[] = [1, 1, 2, 3, 5];
  let fibonacci: string[] = ['str1','str2'];
  let fibonacci: boolean[] = [true,false];

2、数组基础类型表示法【数组泛指】，泛指可以看作是另外一种写法。

 let fibonacci Array<number> = [1, 1, 2, 3, 5];
 let fibonacci Array<string> = ['str1','str2'];
 let fibonacci Array<boolean> = [true,false];

3、数组和接口的联合使用

上面的接口Person组成一个数组会是什么样子呢？ 一起来看看吧。

interface Person {
  name: string;
  eat: string;
  like: string;
  age: number;
}

let person: Person[] = [
  {
    name: 'xiaoming',
    eat: '福建人',
    like: 'eat 福建人',
    age: 9527,
  }
]
或者
let person: Array<Person> = [
  {
    name: 'xiaoming',
    eat: '福建人',
    like: 'eat 福建人',
    age: 9527,
  }
]

类型断言

语法：值 as 类型 或者 <类型>值

用途：常用于联合类型的接口和原始类型。如果某个方法是其中一种类型独有的时候，那么就会用到类型断言。

作用：将值指定为一种类型，TS认为此值就是此类型（言出法随？？？）

初学者（我）在学习的时候，偶尔脑子绕不过来。so，就直接用官网例子了。

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof animal.swim === 'function') {
        return true;
    }
    return false;
}

// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
//   Property 'swim' does not exist on type 'Cat'.
上面的例子中，获取 animal.swim 的时候会报错。

此时可以使用类型断言，将 animal 断言成 Fish：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

写在最后

如果有什么不对，大家及时指正。我也是初学者。大佬们有其他高级写法，请一定要教教我。

这篇好文章是转载于：学新通技术网