项目中用到的TS

2,593 阅读4分钟

我正在参加「掘金·启航计划」

ts环境搭建(基础环境/vue3环境)

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

1、ts编译

npm install -g typescript

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

tsc xxx.ts

2、vue中使用

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

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

image.png

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

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'

image.png 当你向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;
}

写在最后

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