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

一、重点内容：

什么是TypeScript？为什么使用TypeScript？怎么使用TypeScript

TypeScript的基本语法、高级类型应用、工程化应用

二、详细知识点介绍：

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版本发布

比较

JavaScript是动态类型语言，弱类型

TypeScript是静态类型语言，弱类型

静态和动态区别于编译执行在执行前还是执行时

弱类型会进行隐式的类型转换

特点

静态类型

可读性增强：基于语法解析TSDoc，ide增强

可维护性增强：在编译阶段暴露大部分错误

=>多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集

包含于兼容所有JS特性，支持共存

支持渐进式引入与升级

基本语法

基础数据类型

在变量名后接:类型名称

const q = 'string'
const w=1;
const e=true
const r=null;
const t=undefined

const q:string = 'string'
const w:number=1;
const e:boolean=true
const r:null=null;
const t:undefined=undefined

对象类型

开头大写I：表示定义一个类型

只读属性：约束属性不可在对象初始化外赋值

可选属性：定义该属性可以不存在

任意属性：约束所有对象属性都必须是该属性的子类型

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

any：TypeScript特有类型，指任何属性

函数类型

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

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

interface IMult{
    (x:number,y:number):number;
}

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

函数类型也可以通过interface定义

函数重载

数组类型

常用1、2种

补充类型

泛型

定义了T这个变量，根据传入的内容，为这个变量赋值，

type IGetPepeatArr=<T>(target:T)=>T[];
//泛型接口 多泛型
interface IX<T,X>{
    key:T;
    val:U;
}
//泛型类
class IMan<T>{
    instance:T;
}

//泛型别名
type ITypeArr<T>=Array<T>;

泛型约束

泛型参数默认类型

类型别名 & 类型断言

字符串/数字字面量

type IDomTag='html'|'body'|'div';
type IoddNumber=1|3|5|7|9;

高级类型

联合/交叉类型

type声明不准确，而且存在大量重复

联合类型:IA | IB；联合类型表示一个值可以是几种类型之一

交叉类型:IA & IB；多种类型叠加到一起成为一种类型，它包含所需所有类型的特性

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

类型保护与类型守卫

访问联合类型时，处于程序安全，仅能访问联合类型的公共部分

类型守卫：定义一个函数，他的返回值是一个类型谓词，生效范围为子作用域

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)
    }
}

在两个类型完全没有重合点时，才需要编写类型守卫

tips：Record<string,any>相当于任意类型的object

索引类型：

关键字[keyof],其相当于取值对象中的所有key组成的字符串字面量

关键字[in]：其相当于取值字符串字面量中的一种可能，配合泛型P，即表示每个key

关键字[?]：通过设定对象可选选项，即可自动推导出子集类型

函数返回值类型

工程化应用

Webpack

配置webpack loader相关配置

配置tsconfig.js文件

运行webpack启动/打包

loader处理ts'文件时，会进行编译与类型检查

Node

使用TSC编译

安装Node与npm

配置tsconfig.js文件

实用npm安装tsc

使用tsc运行编译得到js文件

三、课后个人总结：

今天学习了TypeScript入门级知识，了解了JS与TS的差异，学到了TypeScript中的基本应用和高级技巧，体会到了TypeScript在开发中的优势与思想。

TypeScript入门 | 青训营笔记

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