TypeScript特性及实践

2018-10-20  本文已影响0人  lulucy12123

本文面向读者:对ES6知识有一定掌握的,刚开始使用或准备使用TypeScript的前端同学,对TypeScript感兴趣的,以及就是来看看的同学。(为什么呢!?(･_･;? 因为我使用ts还没有很长时间,主要是也写不深 :-D,这篇文章也主要是自己对TypeScript学习的一个总结记录,方便以后的学习回顾,这里我就先介绍一些个人觉得比较实用的ts特性,及相关的使用)

TypeScript是什么

TypeScript(简称ts)是一种由微软开发的自由和开源的编程语言。它是 Javascript 的一个超集，扩展了JavaScript的语法. 其本质上是向Javascript语言添加了可选的静态类型和基于类的面向对象编程。
JavaScript和TypeScript的关系大家看下面图片就清楚了:

image
在使用TypeScript之前推荐大家一个比较好用的编辑器Visual Studio Code , 它对ts最友好, 它的代码提示、片段及调试功能也非常棒！

TypeScript特性

下面介绍一些ts的特性和相关的使用。

接口

使用 interface 关键字来定义接口;TypeScript的核心原则之一是对值所具有的结构进行类型检查。它的作用就是为这些类型命名和为你的代码或第三方代码定义契约。(RD们对接口这个词应该很熟悉,现在前端也有了哦,RD们在写前端的时候用ts会更好理解)
先来个栗子:

interface Person{
    name : string,
    address : string
}
function info(person:Person){
    console.log(person.name+"--"+person.address);
}
let tom = {name:"Tom",age:30,address:"上海"};
info(tom);//输出 Tom--上海

上例中：

上面的例子是一个属性类型接口, 此外, 可以在属性名后加 '? '来设定可选属性, 在属性名前用 readonly 来指定只读属性。
有个特殊的情况, 当你添加了任意数量的其它额外属性时,如果按上面这样写ts在编译时类型检查则会报错,最佳的方式是能够添加一个 字符串索引签名，如下:

interface Person {
            name?: string;
   readonly adress: string;
    [propName: string]: any;
}

接口除了上面讲的属性类型接口,还有函数类型接口, 可索引类型接口, 类类型接口等。

命名空间

ts为了与 ECMAScript 2015里的术语保持一致， “内部模块”现在称做“命名空间(namespace)”。 “外部模块”现在则简称为“模块(module)”。
使用namespace关键字 +名称, 来定义命名空间;
看个栗子理解下:

 namespace Validation {
    export interface Person    {
         name: string
    }
    const  ac= "abc";
    export  function a(){
        console.log("This is a namespace");
    }
}

如上面例子, 把定义好的接口,方法都放到一个叫做Validation的命名空间里, 这样可以与外部命名空间隔离开,避免了与外部空间的相互影响。如果我们想让他们在命名空间之外也是可访问的，需要使用 export。

  /// <reference path="..." />

TypeScript在Vue中的实践

上面介绍了ts中的一些特性,相信大家对ts也已经有一定的了解了, 那么我们在实际开发中如何将ts有效的用到我们的项目中呢？下面来看看如何在vue中使用ts。

项目配置

TypeScript文件是以ts为后缀名的，所以我们需要在webpack中配置ts的加载器，如下：

npm i ts-loader --save-dev

webpack中配置：

{
   entry: {
         app: './src/main.ts'
    },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
 module: {
    rules: [
       {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ],
  }
}

由于ts有自己的编译器，所以我们需要在根目录下新建 tsconfig.json 文件，根据项目对ts编译器进行配置。如下：

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}

上面是一个简单的配置项，根据项目的需要我们可以添加其他相关选项，具体配置请查看官方文档
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shims.d.ts 文件，放在项目对应使用目录下，例如 src/vue-shims.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

这个文件的作用就是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。
在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。这是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：

import Component from 'components/index.vue'

需要注意的是在vue文件的script标签里需要添加lang='ts'
至此，这个项目就差不多配置好了，我们就可以在项目里使用ts的语法了。

vue-class-component

vue英文官网推荐了一个叫vue-class-component的包， 它对 Vue 组件进行了一层封装，让 Vue 的组件语法在结合了 TypeScript 语法，我们可以以class的模式写vue组件。这带来了很多便利：

@Component({
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        'component-a': ComponentA
    }
})
export default class App extends Vue {
    firstName: string;
    lastName: string;
    //初始data
    msg :number = 123;
    //computed
    get fullName ():string {
        return this.firstName + this.lastName;
    }
    //methods
    hello () :void {
        console.log(`Hello ${this.fullName}`);
    }
}

上面就是一个Vue与TypeScript结合的例子。在Vue官网中也有说明，在 Vue 2.5.0 中，大大改进了类型声明以更好地使用默认的基于对象的 API，更好的TypeScript集成。以上内容如有不恰当的地方，欢迎给予指教！本文中介绍的只是关于TypeScript的一些内容，如果对TypeScript感兴趣的同学可以更深入的研究，欢迎一起来探讨！

参考资料：

上一篇下一篇

猜你喜欢

热点阅读