【TS】TypeScript 一小时速成

简介

1.类型推断

2.类型注解

3.类型断言

4.基础类型和联合类型

5.数组 元组 枚举

6.函数

7.接口

8.类型别名

9.泛型

简介

本文适用于刚刚学完react18（使用jsx开发的版本），想使用ts开发，但是又不想投入太多时间学习ts的详细语法，想快速上手使用ts开发react的同学

进入TS官网TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

我们练习可以有两种方式一个是下载相关的开发工具，另外就是官网里有在线的方式

我使用的是在线版本，后续开发会在react项目里加上ts，使用下面命令行就可以

npm install typescript --save-dev

1.类型推断

ts会根据你变量的初始值进行一个类型推断，会面一旦变成其他类型就会报错

let str = 'ssss'
str = 10

2.类型注解

在变量上显示的设置变量类型如下，定义了一个叫str的变量，类型为字符串。

3.类型断言

如下图代码，因为代码不确定你是否全部都大于2可能会出现undefined的情况所以报错了

let num = [1,2,3]
const result = num.find(item => item > 2)
result * 5

我们需要使用类型断言，就是你自己很确定会有大于2的数字

let num = [1,2,3]
const result = num.find(item => item > 2) as number
result * 5

4.基础类型和联合类型

let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined

let v4: string | null = null

let v5: 1| 2 | 3 = 2

v1是字符串类型

v2是数字类型

v3是布尔类型

nu是null类型，就这一个值

un是undefined类型，也是就这一个值

v4是字符串类型，但是有可能会取不到值，取到了是string，取不到就是null

v5是只能取1 2 3 这三个中的一个为值，用其他的就会报错

5.数组 元组 枚举

数组：

js的数组是可以有其他类型的，就是数字和字符串等等其他类型可以混用

但是在ts中，要限制数组的类型，有如下两种方式

let arr: number[] = [1,2,3]
let arr1: Array<string> = ['a','b','c']

元组：

需要把元组中每个数据类型进行设置如下

let t1: [number,string,number] = [1,'d',10]

可以对相应的进行修改，类型必须对，不然会报错

元组可以设置可选参数在类型后面加一个？

let t1: [number,string,number?] = [1,'d',10]
let t2: [number,string,number?] = [1,'d']

枚举

enum MyEnum{
    A,
    B,
    C
}

有两种使用方式

enum MyEnum{
    A,
    B,
    C
}
console.log(MyEnum.A)
console.log(MyEnum[0])

6.函数

function MyFn(a:number,b:number):number{
    return a + b
}

分别设置了参数类型和返回值类型，如果类型不同会报错，

特别的是void这个返回类型，如果函数没有返回值，要定义成void，不然会返回undefined

function MyFn(a = 10,b?:number):number{
    return a
}

设置a的默认值为10，b为可选参数，可选参数要在正常参数的右边

function MyFn(a = 10,b?:number,...rest: number[]):number{
    return a
}
const f = MyFn(20,19,1,2,3,4)

剩余参数，会放到数组中去在最右边,上文中的1，2，3，4会放到剩余数组中去

7.接口

接口通常用来一个对象的定义 和java里的实体类挺像的

interface Obj {
    name: string,
    age: number
}

const obj: Obj = {
    name: 'a',
    age: 10
}

8.类型别名

将类型定义成MyUserName，

type MyUserName = string | number
let a : MyUserName = 10

9.泛型

可以适用不同类型的操作（在参数的括号之前加一个<T>）后面参数和返回类型，可以任意改，你改了，就要和泛型是一个类型，不改就是用自己原来的类型

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

MyFn<number>(1,2)
MyFn<string>('a','b')