本文面向读者:对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--上海
上例中：
- info方法限定为接受一个Person类型的参数
- 传入的对象，只要形式上满足接口要求即可，即：必须含有name(string) 及 address(string)
- TypeScript并不会检查属性顺序，只需要有对应的属性存在即可（如果tom对象不含有address或name属性则会报错）
上面的例子是一个属性类型接口, 此外, 可以在属性名后加 '? '来设定可选属性, 在属性名前用 readonly 来指定只读属性。
有个特殊的情况, 当你添加了任意数量的其它额外属性时,如果按上面这样写ts在编译时类型检查则会报错,最佳的方式是能够添加一个 字符串索引签名，如下:
interface Person {
name?: string;
readonly adress: string;
[propName: string]: any;
}
接口除了上面讲的属性类型接口,还有函数类型接口, 可索引类型接口, 类类型接口等。
- 函数类型接口:
可以理解为是定义函数参数和返回值类型的接口; - 可索引类型接口:
用来描述可以通过索引得到的类型, 如Array, Object; - 类类型接口:
用来规范类的内容,也就是定义类的属性和方法类型的接口,需要通过 implements 来实现类接口, 这个interface可以看做是一个抽象类，将一些行为进行抽象，而具体如何行动需要由类去实现。 - 继承接口:
一个接口可以继承多个接口, 通过接口继承，可以方便的实现接口复用, 通过大家熟悉的extends来实现继承;
命名空间
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="..." />
- 在使用其它的JavaScript库, 为了让TypeScript编译器识别它的类型，我们使用外部命名空间声明, 在namespace前加declare关键字。
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组件。这带来了很多便利：
- methods，钩子都可以直接写作class的方法
- computed属性可以直接通过get来获得
- 初始化data可以声明为class的属性
- 其他的都可以放到Component装饰器里
@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感兴趣的同学可以更深入的研究，欢迎一起来探讨！
参考资料：
网友评论