这是我参与「第五届青训营」伴学笔记创作活动的第9天。

一、本堂课重点内容

发展历史
基本语法

二、详细知识点介绍

TS与JS

JavaScript：动态类型，弱类型，执行阶段决定类型匹配

TypeScript：静态类型，弱类型，提前进行类型匹配，需要编译，弱类型语言可以进行自动类型转换，如字符串的1和数字的1相加，会将数字1自动转为字符串，所以const a = "1" + 1;的值为"11"。

TypeScript的可读性增强，基于语法解析可以自动生成文档；可维护性增强，有编译阶段，可暴露大量错误；多人合作的大型项目提高效率；是JS的超集，兼容JS的所有特性，支持共存。

基本数据类型

const hello : string = "Hello World!"

TypeScript的基础数据类型包括：any number string boolean void null undefined never，还有

数组

// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];

元组

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

枚举

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

对象数据类型，接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

函数

函数定义的几种方式：

function add(x: number, y: number): number {
    return x + y;
}

const add1: (x: number, y: number) => number = (x, y) => {//定义一个函数类型，返回值用=>表示
    return x + y;
};

interface IAdd {//接口形式定义
    (x: number, y: number): number;
}

const add2: IAdd = (x, y) => x + y;

函数重载

函数重载：函数名称相同，但是参数的个数或者类型不同。

function getDate(type: "string", timestamp?: string): string | Date参数表中用?:表示缺省参数，返回值中用|表示返回值为以下类型的某一个，第一个参数type只能为"string"这个字符串。

类型别名&类型断言

type关键字：type其作用就是给类型起一个新名字，可以作用于原始值（基本类型），联合类型，元组以及其它任何你需要手写的类型。

注意：起别名不会新建一个类型 - 它创建了一个新名字来引用那个类型。给基本类型起别名通常没什么用。类型别名常用于联合类型。

as关键字：实现类型断言，return result as Record<string, T>;，在类型很明确的情况下可以用类型断言。

数组

Record<K,V>

Record<K,T>构造具有给定类型T的一组属性K的类型。在将一个类型的属性映射到另一个类型的属性时，Record非常方便。Record 后面的泛型就是对象键和值的类型。

数组就是一个特殊的Object。

typescript数组定义方式：

枚举

枚举类型支持枚举值到枚举名的正反映射。

enum Calculator {
    add = "+",
    mult = "*"
}

Calculator.add === "+";//或者Calculator["add"] === "+";
Calculator.mult === "*";

泛型

不预先指定具体的类型，而是在使用的时候根据传入的内容才指定类型。

//泛型接口
interface IX<T, U> {
    key: T,
    value: U
}

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

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

泛型约束

限制泛型必须为指定类型，泛型函数，泛型类，泛型接口，泛型别名通用。

class IClass<T extends string> {
    instance: T;
}

泛型默认类型

若实现时不指定泛型，则按照默认泛型类型，泛型函数，泛型类，泛型接口，泛型别名通用。

class IClass<T = string> {
    instance: T;
}

三、实践实习例子

接口

interface IStudent {//接口定义
    readonly id: number;//只读属性，只能在初始化时赋值
    name: string,//基本数据类型
    major: "CS" | "IS",//需为里面某一值或为undefined
    hobby?: string,//可选值，可有可无
    print: Function,//函数
    [key: string]: any,//任意属性，约束所有对象属性都必须是该属性的子类型，只能为 'string', 
    //'number', 'symbol', 或模板文字类型
}
//接口实现
const stu: IStudent = {
    id: 1,
    name: "Alice",
    major: "CS",
    print: function () {
        console.log(this.name);
    }
};

函数重载

// 函数的定义
function add(num1: number, num2: number): number;
function add(num1: string, num2: string): string;

// 函数的实现
function add(num1: any, num2: any): any {
    return num1 + num2;
}
//或者
// 联合类型
function getLength(args:string | any[]){
    return args.length;
}
// 函数重载
function getLength2(args:string):number;
function getLength2(args:any[]):number;
function getLength2(args:any):any{
    return args.length
}

type关键字

type Second = number; // 基本类型
let timeInSecond: number = 10;
let time: Second = 10;  // time的类型其实就是number类型
type userOjb = {name:string} // 对象
type getName = ()=>string  // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName  // 联合类型

Record示例

interface EmployeeType {
    id: number
    fullname: string
    role: string
}
 
let employees: Record<number, EmployeeType> = {
    0: { id: 1, fullname: "John Doe", role: "Designer" },
    1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
    2: { id: 3, fullname: "Sara Duckson", role: "Developer" },
}

四、课后个人总结

本节课学习了TypeScript的发展历史和基本语法，了解到了TypeScript与JavaScript的区别和联系，并比较了动态与静态类型语言的区别，体会到TypeScript为解决JavaScript存在的问题而提出的必要性。本节课学习了TypeScript的基本语法，包括变量、函数、类型的定义和使用，与JavaScript有很多相同点，但也有很多新特性，希望以后继续学习。