TS之核心用法TS之核心用法！！注意！！在学习该文档之前我已经是默认你拥有 js 基础以及能够比较熟练的使用 js

TS之核心用法

！！注意！！

在学习该文档之前我已经是默认你拥有 js 基础以及能够比较熟练的使用 js 如果你还没有掌握 JS 的基础用法请你回过头学习完 JS 再来看这个md

现在开始解释一下 TS 到底是啥？ TS 的全称是 TypeScript ，它是JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6）见闻知意，Type就是类型的意思，众所周知 JS 是一个弱类型的编程语言，就拿 var 来说它可以重复定义一个变量，并且是不需要定义类型就可以给变量赋值，在实际开发中，这样子太危险了并且不够规范于是 TS 就出现了它在 JavaScript 的基础上增加了静态类型检查的超集，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上

安装 TS

我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考菜鸟教程的NPM 使用介绍我们可以直接在终端使用命令

npm install -g typescript

类型推断

前面我们已经有提及，TS 是为了给 JS 进行规范的那么首先规范的就是变量的定义现在举一个例子

let str = 'abc'
str = 10 //注意 这里会开始报错 这是因为类型不同会报错 如果是JS的话就不会报错

这里TS也会自动推断类型但是 TS 比 TS 更安全 TS 会自动识别第一个赋值的值类型然后就只认定这个类型

类型注解

那么这里就有一种类似强类型编程语言的写法现在我演示一遍

let str: string //这就是给str定义了一个类型 就相当于c语言跟Java的 string str = "xxx" 之类的
str = "10"

let str: string = "10" //当然你也可以这样子写

这应该很好理解我就不过多解释了

类型断言

现在我先来描绘一个场景

let numArr = [1,2,3]
const result = numArr.find(item => item > 2) //这里是使用了一个数组的寻找方法 在这里是把大于 2 的值赋给result
result * 5 //在这里 TS 会出现一个报错,为啥呢? 因为虽然这个数组有赋值 3 给 result,但是程序会认为有两种可能，一种就是有赋值 ， 另外一种可能就是数组没有赋值 result 为 undefined ，所以会报错（太严苛了）

于是为了避免这种太严苛的筛选报错于是就有了类型断言这种写法

let numArr = [1,2,3]
const result = numArr.find(item => item > 2) as number //看见了吗 这个 as + 类型 的写法就是断言 就是跟程序断言 我这里的结果一定是 number 就不要给我报错
result * 5
//但是你一定要有十足的把握的时候使用 不然会适得其反

基础类型和联合类型

下面我说一下有哪些可以使用的 TS 类型跟 JS 原有的类型有所不同

基础类型

let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
//这就是 TS 的基础类型

联合类型

在 TS 中，一个变量的类型我们可以定义多种可能的类型和值

let v4: string | null = null //看见了吗 你是可以这样子写的 这个 | 就是或者的意思

let v5: 1 | 2 | 3 = 2 //你也可以把可能赋值的值写上去 这样子也不会报错

数组元组枚举

数组

我们知道在JS中你可以在一个数组中有不同变量的值

let arr = [1,'ok',null] //在实际开发中我们很不推荐这样子的用法

于是我们就可以通过 TS 自带的类型约束来统一数组中的元素类型

let arr: number[] = [1,2,3] //这里需要注意跟变量有一些不同 在数组这里 你必须在类型后面加上 [] 才行

//当然你也可以这样子写
let arr1: Array<string> = ['a','b'，'c']

元组

在TS中，提供了一些类似于数组的结构，比如元组元组也可以存储多个数据但是它需要你限制储存的个数以及每一个数据的类型

let t1: [number , string , number] = [1 , 'a' , 2];//这就是元组的用法 应该一目了然把

t1[0] = 'a' //如果你这样子给元组赋值 他会报错的 因为他不是指定的类型

//当然还有一个用处 就是你不知道第三个需要放哪个值但是知道类型的时候 你可以使用 ? 来规范它
let t1: [number , string , number?] = [1 , 'a'] //这样子是不会报错的 你可以通过后期给他赋值

枚举

枚举就需要一个新的关键字叫做 enum 我们现在举一个例子

enum MyEnum {
	A,
	B,
	C
} //这就是定义枚举类型的用法 就跟java中定义对象 c中定义结构体很像

//那么我们应该如何访问这些值呢 有两种
console.log(MyEnum.A)//可以直接访问属性A
console.log(MyEnum[0])//也可以通过这种访问值的方式 当你定义好枚举类型之后 TS 会自动按照顺序来配对值的顺序 比如A对于0 B对于1

特殊类型 void

除此之外 TS 还提供了一个 void 类型这个类型其实就是空的意思其实就是用来在函数的返回值中使用就像java中的函数一样

TS 函数

下面我们开始讲一下 TS 的函数

function MyFn (a,b) {
    return a + b;
} //当你的TS配置中不允许 any 类型出现时 这里就会报错 因为参数 a ， b 会默认分到any类型

//当你想给参数配置类型时可以这样做
function MyFn (a: number,b: string) {
    return a + b;
}

//这里刚好使用了函数 就顺便讲解一下上面 void 的用法
function MyFn (a: number,b: string): void { //看见了吗 这里就是 void 的使用形式
    return a + b;//这里就会报错 因为void是没有返回值的 当然如果有返回值就把void改成返回值的类型就可以了
}

//当然这里也可以使用上面的可选值 ？ 
function MyFn (a: number,b?: string) { //这里可以加？
    return a + b;
}

//当然也可以加可选的具体值
function MyFn (a = 10,b: string) {
    return a + b;
}

接口

TS 提供有接口这个东西也就是 interface 其实就是类似于定义自己的对象我们可以这样子写

interface Obj {
    name: string,
    age: number
}

const lhf: Obj = {//注意这里的类型需要一一对上 不然就会报错
    name: 'lhf',
    age: '21'
}

有过面向对象编程基础的同学就非常熟悉了这不就是对象定义吗

类型别名

TS 提供了 Type 其实也很简单就是

//我现在需要定义一个人名字的变量 如果常规写法 就是let a：String | number 如果很多人就需要一直重复 太麻烦了！！
//现在就使用类型别名
type MyUserName = string | number 
let a: MyUserName = 10 //这样子就可以了

泛型

这里是为了给函数更多的范围去传输参数

function MyFn (a: number,b: string): number[] {
    return [a , b];
}
//这种一直固定死一个类型的写法当我在后面想要高效的复用函数的时候就显得特别麻烦
//于是就有这种写法

function MyFn<T> (a: T,b: T): T[] {
    return [a , b];
}

//我需要调用函数的时候 我就可以这样做
myFn<number>(1,2);
//看见了吗 现在就可以自己定义类型来去高效地去使用函数
//当然它也可以通过类型推断
myFn('a' , 'b')//这里就是程序会自动判断第一个值的类型 
myFn('a' , 2)//这样子就会报错

完结撒花

现在基础的TS语法就已经讲解完成了下面我还会写一些进阶的语法加油！！！！

TS之核心用法