TypeScript入门 | 青训营笔记

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

五、TypeScript入门

1. 跟JavaScript的区别

   • JavaScript：动态类型（在运行时才编译做检查）、弱类型语言（类型不同的变量进行运算时自动进行强制类型转换）
   • TypeScript：静态类型（运行前检查）、弱类型语言
     • 静态类型＋JS的超集

2. TS基本语法

• TS泛型类型限制

3. TS的高级数据类型

• 基础数据类型大多可以由JavaScript转来，看起来TS的声明比JS会复杂很多

• 但是TS还可以通过组合多种基础数据类型，定义高级数据类型

• 联合/交叉类型

  • //为书籍列表编写类型
    const bookList=[{
        author:'xxx',
        type:'cs',
        range:'2001-10-01',
    },{
        author:'xxxx',
        type:'math',
        theme:'love',
    }]
    //上述代码的类型声明为
    interface IcsBook{
        author:string;
        type:string;
        range:string
    }
    interface ImathBook{
        author:string;
        type:string;
        theme:string
    }
    type IbookList=Array<IcsBook|ImathBook>;
    

  • 代码较为繁杂，可以使用联合/交叉类型

4. TS的工程应用

1. 浏览器Web

   • 使用Webpack
     1. 配置webpack loader相关配置，将TS转换成JS
     2. 配置tsconfig.js文件，相关约束
     3. 运行webpack启动/打包
     4. loader处理ts文件时，进行编译与类型检查

2. Node.js

   • 使用TSC编译
     1. 安装Node与npm
     2. 配置tsconfig.js文件
     3. 使用npm安装tsc
     4. 使用tsc运行编译得到js文件

3. 总结

   • 在没有掌握JavaScript的情况下，学习这门课还是比较难搞懂的。TypeScript是JavaScript的超集，由于是静态语言的特性，它比JavaScript有着更好的适用性。TS语言编写出来的文件可以通过Webpack和Node.js的方式转换成JS文件并运行。