`TypeScript` VS `JavaScript`

`TypeScript`	`JavaScript`
`JavaScript`的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

TS基础-基础类型

boolean、number、string
枚举enum 不仅做了映射而且还有反映射
any、unknown、void
never
数组类型[]
元组类型tuple

TS基础-函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型

输出参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

TS基础-`interface`

定义：接口是为了定义对象类型

特点：

- 可选属性： ？
- 只读属性：`readonly`
- 可以描述函数类型
- 可以描述自定义属性

总结：接口非常灵活 duck typing

TS基础-类

定义：写法和JS差不多，增加了一些定义

特点：

增加了public、private、protected修饰符
抽象类：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
interface约束类，使用implements关键字

TS进阶-高级类型

联合类型 |

// 联合类型
let num: number | string

num = 8
num = 'eight'

交叉类型 &

// 交叉类型
interface Person {
    name: string
    age: number
}

type Student = Person & {grade: number}

const stu: Student = {
    name: '张三',
    age: 18,
    grade: 3
}

类型断言

// 类型断言
function getLength(arg: string | number) : number {
    return arg.length // arg如果是number就会报错
}

// 类型断言 无报错
function getLength(arg: string | number) : number {
	const str = arg as string
    if(str.length) {
        return str.length
    } else {
      const number = arg as number
      return number.toString().length
    }
}

类型别名

定义：给类型起别名

type VS interface:

相同点	不同点
都可以定义对象或函数	`interface`是`TS`用来定义对象，`type`是用来定义别名方便使用的
都允许被继承	`type`可以定义基本数据类型，`interface`不行
	`interface`可以合并重复声明，`type`不行

TS进阶-泛型-什么时候需要使用泛型？

官方定义：

软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

泛型使用的例子：

function print <T> ( arg : T ) : T { // <T> 定义了一个名为T的泛型。
    console.log(arg)
    return arg
}

泛型类似一个变量，只不过这个变量的取值只能是数据类型。

TS进阶-泛型-基本使用

基本定义：

1. 泛型的语法是`<>`里面写类型参数，一般用`T`表示;
2. 使用时有两种方法指定类型：
 	1. 定义要使用的类型
 	2. 通`TS`类型推断，自动推导类型

3. 泛型的作用是临时占位，之后通风传来的类型进行推导

function print <T> ( arg : T ) : T { // <T> 定义了一个名为T的泛型。
    console.log(arg)
    return arg
} 

print<string>('hello') //定义T为sting

print('hello') //TS类型推断，自动推断出T为string

TS进阶-泛型工具类型-基础操作符

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[K]：索引访问
extends：泛型约束

interface Person {
    name: string
    age: number
}

const sem: Person = {
    name: '张三',
    age: 18
}

type Sem = typeof sem; // Sem = Person

type K1 = keyof Person; // 'name' | 'age'
type K2 = keyof Person[]; // 'length' | 'toString' | 'pop' | 'push' | 'concat' | 'join'

type Keys = 'a' | 'b' | 'c'

type obj = {
    [p in Keys]: any
} // -> { a : any, b : any, c : any }

interface IPerson {
    name: string
    age: number
}

let type1: IPerson['name'] //string
let type2: IPerson['age'] // number

interface Lengthwise {
    length:number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
loggingIdentity({length:5})

TS进阶-泛型工具类型-常用工具类型

Partial<T>：将类型属性变为可选

type Partial<T> = {
    [P in keyof T]?:T[P];
}

Required<T>：将类型属性变为必选

type Reguired<T> = {
    [P in keyof T]-?: T[P]
};

Readonly<T>：将类型属性变为只读

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Pick、Record...

TypeScript入门 ｜ 青训营

TypeScript VS JavaScript