TypeScript基础的使用

一、类型注释

类型注释 => 作用：给js添加类型约束，约束是什么类型，就需要是什么类型
语法 => 类型

复制代码

let num: Number = 18
const str: String = '张三'

console.log(num);
console.log(str);

ts 的好处控制台的错误少了，能够及时发现错误

二、TypeScript中的数组

1. 方法：let 数组名:类型[]

复制代码

let arr: Number[] = [11, 10, 50]
let arr2: String[] = ['a', 'b', 'c']

2. 方法：let Array<类型>

复制代码

let arr3: Array<Number> = [1, 2, 3]
let arr4: Array<String> = ['a', 'b', 'c']

三、联合类型

一个变量既可以存数字和字符串
联合类型可以将多个类型联合成一个类型 ,语法: |

复制代码

  let tmap: Number | String
    tmap = 123
    tmap = 'sz'

    let arrNum: (Number | String)[] = [1, 2, 'a', 'b']
    let arrNum1: Array<Number | String> = [1, 2, 'a', 'b']

   // 定时器类型
    let timed: number | null = null
    timed = setTimeout(() => {
    }, 1000)

四、自定义类型

类型别名:
自定义类型 type 可以定义类型别名

复制代码

    type testArr = (Number | String | Boolean)[]
    const arr: testArr = [1, 'abc', true]
    const arr1: testArr = [2, 'abc', false]

    //   这样也行
    type item = Number | String | Boolean

    const arr2: item[] = [1, 'abc', true]
    const arr3: item[] = [2, 'abc', false]
    // 或者使用Array
    const arr4: Array<item> = [3, 'abc', true]

五、函数类型

1.函数类型：给函数指定类型

函数类型 => 本质上 给函数参数 和 返回值 指定类型

复制代码

function add(n1: number, n2: number): number {
        return n1 + n2
    }
    let result = add(1, 2)
    console.log(result);

    function sayHi(username: String) {
        alert('hello,' + username)
    }
    sayHi('world')

2.通过箭头函数的方式

复制代码

注意，`在ts中所有的箭头函数()不用简写，否则容易发生报错`
方法:`const 函数名 = (参数1:类型, 参数2:类型): 返回值类型=>{}`

复制代码

 const add2 = (n1: number, n2: number): number => {
        return n1 * n2
    }
    console.log(add2(4, 2));

void的说明:
如果一个函数没有返回值，在ts的类型中，需要使用void类型(表示没有返回值)
返回值也可以多个类型

复制代码

   const fun2 = (n1: number, n2: number): number | string | void => {
        console.log(n1 + n2);
    }
    const fun = (n1: number, n2: number): void => {
        console.log(n1 + n2);
    }

3.第三种函数类型

只能在箭头函数/函数表达式等场景使用
方法：type 函数类型名 =(参数1: 类型，参数2: 类型) => 返回值类型

复制代码

  type fnType = (n1: number, n2: number) => void
    const fn: fnType = (n1, n2) => {
        console.log(n1 + n2);
    }
    const fn2: fnType = (n1, n2) => {
        console.log(n1 * n2);
    }

可选参数 => 函数的参数可选
可选参数: 在可传可不传后面加一个? 即可
注意点：
1. 可选参数，必须在必选参数的后面
2. 可选参数 和参数默认值互斥

复制代码

 const funs = (n1?: number, n2?: number) => {
        console.log(n1 + n2);
    }
    funs()
    funs(1)
    funs(1, 4)