typescript的基本使用-前端小白初探TypeScript:逃不过真香定律～

更多精彩资源请访问我的个人博客

1. TypeScript(下面简称ts)数据类型

// 布尔型
let bol: boolean = false
// 数字
let num:number = 1
// 字符串
let str:string = 'abc'
// 数组
// 第一种方式
let arr:string[] = ['123','456'] // 代表返回一个字符串的数组，数组里的项只能存字符串同理可以是其他类型数组 number[]...
// 第二种方式 Array<元素类型>
let arr:Array = [123,456] // 同上
// 这样声明的数组有个问题就是只能存储用一种数据，为了让数组能够存储不同类型数据，ts还设定了元组
// 元组类型允许表示一个已知元素类型和数量的集合
let arr: [string,number]
let arr = ['123', 456] //ok
let arr = [234, '123'] // error
// 在实际开发中我们也知道我们数组里的数据是不可确定的，所以一般我们对于这样的可以这样定义
let arr: any[] = [...] //这样就可以了

// 枚举
enum Sex {
    male,
    female
}
// 枚举下标默认是从0开始的，当然我们也可以手动去设置

2. Ts 接口(interface)

ts核心的原则就是对值所具有的的结构进行检查，在ts里接口的作用就是为这些类型命名和为代码等进行定义契约。

  // 比如我们有一个查询用户的方法需要传入数字类型的用户ID,和字符串类型用户类型来进行查询，在ts中没有应用接口可能写出来的是这样的
function queryUser (queryParams:{userId:number,userType:string}) {
    axios.request({
        // ...do some
    })
}
//这样写当然没有毛病，但是如果里面有许多参数的话，写起来会很麻烦，如果使用了接口就不一样了。
interface QueryParams {
    userId:number,
    userType: 'admin'
}
function queryUser (queryParams:QueryParams) {
    axios.request({
        // ...do some
    })
}
let query = {userId: 100, userType: 'admin'}
queryUser(query) // ok 
query.userId = '100'
queryUser(query) // error 这里就会报错，因为接口规定userId是number类型的，我们传了string类型
// 接口还可以传入可选属性，方便我们对一些功能类似的接口进行复用，比如我们现在有一个学生接口，我们可以这样写。
我们现在有俩个请求函数:
//1. 根据id和类型查询用户
function queryUser (queryParams:QueryParams) {
    axios.request({
        // ...do some
    })
}
// 2. 根据id和类型和用户性别来查询用户
function queryGenderUser (queryParams:QueryParams) {
    axios.request({
        // ...do some
    })
}
// 在这种情况下我们想要定义一个可复用的接口可以使用接口的可选属性
interface QueryParams {
    userId: number,
    userType: string,
    gender?: string // 带属性后面添加 ? 即代表此属性是可选属性
}
let queryUserParams = { userId: 123, userType: 'admin' }
queryUser(queryUserParams) // ok
let queryGenderUserParams = { userId: 123, userType: 'admin', gender: '男' }
queryGenderUser(queryGenderUserParams) // ok
queryGenderUserParams.gender = 123
queryGenderUser(queryGenderUserParams) // error gender类型只能是string类型

当然接口的功能不止这些，还有很多，我这里也不细说了，有时间可以自己去看文档，文档比我说的详细的多啦。

3. 类

类作为js里老生常谈的话题，对于类的理解说实话我也没有很是透彻，对于ts里的类我使用的也比较少，目前而言用的比较多的就是将类当做接口来使用，name就会有人问，有接口了为什么还要将类来当做接口使用呢，看下面的例子你就知道了。

// 例如我们现在有一个创建用户和修改用户的需求，创建用户需要提供用户名，用户类型，用户性别，而修改用户则是之比创建用户多了一条用户id,所以我们为了复用，定义一个用户操作类
class HandleUserParams {
    public userId: string; 
    public userName: string;
    public userType: string;
    constructor({
        userId = '',
        userName = '',
        userType = 'admin', // 与接口不用的是类可以设置默认值
    } = {}) {
        this.userId = userId,
        this.userName = userName,
        this.userType = userType
    }
}

function createUser (params) {
    let params = new HandleUserParams(params)
    axios.request({
        // ..do some
    })
}

function updateUser (params) {
    axios.request({
        // ..do some
    })
}

// 比如我们想创建一个类型为admin的用户
let createParams = {userName: '大虾'}
createUser(createParams) // ok  并且userType 默认是admin
// 更新类型为admin的用户
let updateParams = {userId: '110', userName: '大虾'}
updateUser(updateParams) // ok 

4. 函数

函数类型：

funciton sum (a:number,b:number):number {
    return a + b
}
// 我们可以给函数每个参数添加类型后再给函数返回添加类型，ts能够根据返回语句自动推断出返回值类型，
//因此我们常常忽略它，但是有些地方却需要设置函数返回类型。


//可选参数和默认参数：
function sayHello (firstName:string,myName?:string) {
    return myName ? `${firstName} hello, i'm ${myName}.` : `${firstName} hello.`
}
// 这里值得注意的一个地方就是可选参数必须跟在参数后面.


// 默认参数
function sayHello (firstName:string,myName='王五') {
    return myName ? `${firstName} hello, i'm ${myName}.` : `${firstName} hello.`
}
// 默认参数不需要必须跟在参数后面.

// 剩余参数
function sayHello (firstName:string,...restName:string[]) {
    return firstName + '' + restName.join('-')
}
// 在ts里，可以吧剩余参数都放到一个变量里来保存

ts对于函数的支持还有许多功能，例如this、箭头函数、重载等等。以后有慢慢来了解更多的内容。
好啦，今天的内容就先到这里，后续我内容容我消化一下再来和大家分享～