前端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;
}
写在最后
如果有什么不对,大家及时指正。我也是初学者。大佬们有其他高级写法,请一定要教教我。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/taneghi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01