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

TypeScript简介

为什么要学习TypeScript

动态类型：执行阶段再去进行类型匹配

静态类型：在执行前就确定类型，如python java

弱类型：在编译后确定数据类型，能随着环境的不同，自动变换类型

强类型：求变量的使用要严格符合定义,所有变量都必须先定义后使用

与JS的区别

js 动态类型弱类型
Ts 静态类型弱类型

优点

静态类型
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误
JS的超集
- 包含于兼容JS特性，支持共存
- 支持渐进式引入与升级

基本语法

基础数据类型

与JS基本相同

字符串

const q:string = 'string';

数字

const w:number = 1;

布尔值

const e:boolean = true;

null

const r:null = null;

undefined

const t:undefined = undefined;

函数类型

写法一

/* JS */
function add(x, y){
    return x + y;
}
/* TS */
function add(x: number, y: number): number {
    return x + y;
}

写法二

/* JS */
const mult = (x, y) => x * y;
/* TS */
const mult: (x: number, y: number) => number = (x, y) => x * y;

对比JS，其实就是要写上类型

还可以通过interface来写

interface IMult{
    (x: number, y: number): number;
}
const mult: Imult = (x, y) => x * y;

对象类型

const hm: Human = {
    Id: 1234567,
    name: 'zhangsan',
    sex: 'man',
    age: 18,
    hobby: 'programming',
}

interface Human{
    name: string;
    /* 只读约束 */
    readonly Id: number;
    sex: 'man' | 'woman';
    age: number;
    /* 可选属性 */
    hobby?: string;
    /* 任意属性 */
    [key: string]: any;
}

/* 添加只读约束readonly，不允许修改报错 */
hm.Id = 111;
/* 任意属性标注下可以添加任意属性 */
hm.plateform = 'data';
/* 除了可选属性之外，缺少任何属性都不能创建 */
const hm2:Human = {
    Id:123,
    name:'lisi',
}

数组类型

类型 + 方括号

type IArr1 = number[];
const arr1: IArr1 = [1,2,3,4,5];

泛型

type IArr2 = Array<string | number | Record<string, number>>;
const arr2: IArr2 = [1,2,{a:3}];

元祖

type IArr3 = [number,string,number];
const arr3: IArr3 = [1,'2',3];

接口

interface IArr4{
    [key: number]: any;
}
const arr4: IArr4 = [1,'string',{},[],() => null]

TS补充类型

空类型

表示无赋值

type IEmptyFunction = () => void;

任意类型

是所有类型的子类型

type IAnyType = any;

枚举类型

支持枚举值到枚举名的正、反向映射

enum EnumExample{
    add = '+',
    mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';

泛型

不预先指定具体的类型，而在使用的时候在指定类型

type INumArr = Array<number>;

泛型接口

interface IX<T, U>{
    key: T;
    val: U;
}

泛型类

class IMan<T>{
    instance: T;
}

泛型别名

type ITypeArr<T> = Array<T>;

泛型约束

默认是number，若指定约束后必须符合约束

type IGetRepeatStringArr = <T extends string>(target: T) => T[];
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(target);
getStrArr('123')

类型别名

通过type关键字定义别名

type IObjArr = Array<{
    key: string;
    [objKey: string]: any;
}>

类型断言

通过as关键字断言

function keyBy<T extends IObjArr>(objArr: Array<T>){
    const result = objArr.reauce((res, val, key) => {
        res[key] = val;
        return res;
    }, {});
    return result as Record<string, T>;
}

指定字符串、数字的字面值范围

用 | 指定范围

type IExample = '123' | '456' | '789';

总结与感想

在以前，我并没有接触甚至是听说过TypeScript这门语言（属于是孤陋寡闻），但经过这节课的初步了解，个人感觉这门语言的语法跟JS类似，但比JS更为严格、严谨，其中还融合了Java的部分思想和语法。

这次的笔记依然是注重课上内容（因为不看笔记不久就会忘），总的来说，仅靠一节课就掌握是不可能的事。就我目前水平，暂时也没运用得到TS的地方，所以仅仅当个了解了。

TypeScript基础语法 ｜ 青训营笔记