我正在参加「掘金·启航计划」
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;
}
写在最后
如果有什么不对,大家及时指正。我也是初学者。大佬们有其他高级写法,请一定要教教我。