前言：
TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。---- 引子
主题：
第一步、安装依赖：
npm、cnpm、yarn都支持
npm install typescript ts-loader --save-dev
npm install vue-property-decorator --save-dev
第二步、配置vue.config.js 打包与启动：
module.exports = {
publicPath: './',
configureWebpack: config => {
config.externals = {
// 混入ts↓
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"] },
// 使用ts后改变入口文件
base: {
entry: {
app: resolve('src/main.ts') // 把main.js改为main.ts
},
resolve: {
extensions: ['vue', '.js', '.ts']
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
// 混入ts结束⤴️
}
}
第三步、新建tsconfig.json放在项目根目录（与packge.json同级）：
{
"compilerOptions": {
"target": "es5", // 编译目标平台
"outDir": "./dist/", // 输出目录
"module": "commonjs", // 指定生成哪个模块系统代码
"noImplicitAny": false, // 在表达式和声明上有隐含的any类型时报错
"removeComments": true, // 移除注释
"pretty": true,
"strict": true,
"importHelpers": true,
"moduleResolution": "node", // 模块的解析
"experimentalDecorators": true, // 启用装饰器
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true, // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
"baseUrl": "./", // 指定基础目录
"allowJs": true, // 允许编译javascript文件
"noEmit": true,
// "types": [
// "webpack-env"
// ],
"paths": {
"@/*": [
"src/*"
]
},
// 添加需要的解析的语法，否则TS会检测出错。
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*",
"types"
],
"exclude": [
"node_modules"
]
}
如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译：
使用tsconfig.json
- 不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。
- 不带任何输入文件的情况下调用tsc，且使用命令行参数–project（或-p）指定一个包含tsconfig.json文件的目录。
当命令行上指定了输入文件时，tsconfig.json文件会被忽略。
以上配置应该是目前最全的配置了。
第四步、声明文件：
举例 : 使用swipe
新建声明文件shims-vue.d.ts放在根目录：
declare module 'vue-awesome-swiper' {
export const Swiper: any
export const SwiperSlide: any
}
这个主要的作用是声明vue外部引入的组件库等。
第五步、新建sfc.d.ts 全局vue声明文件：
/**
* 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
* 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
* 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件
*/
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
/**
* 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错
*/
declare var window: any
/**
* 引入部分第三方库/自己编写的模块的时候需要额外声明文件
* 引入的时候，需要使用类似 import VueLazyLaod from 'vue-lazyload' 的写法
*/
// 例子：
// declare module 'vue-lazyload'
// declare module '@zz/perf/vue'
// declare module 'raven-js'
// declare module 'raven-js/plugins/vue'
第六步、总结：
总体来说，无论是初始项目引入，或是已有项目混入ts都是比较友好的。
比如配置适配js文件后，可以逐个文件慢慢改。
但开发中的项目引入ts我建议先不要使用main.ts当入口文件
可以优先改写vue中的ts写法
在vue中引入ts：
//内容
<script lang='ts'>
methods:{
//例子:写一个点击选中链接的功能
copyUrl(data){
//js写法
var Url1 = document.getElementById("inviteCode").innerText ; //js
//ts写法
var Url2 = (document.getElementById("inviteCode") as HTMLInputElement).innerText ; //ts
//ts标准写法
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = {
firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
}
initData(key_type:any){
//函数
}
}
</script>
待项目基本改写完成，最后更改main.js。
以上
全文完