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

嗨害嗨，这里是因比赛与前端结缘的非科班练习生bf,今天来简单整理一下青训营“TypeScript 入门”的相关内容，废话不多说，开始整活！ヾ(≧ ▽ ≦)ゝ*

一、什么是TypeScript

TypeScript：JavaScript 的一个超集，一种给 JavaScript 添加特性的语言拓展，支持 ES6

JS 的超集：

包含与兼容所有 js 特性，支持共存
支持渐进式引入与升级

前置知识：JavaScript、ES5、ES6

对比 JavaScript 和 TypeScript：

JavaScript：动态类型、弱类型语言
TypeScript：静态类型、强类型语言

静态类型：

可读性增强：基于语法解析 TSDoc, ide增强
可维护性增强：在编译阶段暴露大部分错误 => 多人合作的大型项目中，获得更好的稳定性和开发效率

二、基本语法

TS的语法给我的感觉像是C++版的JS,因为TS属于强类型语言，每个变量都需要声明其类型，同样的每个函数的返回值也要声明其类型

基础数据结构：

1.字符串

const q: string = 'string';

还可以使用模板字符串,它可以定义多行文本和内嵌表达式

这种字符串是被反引号包围，并以${ }嵌入表达式

举个栗子：

let name: string = `lihua`;
let age: number = 114511;
let eg: string = `Hello, my name is ${ name }.
I'm ${ age } years old.`;

2.数字

const w: number = 1;

和JavaScript一样，TypeScript里的所有数字都是浮点数。

支持十进制和十六进制字面量,二进制和八进制字面量。

3.布尔值

const e: boolean = true;

4.null

const r: null = null;

5.undefined

const t: undefined = undefined;

6.对象类型：

const codemaker: Istudent = {
    jobId: 114514,
    name: 'aha',
    sex: 'man',
    age: 18,
    hobby: 'rap',
}

interface Istudent {
    /* 只读属性：约束属性不可在对象初始化外赋值 */
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /* 可选属性：定义该属性可以不存在 */
    hobby?: string;
    /* 任意属性：约束所有对象属性都必须是该属性的子类型 */
    [key: string]: any;
}

codemaker.jobId = 2233;  //error,因为可读属性不允许更改

7.函数类型：

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

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

8.数组类型：

/* 【类型 + 方括号】表示*/
type IArr1 = number[];

/* 泛型表示 */
type IArr2 = Array<string | number | Record<string,number>>;

/* 元组表示 */
type IArr3 = [number, number, string, string];

/* 接口表示 */
interface IArr4 {
    [key: number]: any;
}

9.空类型：

表示无赋值

type IEmptyFunction = () => void;

10.任意类型：

是所有类型的子类型

type IAnyType = any;

11.枚举类型：

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

    enum EnumExample {
        add = '+',
        mult = '*',
    }
    EnumExample['add'] === '+';
    EnumExample['+'] === 'add';
    
    enum EIndex {'zero','one','two'};
    EIndex['zero'] === 0;
    EIndex[0] === 'zero';

12.泛型：

type INumArr = Array<number>;

三、高级类型

联合/交叉类型

联合类型：A | B；联合类型表示一个值可以是几种类型之一

交叉类型：A & B；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

type IBookList = Array<{
    author: string;
} & ({
    type: 'history';
    range: string;
} | {
    type: 'story';
    theme: string;
})>

类型保护

我个人的理解：

类型保护，顾名思义，就是保证一个变量的数据类型，比如说我想让一个变量为字符串类型，尽管这个变量的值是一个number，运用类型保护，我也能让这个变量是字符串类型

目前主要有四种方式来实现类型保护：

1.in 关键字

判断一个属性是否存在于另一个中

interface IStu1 {
    name: string;
    age: number;
}

interface IStu2 {
    name: string;
    isTrue: true;
}

const getStu = (data: IStu1 | IStu2) => {
    if ('age' in data)
        console.log(`My name is ${data.name}.I'm ${data.age} years old.`);
    if ('isTrue' in data)
        console.log(`My name is ${data.name}. ${data.isTrue}`);
}

getStu({name:'zhangsan',age: 18}); //"My name is zhangsan.I'm 18 years old."
getStu({name:'lisi',isTrue: true});  //"My name is lisi. true"

2.typeof 关键字

判断基础类型

function padLeft(value: string, padding: string | number) { 
    if (typeof padding === "number") { 
        return Array(padding + 1).join(" ") + value; 
    } 
    if (typeof padding === "string") { 
        return padding + value; 
    } 
    throw new Error(`Expected string or number, got '${padding}'.`); 
}

注意：typeof 只能保护 number|string|boolean|symbol 类

3.instanceof 关键字

判断是不是构造函数/类

class Name { 
    name: string = '小二' 
} 

class Age extends Name{ 
    age: number = 2 
} 

const eg = (data: Name) => { 
    if (data instanceof Age) 
        console.log(data.age); 
    else 
        console.log(data.name); 
}

4.类型谓语（is）

interface IA {a: 1,a1: 2}

interface IB {b: 1,b1: 2}

function getIsIA(arg: IA | IB):arg is IA {
    return !!(arg as IA).a;
}

function log2(arg: IA | IB) {
    if (getIsIA(arg))
        console.log(arg.a1);
    else
        console.log(arg.b1);
}

四、应用场景

1.Web

配置 webpack loader 相关配置
配置 tsconfig.js 文件
运行 webpack 启动/打包
loader 处理 ts 文件时，会进行编译与类型检查

2.node

使用 TSC 编译

安装Node与npm
配置 tsconfig.js 文件
使用 npm 安装 tsc
使用 tsc 运行编译得到 js 文件

以上就是本次的整理了，我们下次再见，拜了个拜(。・∀・)ノ

TypeScript 入门学习 | 青训营笔记