1995年衩匣，當(dāng)時(shí)在網(wǎng)景公司就職的布蘭登·艾克正為Netscape Navigator2.0瀏覽器開(kāi)發(fā)的一門(mén)名為L(zhǎng)iveScript的腳本語(yǔ)言，后來(lái)網(wǎng)景公司與昇陽(yáng)電腦公司組成的開(kāi)發(fā)聯(lián)盟為了讓這門(mén)語(yǔ)言搭上java這個(gè)編程語(yǔ)言“熱詞”辫塌，將其臨時(shí)改名為“JavaScript”，日后這成為大眾對(duì)這門(mén)語(yǔ)言有諸多誤解的原因之一。
而到了今天椭员，javascript已經(jīng)成了編程語(yǔ)言前10露乏，并有基于javascript的vue/react/angular等主流框架廣受大眾喜愛(ài)碧浊。而javescript是一種弱類(lèi)型語(yǔ)言，一些人想讓自己寫(xiě)出的代碼更穩(wěn)定瘟仿，typescript是javascript的超集辉词。目前已經(jīng)有vue+typescript/react+typescript/angular+typescript的項(xiàng)目了。本次主要說(shuō)我在vue+typescript中遇到的坑猾骡。
一、安裝
/**********************新項(xiàng)目生成************************
用腳手架直接生成
vue init webpack vue-typescript
cd /vue-typescript
npm install typescript ts-loader --save-dev
npm install
然后到檢查配置
***********************************************************/
/**********************舊項(xiàng)目改造************************
如果項(xiàng)目已經(jīng)有了敷搪，要引入typescript我們可以使用
npm install typescript ts-loader --save-dev
來(lái)配置typescript環(huán)境
********************************************************/
如果不能用兴想，檢查以下配置
packge.json中是否有typescript和ts-loader，如果沒(méi)有赡勘，重新安裝typescript或者ts-loader依賴(lài)嫂便，或者復(fù)制如下內(nèi)容到packge.json重新安裝node_modules
typescrpt依賴(lài)
"ts-loader": "^2.3.3",
"typescript": "^2.4.2",
是否有tsconfig.json文件在你的項(xiàng)目目錄下，如果沒(méi)有創(chuàng)建該文件
tsconfig.json
里面內(nèi)容如下
{
"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結(jié)尾
main.ts
resolve
增加.ts.tsx
rules
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
如果在命令行見(jiàn)到
說(shuō)明你的typescript已經(jīng)成功嵌入vue了
