TypeScript入门 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天，本节课老师主要是讲了ts的发展历程，以及为什么现在越来越多的人拥抱ts，还有ts的基本类型和函数类型，以及接口类型的声明和函数重载。总结，ts是现在以及未来的前端优势语言，必须得会。

1. 为什么选择TypeScript

1.1 TypeScript发展历史

• 2012-10 ：微软发布了 TypeScript 第一个版本（0.8）
• 2014-10：Angular 发不了基于 TypeScript 的 2.0 版本
• 2015-04： 微软发不了 Visual Studio Code
• 2016-05： @types/react 发布， TypeScript 可开发 React
• 2020-09：Vue 发不了 3.0 版本，官方支持 TypeScript
• 2021-11：v4.5版本发布

1.2 TypeScript的优点

js是动态、弱类型语言，ts是静态、强类型语言，是js的超集

• 可读性强
• 可维护性强
• 开发效率高，稳定

编辑器：vscode / webstorm

2. TypeScript语法

下面是ts的语法风格和类型声明，类型和js没有区别，不过需要在声明变量的时候也指定类型

const a: number = 1 // 数字
const b: boolean = true // 布尔值
const s: string = 'hello ts' // 字符
const arr: Number[] = [1, 2, 3] // 数组
const brr: Array<number> = [1, 2, 3]	// 另一种数组声明
const c: any = 1 // 任意值

// interface声明数组类型
interface Arr {
  [key: number]: number
}

interface Person {
  name: string;
  age: number;
  log?: function	// 可选类型
}

const p: Person = {name: 'pig', age: 18}

// 函数类型声明
const add = (x: number, y: number): number => x + y

// 函数的重载（函数名相同，但是类型不同）
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

interface Fn {
  (x: number, y: number): number
}

interface Person {
    readonly id: number; // 只读属性
    name: string;
    age?: number;
    [propName: string]: any;
}

//泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
// 泛型接口
interface Person<T, U> {
  key: T;
  val: U;
}

// 泛型类
class Person<T> {
  instance: T;
}

// 泛型别名
type ArrType<T> = Array<T>