深入浅出Typescript | 青训营

用户3950494861744
69 阅读4分钟
写在最前

什么是typescript？用ts官网的介绍就是一种基于js构建的强类型编程语言，它能为开发者提供任何规模的更好工具。
写了一年多前端后，js给我留下的最深刻的印象就是 “不报错”，这与我最早接触到的C++有很大的不同。js的语法在我接触到的所有编程语言中可以说得上是最宽松的， “不报错” 这一特点在我刚接触到js的时候会觉得很“爽”，但久而久之，js宽松的语法规则是方便还是束缚了开发者，我觉得有待商榷。有时候因为它“不报错”，导致调试的时候开发者费时费力，我甚至希望他主动报错。
就在这时我接触到了ts,它让我找到了写java的感觉。
按照开发者们公认的说法，ts是js的超集，可以理解为js的进化版。ts给我最深刻的印象就是严格，正确使用的话能很大程度提高开发者的开发效率。

Ts语法

此小节只记录作者开发中使用的常见语法

  1. 变量声明
    let num: number = 1
    let num2 = 3
    let x: string | number

在上面3行代码中，num变量在声明的时候同时赋值，规定了其为number类型的变量；num2变量虽然未声明类型，但会根据它被赋予的值确定它的类型为number；变量x的类型则被规定为string或者number。
需要注意，ts中可以把某个变量声明为any类型，被声明为any类型的变量可以被赋予任意类型的值。但是声明为any类型的变量如果赋值给其他的变量，被赋值的新变量的类型限制将被取消。

  1. 数组
    let arr1 = string[]
    let arr2 = Array<string>
    let arr3 = [string, string]

在上面3行代码中，arr1和arr2的类型都被限制为存放string的数组，而arr3则被规定为存放两个string的数组，其他数组声明以此类推即可。

  1. 函数
    function add(a: number, b: number): number {
        return a + b;
    }

上面的函数的两个参数都被定义为number类型，返回值也被定义为number类型。其他的函数声明以此类推。

  1. 类和接口
    注意，虽然可以限制Object类型的结构，但这样做的意义并不大，因为js中所有的东西都是对象。因此类和接口与ts更加适配。
    class Dog {
        private name: string,
        public age: number,
        constructor(name: string, age：number) {
           this.name = name;
           this.age = age;
       }
    }

上述代码用ts定义了一个名为Dog的类，特别注意：，先声明类的成员变量再在构造函数中赋值是ts特有的，这种做法就像C++和Java，js与python类似，可以在类实例的使用过程中给实例添加成员变量。Dog类的age是公有变量，是可供外界访问的，而name是私有变量，只能用类方法来访问，此点参考C++。
除此之外，我们还可以用接口 来定义一个类的结构，但是接口中所有的属性都不能有实际的值。接口的实现如下：

    interface myInterface {
        name: string,
        age: number,
        sayHello(): void
    }

配置文件

浏览器是“不认识”ts文件的，所有ts文件都得编译成js后才能在浏览器运行。首先应该下载tsc来编译ts文件（这一步骤用npm即可，不多赘述），最重要的是配置文件的配置。
在项目根目录中新建tsconfig.json文件然后进行相关配置：

d216c15af03020ce4e0bb81935a616f.png 以上配置只是笔者开发中常用的配置，仅供参考。

在webpack中使用ts

  1. 下载loader：npm i --save-dev typescript ts-loader
  2. 编写ts的配置文件，用配置文件一节中的配置即可。
  3. 编写webpack配置文件：
    const path = require('path');
    module.exports = {
        entry: './src/index.ts',
        module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
       ],
   },
   resolve: {
       extensions: ['.tsx', '.ts', '.js'],
   },
   output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
   },
  };

会让 webpack 直接从 ./index.ts进入，然后通过 ts-loader加载所有的.ts 和.tsx 文件，并且在当前目录输出一个 bundle.js 文件。

avatar
文章
阅读
粉丝