Jac 前端攻城屍的玻璃心: typescript

顯示具有 typescript 標籤的文章。顯示所有文章

2024年4月16日星期二

在vue裡面寫pug真的有這麼恐怖嗎？

前言

許久之前有開過一個vue3專案，template我使用pug來寫，基本上用得還算順利。除了一開始不會自動排版，但也靠vetur解決了（雖然vetur那時跟volar打架，但後來也還算完美落幕）。一直到這兩天我從新起了一個專案，憑藉對ts及vue的熟悉，我突然感覺到不太對勁：不光是template幾乎不會報錯、ts不會自動跳出提示，連格式化也失靈了。因此我開始上網求助

網路大神果然不會讓我失望，清一色都是叫我儘早放棄，把pug說的要多糟有多糟，支援要多差有多差。

洨編連團隊的道歉信都寫好了，準備要把所有template改回html，最終看到圖片中那則留言，想說死馬當活馬醫吧。再試一回，結果真讓我試出來了。以下來記錄一下

備註一下，以下小編都是使用vscode及相關套件進行處理

首先是format的部分（prettiers extension請先安裝好）

yarn add -D prettier @prettier/plugin-pug

// .prettierrc

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": false,
  "printWidth": 150,
  "tabWidth": 2,
  "pugClassNotation": "attribute",
  "pugExplicitDiv": true,
  "pugSortAttributes": "asc",
  "pugSortAttributesBeginning": [],
  "pugSortAttributesEnd": [
    "v-for",
    "^:",
    "^@",
    "^v-"
  ],
  "plugins": ["@prettier/plugin-pug"]
}

這樣就可以使用prettier進行format了（我還以為prettier什麼都支援，原來需要外掛），後面那些設定大家可以自行調整，洨編是依照個人喜好設定

再來是vscode typescript compiler的部分

yarn add -D @vue/language-plugin-pug

// tsconfig.json

{

  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
}

這樣類別及型別錯誤什麼的就可以正常辨識了。

不過網路大神講得這麼恐怖，或許其中還有什麼未知的問題等待我去挖掘，總之我提出的三個問題暫時是解決了，至於未來.....的事交給未來的我去解決吧！

又過了驚險的一天，收工下班！

2023年3月15日星期三

Typescript在filter後需要指定過濾完的type

ts畢竟屬於一種擴充的超集合，並非是原生的一個語言，所以某些情境使用上會沒有這麼直覺。

先不要戰！！還是都有得解，只是不熟悉的小夥伴可能需要去查閱一下資料。

例如大家最熟悉的一個方法filter，對ts來說他就沒有辦法很明確知道過濾完之後會剩下什麼類別的集合，參見圖片

ide提示sub有可能是undefined，但理論上我應該在filter就把sub為空的都過濾掉了。當然你可以忽略紅線，也可以使用?或!告訴ide一定有值，今天要使用我上網爬文看到的方法，只要加上一段定義回傳內容即可

etc，如果直接定義方法回傳內容為(x): iType => ...是會報錯的喔，因為!!x.sub是boolean並非iType

2021年9月23日星期四

vite vue3 ts踩過的坑

記錄一下踩過的坑

在src/interface/index.ts寫了如下

export interface iSelf {
    id: number
    phone: string
    role: number
    email?: string
    name_ch?: string
    name_en?: string
    gender: number
    identity_id?: string
    birthday?: string
    resident_status: string
}

export interface iUser extends iSelf {
    checked: boolean
}

再引用時卻出現

Uncaught SyntaxError: The requested module 'src/interface/index.ts' does not provide an export named 'iUser'

這沒道理啊，一個檔案寫一個interface就正常，寫兩個就抱錯了！

網上高手給出ts3.8的export type特性

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html?fbclid=IwAR1pDqvqiYjNJkzFarak8i29xKAnPCCtK5fy2xgjUUmcS0BW4eRnqaesISo

但使用過後依然沒效

最終找到 https://github.com/vitejs/vite/issues/2117 這理尤大給出的答案，vite只支援ES Module，所以對於typescript的支援需要安裝套件

基本上安裝@rollup/plugin-typescript + tslib，然後到vite.config.ts加上plugin

import typescript from "@rollup/plugin-typescript"

export default defineConfig({
  plugins: [vue(), typescript()],
})

然後src/interface/index.ts修改如下

/// <reference path="_user.d.ts" />

src/interface/_user.d.ts內容如下(對於src/interface模組進行擴充)

declare module "src/interface" {
  interface iSelf {
    id: number
    phone: string
    role: number
    email?: string
  }

  interface iUser extends iSelf {
    checked: boolean
  }
}

使用方式如下(注意是import type)

import type { iUser } from "src/interface"
const datas: Array<iUser> = []

這樣運行就正常了

----------------------- 我是分隔線 ------------------------

以下不是常規方法，但總算是我試出來的分法，也記錄一下

如果不想引用套件，那src/interface/index.ts就要額外宣告變數

/// <reference path="_user.d.ts" />

export const iUser = {}
export const iSelf = {}

使用

import { iUser } from "src/interface"

但這樣有時還是會錯誤，iUser有時會被認為是any，所以還是乖乖正規吧

小結

看來一門技術只出來一年，還是有許多坑要採，沒關係要用就用得徹底一點，繼續踩坑吧

----------------------- 我是分隔線 ------------------------

9/5補充

不知為何當天需要安裝@rollup/plugin-typescript, tslib套件，vite原生就可以支援typescript才對，今天測試把套件拿掉結果一樣可以跑，所以就這樣吧～

2024年4月16日 星期二