当前位置: 首页 > 工具软件 > Interface.js > 使用案例 >

TS和JS,type和interface

西门高歌
2023-12-01

TS和JS
type和interface

什么是TS?

概念:
Ts是一个渐进式包含类型的js超集,它的作用就是为js变量提供类型支持,可以实现静态检查,高效的重构代码以及寻找bug,将js切换为基于类的面向对象的语言。最后,ts都会被编译成简单的js代码,可以使用一些js没有提供的面向对象的概念,比如说接口属性泛型。允许我们在编译的时候对代码进行错误检测和类型检测。

特点:
面向项目:
TS - 面向解决大型的复杂项目、架构、代码维护复杂场景
JS - 脚本化语言,用于面向简单页面场景

自主检测:
TS - 编译时,主动发现并纠正错误
JS - 运行时,执行报错

类型检测:
TS - 强类型语言,支持动态和静态的类型检测
JS - 弱类型语言,无静态类型选项

运行流程:
TS - 依赖编译,依靠编译打包实现在浏览器端的运行
JS - 可直接在浏览器端运行

复杂特性:
TS - 模块化、接口、泛型
举栗: 问: 在字符串后面加上:string,代码运行时,这个string还存在吗? 有什么办法在运行时改变这个string吗?
答案: 不存在了,也没必要去修改这个string,它是在编译时为变量指定了一个类型

TS 类型和语法
类型: boolean 、string 、number 、array、 null 、undefined、unknown、never、any、tuple - 元祖、 enum、void。

上述两种方式any 和unknown 有何区别??
1、任何类型都可以是any类型,ts 允许any类型的值进行任何操作,对它一路绿灯,等于免检标签。可以访问任意属性和方法。
2、任何类型都可以是unknown类型,一旦打上标签,会被重点检查,只要类型检查通过了才能进行操作。

更可靠:TS引入类型定义(进行类型检查)和编译器,可以避免JavaScript大多数runtime错误,更可靠,易维护;
更清晰:TS中显式类型声明可以提升代码的可读性,代码校验可以全部交给编译器负责;
更广泛:TypeScript是JavaScript的超集,可以在TypeScript代码中混合使用任何JavaScript库和代码。
更时尚:ts有很多方便的特性,比如可选链

type和interface的区别

相同点:

1.类型别名和接口都可以用来描述对象或函数
2.类型别名和接口都支持扩展
interface可以继承interface,继承type,使用extends关键字,
type也可继承type,也可继承interface,使用&关键字。

区别:
1、类型别名 type 可以用来给一个类型起个新名字,当命名基本类型、联合类型、或元组类型等非对象类型时非常有用,而接口不行。

type MyNumber = number;
type StringOrNumber = string | number;
type Text = string | string[];
type Point = [number, number];
type Callback = (data: string) => void;

在 TypeScript 1.6 版本,类型别名开始支持泛型

// lib.es5.d.ts
type Partial<T> = {
    [P in keyof T]?: T[P];
};

type Required<T> = {
    [P in keyof T]-?: T[P];
};

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

type Exclude<T, U> = T extends U ? never : T;

而接口 interface 只能用于定义对象类型,Vue 3 中的 App 对象就是使用 interface 来定义的。
2、interface可以合并同名接口,type不可以,同名类型别名会冲突

interface A{name:string}
interface A{age:number}
var x:A={name:'xx',age:20}

总结类型别名和接口的一些使用场景

使用类型别名的场景:

定义基本类型的别名时,使用 type
定义元组类型时,使用 type
定义函数类型时,使用 type
定义联合类型时,使用 type
定义映射类型时,使用 type

使用接口的场景:

需要利用接口自动合并特性的时候,使用 interface
定义对象类型且无需使用 type 的时候,使用 interface
 类似资料: