这是我参与「第四届青训营」笔记创作活动的第5天

前言

随着前端越来越工程化，JavaScript一些特性逐渐无法满足我们的需要，这时TypeScript应运而生,他可以更好地满足我们在编写js代码时，对类型的限定，使得我们的代码更加严谨，避免由类型不明确带来的错误。

为什么是typescript

typescript相较于JavaScript是静态语言，他必须经过编译后才能执行。而两者都是弱类型语言
静态类型的有点：

可读性增强，ide有很强的类型提示和补全。
可维护性增强，在编译阶段就会暴露出大部分的错误。
多人合作的大型项目中，获得更好地稳定性和开发效率。

typescript是JavaScript的超集，包含于兼容所有js特性。

基本语法

基础数据类型的定义： 我们只需要在我们想要定义的变量后用:type来明确我们变量的基本类型

对象类型的定义： 使用interface接口来定义对象的数据类型 一般情况下，我们默认以I开头来定义类型名称

函数类型的定义 函数类型包括两部分内容：参数类型和返回值类型。
对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。同样，在书写的时候，我们可以仅对一边的变量进行赋值，这时，ts的编译器会自动进行类型推断，识别出另一边的类型。所以以下这种书写也是符合要求的:

// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; }; 
// The parameters `x` and `y` have the type number 
let myAdd: (baseValue: number, increment: number) => number = function(x, y) { return x + y; };

为了避免书写函数时代码过长，函数类型同样也支持用interface进行数据类型的定义

函数重载

函数名相同, 而形参不同的多个函数

// 重载函数声明
function add (x: string, y: string): string
function add (x: number, y: number): number

// 定义函数实现
function add(x: string | number, y: string | number): string | number {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 x + y
  if (typeof x === 'string' && typeof y === 'string') {
    return x + y
  } else if (typeof x === 'number' && typeof y === 'number') {
    return x + y
  }
}

console.log(add(1, 2))
console.log(add('a', 'b'))
// console.log(add(1, 'a')) // error

数组类型的定义

常用前两种类型定义方式
Record<>可以实现定义一个对象的 key 和 value 类型

Typescript 补充类型

Typescript 泛型

在定义阶段不要求类型，只有在使用的时候才规定类型
以下这个案例可以这样理解：loggingIdentity接收两个参数，一个是类型参数T,另一个是类型参数为Array的参数arg，最后返回值得类型为Array。

function loggingIdentity<T>(arg: Array<T>): Array<T> { 
console.log(arg.length); // Array has a .length, so no more error return arg; 
}

*泛型约束：为了使我们能够访问T泛型的length属性，而any属性显然是不具有length属性的，所以我们定义一个接口，再让泛型来使用extends关键词来对泛型进行约束，这样我们就可以拿到length属性了。

interface Lengthwise { 
    length: number; 
} 
function loggingIdentity<T extends Lengthwise>(arg: T): T { 
    console.log(arg.length); // Now we know it has a .length property, so no more error return arg; 
    }