1995年，当时在网景公司就职的布兰登·艾克正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言，后来网景公司与昇阳电脑公司组成的开发联盟为了让这门语言搭上java这个编程语言“热词”，将其临时改名为“JavaScript”，日后这成为大众对这门语言有诸多误解的原因之一。
而到了今天，javascript已经成了编程语言前10，并有基于javascript的vue/react/angular等主流框架广受大众喜爱。而javescript是一种弱类型语言，一些人想让自己写出的代码更稳定，typescript是javascript的超集。目前已经有vue+typescript/react+typescript/angular+typescript的项目了。本次主要说我在vue+typescript中遇到的坑。
一、安装
/**********************新项目生成************************
用脚手架直接生成
vue init webpack vue-typescript
cd /vue-typescript
npm install typescript ts-loader --save-dev
npm install
然后到检查配置
***********************************************************/
/**********************旧项目改造************************
如果项目已经有了，要引入typescript我们可以使用
npm install typescript ts-loader --save-dev
来配置typescript环境
********************************************************/
如果不能用，检查以下配置
- packge.json中是否有typescript和ts-loader，如果没有，重新安装typescript或者ts-loader依赖，或者复制如下内容到packge.json重新安装node_modules
typescrpt依赖
"ts-loader": "^2.3.3",
"typescript": "^2.4.2",
- 是否有tsconfig.json文件在你的项目目录下，如果没有创建该文件
tsconfig.json
里面内容如下
{
"exclude": [
"node_modules"
],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"allowJs": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"experimentalDecorators": true,
"isolatedModules": true,
"lib": [
"es2017",
"dom"
],
"sourceMap": true,
"pretty": true
}
}
- build目录下的webpack.base.conf.js
-
module.exports中入口文件改成ts结尾
main.ts -
resolve
增加.ts.tsx -
rules
{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } }
-
如果在命令行见到
说明你的typescript已经成功嵌入vue了
