这张图来自 TypeScript 官网
提到了说 TypeScript 是 JavaScript 的超集!
它有自己的静态类型
并且他不能直接被浏览器运行,需要编译为 JavaScript 之后才能运行。
所以选择学习 TypeScript 的话呢 要有 JavaScript 的基础就可以更快速的入门了!
TS与JS相比较的一些小优势:
1.TS在开发过程中,可以更早的在编辑器中就发现潜在的问题,而JS得在浏览器中运行之后才会暴露错误;
2.TS拥有更友好的编辑器自动提示;
3.TS代码语义更清晰易懂
TS中的静态类型分为两种,一种基础类型,一种是对象类型
类似于JS中的基础类型和引用类型
先来看几个基础类型:
const myName: string = 'Dell'
const myAge: number = 18
const r: boolean = true
const n: null = null
const s: symbol = Symbol('s')
const u: undefined = undefined
再来看看对象类型:
const teacher: {
name: string
age: number
} = {
name: 'Dell',
age: 18
}
const ages: () => number = () => {
return 18
}
const arr: number[] = [1, 2, 2]
可以这样理解上边的代码 ------ const 变量名称:变量类型 = 值
如果你自己去手动写呢,你会发现它的代码提示非常的强大,可以帮助你更快的进行开发!
接下来看看 type annotation 类型注解 与 type inference 类型推断
感觉如果TS声明变量需要像上方两段代码那样来写,那就太麻烦了,
其实呢 商法的写法都是类型注解,就是我们主动告诉TS声明的变量是什么类型,
但是实际我们不需要这么麻烦,因为TS可以自己去做类型推断
const myName: string = 'Dell'
const myAge: number = 18
// 上方两个变量完全不需要 类型注解 因为他们的值会被TS识别 ,继而推断出来他们是什么类型的变量
上方的代码完全可以像在JS中的写法一样去声明变量,这就是类型注解和类型推断,
下方的情况,就需要用到类型注解了
function getTotal(one, two) {
return one + two
}
const total = getTotal(1, 2)
上方的这段代码 total 是什么类型呢?
它不确定是什么类型,因为传参可能是任何类型的数据
在TS无法推断类型的时候,我们可以为它进行类型注解
function getTotal(one: number, two: number) {
return one + two
}
const total = getTotal(1, 2)
这样我们声明了入参为 number 下方的 total 也就不需要类型注解了 ,TS可以推断出来 total 也一定为 number 类型!
这就是 类型注解 与 类型推断 。
但是呢,在我们实际项目中,我们很多时候还是会对函数进行 类型注解,
function getTotal(one: number, two: number){
return one + two + ''
}
const total = getTotal(1, 2)
假如我期望此函数返回的是 number 类型,但是由于我疏忽大意 写成了 return one + two + '' ,但是却不会报错
因为此时 TS类型推断 total 是一个 string 类型, 所以代码并不会报错,所以我们需要对函数返回值也进行类型注解,
以解决不必要的麻烦
function getTotal(one: number, two: number):number{
return one + two
}
const total = getTotal(1, 2)
此时 total 就一定是 number 类型了,如果我手误写错了 return one + two + '' ,代码将会提示我,便可快速定位到问题
不知道怎么结束了!既然写到这里了,那就继续再写点吧
和JS相同的数据类型就不说了,这里介绍两种TS函数返回的两种类型 void 和 never 两种
void 代表此函数没有 return 值 ,如果此函数有返回值 则报错
never类型,这个根据TS官方文档来看呢不太好理解,我的理解就是永远执行不到最后的函数
function err (): never {
throw new Error()
console.log(123)
}
err()
这就没有问题,这个函数返回值的类型就是一个 never 的类型
如果可以走到终点的函数 , 则会报错
上方可以执行完的函数返回值声明为 never ,则会报错
既然说到函数了,那就再说一下解构的参数如何类型注解,首先看一下错误的注解方式
直接来看看正确的解构参数如何类型注解吧,很简单 ,一看就会
function getTotal ({ one, two }: { one: number; two: number }): number {
return one + two
}
const total = getTotal({ one: 1, two: 2 })
就这么多,下次再写 886