为vue3学点typescript2-基础类型和入门高级类型

共计 4638 个字符，预计需要花费 12 分钟才能阅读完成。

第一课, 为 vue3 学点 typescript(1), 体验 typescript

这一节很重要, 可以说是 ts 的最核心 部分, 这一节学完其实就可以开始用 ts 写代码了, 想想 typescript 中的 type, 再看看标题中的 ” 类型“2 字, 所以请大家务必认真.

因为高级类型的内容比较多, 但是有些基础类型的知识点还必须要用到高级类型的知识讲解才连贯, 所以本节课把最常用的高级类型提前讲解一下, 比如 接口 / 联合类型 / 交叉类型.

ts 中 基础类型 有如下几种:boolean / number / string / object / 数组 / 元组 / 枚举 / any / undefined / null / void / never, 下面我们一一举例学习:

介绍类型前, 有一个 前置知识点 就是 字面量 , 字面量的意思就是直接声明, 而非new 关键词实例化出来的数据:

// 字面量
const n:number = 123;
const s:string = '456';
const o:object = {a:1,b:'2'};

// 非字面量
const n:Number = new Number(123);
const s:String = new String('456');
const o:Object = new Object({a:1,b:'2'});

通过上面的例子, 大家应该看明白为什么 ts 中有些类型的 开头字母是小写 的了吧. 这是因为 ts 中用小写字母开头的类型代表字面量, 大写的是用来表示通过 new 实例化的数据.

布尔类型, 取值只有true / false

const IS_MOBILE:boolean = true;
const IS_TABLE:boolean = false;

数字类型 , 整数 / 小数都包括, 同时支持 2 /8/10/16 进制 字面量.

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串类型

let s1:string = 'hello world!';
let s2:string = 'hello ${name}`;

数组有 2 种表示方式:

第 1 种, 通过在 指定类型 后面增加 [], 表示该数组内的元素都是该 指定类型:

let numbers:number[] = [1,2,3,4,5];
// number|string 代表联合类型, 下面的高级类型中会讲
let numbers:(number|string)[] = [1,2,3,4,'5'];

第 2 种, 通过泛型表示, Array< 元素类型 >, 泛型会在后面课讲解, 先做了解即可:

let numbers:Array<number> = [1,2,3,4,5];

元组类型 表示一个已知 元素数量 和类型的数组, 各元素的类型不必相同:

let list1:[number, string] = [1, '2', 3]; // 错误, 数量不对, 元组中只声明有 2 个元素
let list2:[number, string] = [1, 2]; // 错误, 第二个元素类型不对, 应该是字符串 '2'
let list3:[number, string] = ['1', 2]; // 错误, 2 个元素的类型颠倒了
let list4:[number, string] = [1, '2']; // 正确

枚举是 ts 中有而 js 中没有的类型 , 编译后会被转化成对象 , 默认元素的值从 1 开始, 如下面的Color.Red 的值为 1, 以此类推 Color.Green 为 2, Color.Blue为 3:

enum Color {Red, Green, Blue}
// 等价
enum Color {Red=1, Green=2, Blue=3}

当然也可以自己手动赋值:

enum Color {Red=1, Green=2, Blue=4}

并且我们可以反向通过值得到他的键值:

enum Color {Red=1, Green=2, Blue=4}
Color[2] === 'Green' // true

看下编译成 js 后的枚举代码, 你就明白为什么可以反向得到键值:

var Color;
(function (Color) {Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
// Color 的值为: {0: "Red", 1: "Green", 2: "Blue", Red: 0, Green: 1, Blue: 2}

any 代表任意类型, 也就是说, 如果你不清楚变量是什么类型, 就可以用 any 进行标记, 比如引入一些比较老的 js 库, 没有声明类型, 使用的时候就可以标记为 any 类型, 这样 ts 就不会提示错误了. 当然不能所有的地方都用 any, 那样 ts 就没有使用的意义了.

let obj:any = {};
// ts 自己推导不出 forEach 中给 obj 增加了 'a' 和 'b' 字段.
['a', 'b'].forEach(letter=>{obj[letter] = letter;
});

// 但是因为标记了 any, 所以 ts 认为 a 可能存在
obj.a = 123

void的意义和 any 相反, 表示不是任何类型, 一般出现在函数中, 用来标记函数没有返回值:

function abc(n:number):void{console.log(n);
}

void 类型对应 2 个值, 一个是 undefined, 一个 null:

const n1:void = undefined;
const n2:void = null;

默认情况下 null 和 undefined 是所有类型的子类型, 比如:

const n1:null = 123;
const n2:undefined = '123';

注意: 这是因为默认情况下的编译选项 strictNullChecks 为 false, 但是为了避免一些奇怪的问题出现, 我还是建议大家设置为 true(编译选项设置的内容, 会在后面的课程讲解), 请用精准的类型去标注.

如果一个变量的值确实需要是 null 或者 undefined, 可以像下面这么用, ts 会自动根据if/else 推导出正确类型:

// 这是 "联合类型", 在 "高级类型" 中会有详细介绍, 表示 n 可能是 undefined 也可能是 number
let num: undefined|number;

if(Math.random()>0.5) num = 1;

if(undefined !== num) {num++;}

never表示不可达, 用文字还真不好描述, 主要使用在 throw 的情况下:

function error():never{throw '错了!';}

object表示非原始类型, 也就是除 number/ ss/ boolean/ symbol/ null/ undefined 之外的类型:

let o1:object = [];
let o2:object = {a:1,b:2};

但是, 我们 实际上基本不用 object类型的, 因为他标注的非常不具体, 一般都用接口来标注更具体的对象类型, 请继续看下面的接口的内容.

通过基础类型组合而来的, 我们可以叫他高级类型. 包含: 交叉类型 / 联合类型 / 接口等等, 当然不止他们 3 个, 为了不让本节课太长造成读者疲劳, 本节只先讲这 3 个, 不过不要着急, 下节课会完结高级类型.

一种定义复杂类型的格式, 比如我们用对象格式存储一篇文章, 那么就可以用接口定义文章的类型:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite: string;
}

const article: Article = {title: '为 vue3 学点 typescript(2), 类型',
    count: 9999,
    content: 'xxx...',
    fromSite: 'baidu.com'
}

在这种情况下, 当我们给 article 赋值的时候, 如果 任何一个字段没有被赋值 或者 字段对应的数据类型不对, ts 都会提示错误, 这样就保证了我们写代码不会出现上述的小错误.

还是上面的例子, fromSite的意思是文章来自那个网站, 如果文章都是原创的, 该字段就不会有值, 但是如果我们不传又会提示错误, 怎么办?
这时候就需要标记 fromSite 字段为 非必填, 用 ”?” 标记:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite?: string; // 非必填
}

// 不会报错
const article: Article = {title: '为 vue3 学点 typescript(2), 类型',
    count: 9999,
    content: 'xxx...',
}

接口不仅可以定义对象, 还可以定义函数:

// 声明接口
interface Core {(n:number, s:string):[number,string]
}

// 声明函数遵循接口定义
const core:Core = (a,b)=>{return [a,b];
}

先简单看下如何给类定义接口, 后面的课程具体讲类:

// 定义
interface Animate {
    head:number;
    body:number;
    foot:number;
    eat(food:string):void;
    say(word:string):string;
}

// implements
class Dog implements Animate{
    head=1;
    body=1;
    foot=1;
    eat(food){console.log(food);
    }
    say(word){return word;}
}

交叉类型是将多个类型合并为一个类型, 表示 ”并且 “ 的关系, 用& 连接多个类型, 常用于对象合并:

interface A {a:number};
interface B {b:string};

const a:A = {a:1};
const b:B = {b:'1'};
const ab:A&B = {...a,...b};

交叉类型也是将多个类型合并为一个类型, 表示 ”或 “ 的关系, 用| 连接多个类型:

function setWidth(el: HTMLElement, width: string | number) {el.style.width = 'number' === typeof width ? `${width}px` : width;
}

注意: 我这里标记了 el 为HTMLElement, 可以在 typescript 的仓库看到 ts 还定义了很多元素, 请自行浏览(不用背, 用的时候现查),
https://github.com/microsoft/…

如果您看完了上面的所有知识点, 你就可以开始动手造轮子练习了, 加油. 下面是我用 ts 造的轮子, 如果喜欢请帮忙点下 star, 谢谢.

手势库: https://github.com/any86/any-…

命令式调用 vue 组件: https://github.com/any86/vue-…

工作中常用的一些代码片段: https://github.com/any86/usef…

一个 mini 的事件管理器: https://github.com/any86/any-…

导航

很重要

什么是入门高级类型

基础类型

字面量

boolean

number

string

数组

元组(Tuple)

枚举(enum)

any(任意类型)

void

null 和 undefined

never

object

高级类型入门

接口(interface)

非必填(?)

用接口定义函数

用接口定义类

交叉类型(&)

联合类型(|)

总结

Just My Socks（注册教程内含优惠码）