TypeScript学习记录｜青训营笔记

净无主
29 阅读6分钟

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

TypeScript学习记录

为什么选择TypeScirpt

TypeScript是静态类型的弱类型语言。
动态类型语言就是在写完代码执行之后才会报错；而静态类型语言就是边编写代码边报错。
静态类型的好处:

  1. 可读性强：基于语法解析TSDoc，ide增强
  2. 可维护性增强：在编译阶段就可以解决大部分错误
  3. 在多人合作项目中，可以获得更好的稳定性和开发效率 强类型语言是代码中的字符串类型和整数类型是可以相加的，不用进行类型转换；而弱类型语言就是不同类型的变量是没有相互处理的，需要做类型转换。

TypeScipt的基本语法

基础数据类型

const q: string = "xxx";//字符串类型
const w: number = 1;//数字类型
const e: boolean = true;//布尔类型
const r: null = null;//null类型
const t: undefined = undefined;//undefined类型

与JS不同的地方在于，需要在变量后面加上: 数据类型。

对象数据类型

const bytedancer: IBytedancer = {
    jobId: 123456,
    name: 'Lin',
    sex: 'man',
    age: 28,
    hobby: 'swimming',
}

interface IBytedancer {
    readonly jobId:number;//设置该属性支持仅读
    name: string;
    sex: 'man' | 'woman' | 'other';//sex只能赋值为选项中的一个
    age: number;
    hobby?: string;//设置该属性是作为可选属性，也就是可以定义该属性不存在
    [key: string]: any;//任意属性：约束所有对象属性都必须的该属性的子类型
}

bytedancer就是IBytedancer类型的定义，并且给该对象类型进行了属性赋值。
对象类型IBytedancer的定义是使用interface来定义的。
readonly是给jobId属性设置为仅读，除了定义时的赋值，其他情况下的赋值都是会报错的。
sex属性定义为'man' | 'woman' | 'other'，说明属性sex只能是man，woman和other三个值其中一个。这个是限定了赋值。
hobby属性的定义是采用了?: string，首先，说明了hobby属性是string类型；其次，?:的使用说明了hobby属性是可以不存在的。
[key: string]: any是任意属性。任意属性就是约束所有对象属性都必须的该属性的子类型。any就是任意类型的意思。[key: string]是代表变量的意思，并且这个变量名称是可以设置为其他值的，比如plateform。所以其中使用方式是bytedancer.plateform = 'data'或者是bytedancer.plateform = 1234。

函数类型

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

与JS很像，就是赋值需要: 数据类型。

数组类型

type IArr1 = number[];
type IArr2 = Array<string | number | Record<string, number>>;
type IArr3 = [number, number, string, string];
interface IArr4{
    [key: number]: any;
}
  1. 类型IArr1的定义是数据类型加[]来定义，是普通的数组。
  2. 类型IArr2的泛式表示。
  3. 类型IArr3的是用元组来表示。
  4. 类型IArr4是用接口来表示的。 以下是相对应的数组类型定义的赋值：
const arr1: IArr1 = [1,2,3,4,5,6];
const arr2: IArr2 = [1,2,'3','4',{a: 1 }];
const arr3: IArr3 = [1,2,'3','4'];
const arr4: IArr4 = ['string', ()=>null,{},[]];

Typescript补充类型

type IEmptyFunction = () => void是空类型，表示没有赋值。
type IAnyTpye =any是任意类型。

enum EnumExample{
    add='+';
    mult='*';
}

如上的enum EnumExample是枚举类型，是支持枚举值与枚举名相映射的，比如，EnumExample['add']==='+'和EnumExample['+']==='add';
还有泛型是type INumArr = Array<number>。

泛型

泛型是不预先指定具体的类型，而是在使用的过程中再去指定相对应的类型，基本语法是type IGetRepeatArrR=<T>(target: T)=>T[]。泛型还可以用在接口、类和类型别名中，比如：

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

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

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

泛型约束是限制泛型必须符合某种类型，需要用到extends，例如，type IGetRespeatStringArr = <T extends string>(target: T)=>T[]如果传入string以外的类型，那么会报错。
泛型参数默认类型的语法是type IGetRepeatArr<T=number>=(target:T)=>T[]，此时该泛型T默认是number，所以传入string类型的时候会报错。

字符串/数字 字面量

字符串/数字的字面量的意思是允许指定字符串或者数字必须是固定值。 比如：sex: 'man' | 'woman' | 'other'中，sex只能是man、woman和other其中一个。

高级数据类型

联合/交叉类型

  • 联合类型：IA | IB，即表示一个值是可以是几种类之一。
  • 交叉类型：IA | IB，即多种类型叠加到一起成为一种类型，它包含了所有类型的特性。 假如有一本书籍列表，其中包含的信息是作者是一定的，但类型是分为history和story的分类中。例如书籍列表信息如下：
const bookList = [{
    author:'xiaoming',
    type:'history',
    range:'2001-2021',
},{
    author:'xiaoli',
    type:'story',
    theme:'love',
}]

如果要完成当中的type类型的不同的同时还有有range和theme之间的分类，需要用上联合和交叉类型来完成，那么实现该类型的代码如下：

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

工程应用

Typescript——Web

Typescript实现Web开发，主要是使用webpack工具，webpack主要是处理js文件的，如果需要处理Ts文件，那么需要如下步骤：

  1. 配置webpack loader相关配置。webpack loader作用是处理webpack不能处理的文件，webpack主要是处理js文件的，需要webpack loader将ts文件转化成js文件。推荐的loader有awesome-typescript-loader和babel-loder。
  2. 配置tsconfig.js文件，用来约束项目格式和其他项目行为的。
  3. 运行webpack启动或者打包。
  4. loader处理ts文件会进行编译与类检查。

Typescript——Node

node.js都是大家很熟悉的文件的了。Typescript想要使用Node.js那么还是需要将ts文件转化成js文件，步骤如下：

  1. 安装node和npm
  2. 配置tsconfig.js文件，用来约束项目格式和其他项目行为的
  3. 使用npm安装tsc文件
  4. 使用tsc运行编译到的js文件

总结

今日的学习中，学习了后端技术栈Typescript。Typescript与Javascript语法有些相近的地方，如果有Javascript基础的话，学习起来会更加轻松一些。
在学习中，学习了TypeScript的基本语法、基础的数据类型、对象数据类型、函数类型、数组类型等等。像泛型不管是Javascript还是Typescript都是使用比较广泛的数据类型，因为泛型应对的场景会更多。
也学习了Typescript工程应用，比如webpack，node.js。

引用

avatar
文章
阅读
粉丝