Vue.ts基础(进阶版)

简介: Vue.ts基础(进阶版)

类型别名:type 来给一种类型起个别名,常用于联合类型

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}

接口与类型别名的区别

实际上,在大多数的情况下使用接口类型和类型别名的效果等价,但是在某些特定的场景下这两者还是 存在很大区别。

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命
名和为你的代码或第三方代码定义数据模型。
type(类型别名)会给一个类型起个新名字。 type 有时和 interface 很像,但是可以作用于原始值
(基本类型),联合类型,元组以及其它任何你需要手写的类型。起别名不会新建一个类型 - 它创
建了一个新 名字来引用那个类型。给基本类型起别名通常没什么用,尽管可以做为文档的一种形
式使用

Objects / Functions:两者都可以用来描述对象或函数的类型,但是语法不同。

Interface

interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}

Type alias

type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;

Other Types 与接口不同,类型别名还可以用于其他类型,如基本类型(原始值)、联合类型、元组

// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
// dom
let div = document.createElement('div');
type B = typeof div;

接口可以定义多次,类型别名不可以

interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };
相关文章
|
6月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
前端开发 JavaScript API
vue3-ts-storybook:理解storybook、实践 / 前端组件库
vue3-ts-storybook:理解storybook、实践 / 前端组件库
476 0
在Vue3.0+ts中如何使用h函数
在Vue3.0+ts中如何使用h函数
729 0
在Vue3.0+ts中如何使用h函数
|
6月前
|
JavaScript 前端开发
vue3+ts项目搭建
vue3+ts项目搭建
76 1
|
JavaScript 前端开发
vue ts如何创建
vue ts如何创建
124 0
|
JavaScript 前端开发 中间件
从0开始搭建Vue3+Ts项目(1)
从0开始搭建Vue3+Ts项目(1)
|
JavaScript 编译器
TS+vue3系统学习day02
ts的基本数据类型和js的一样,语法上在变量后面加了type类型,Number类型支持八进制和二进制。其他的和js一样。下面我们来敲敲代码。
|
JavaScript
ts+vue3系统学习笔记day01(一)
ts全称TypeScript,他是一门跨平台的编程语言,官网说ts是js的超集合,我觉得就是js的一个加强版,他融合了js的一些优点并加了自己特有的东西,比如接口、泛型等。
112 0
|
JavaScript 编译器
ts+vue3系统学习笔记day01(二)
类型注解是指我们在使用类型时可以放置在任何位置的注解。在TypeScript中,使用类型注解并非强制性要求。它有助于编译器检查变量的类型,并避免处理数据类型时出现错误。
|
JavaScript 前端开发 IDE
vue+ts学习和使用
vue+ts学习和使用
95 0
下一篇
无影云桌面