TypeScript入门~

TypeScript 概述

概念：TypeScript是具有类型语法的javascript，是一门强类型的编程语言。在 JS 基础之上，为 JS 添加了类型支持

代码层面

// TS 代码
// 变量age1是强类型的，有明确的类型。即： number（数值类型）
let age1: number = 18
age1 = '18' // 报错
// --------------------

// javascript代码
// 变量age2是弱类型的 无明确的类型
let age2 = 18
age2 = '18' // 不报错

好处在于静态类型检查，提前发现错误代码，提前规避掉风险

类型注解

let age: number = 18
说明：代码中的 : number 就是类型注解
作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错
约定了类型之后，代码的提示就会非常的清晰

类型推论

某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型

类型别名

type 别名 = 类型

type MyArr = (number | string) [] 
const arr1:MyArr = [1, '1'] 
console.log(arr1)

相当于抽离公共部分在外面定义，解决类型注解重复的问题

函数类型

函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

function fn(a:number,b:number):number{
    return a+b
}
console.log(fn(1,2))

说明：
函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

函数表达式

函数表达式的类型注解有两种方式：

1. 参数和返回值分开注解

const arr = (a: number, b: number): number => {
    return a + b
}

2. 函数整体注解

type fn = (a:number,b:number) => number
const arr:fn = (a,b)=>{
  return a+b
}

可选参数

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

b参数表示可选参数，可传可不传，一旦传递实参必须保证类型为number类型

函数无返回值 - void

概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

注意事项：
在JS中如果没有返回值，默认返回的是undefined
在TS中undefined是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型