【前端工程】Typescript的使用常識

Typescript的認識

Js的超集，核心是提供了靜態類型系統。
例如：定義成數字類型的變量不能用字符串類型值賦值。

vue項目中使用Typescript須要的插件

typescript」: 「\^3.1.4」 (這個是必須的，ts庫)
「ts-loader」: 「\^3.5.0」 (識別ts的loader)
「tslint」: 「\^5.11.0」 (tslint校驗庫)
「tslint-loader」: 「\^3.5.4」 (tslint的loader)
「tslint-config-standard」: 「\^8.0.1」 (用於tslint默認校驗規則)
「vue-property-decorator」: 「\^7.2.0」 (用於在.vue文件中使用ts語法)

tsconfig.json配置Typescript編譯規則

• 不帶任何輸入文件的狀況下調用tsc，編譯器會從當前目錄開始去查找tsconfig.json文件，逐級向上搜索父目錄。
• 不帶任何輸入文件的狀況下調用tsc，且使用命令行參數--project（或-p）指定一個包含tsconfig.json文件的目錄。
• 當命令行上指定了輸入文件時，tsconfig.json文件會被忽略。

{
  "compilerOptions": {
    "target": "es6", //Ts編譯成es6
    "strict": true,
    "module": "esnext",//生成指定的模塊系統代碼
    "typeRoots": ["./src/types"],//指定編譯的包的範圍
    "types": ["node", "webpack-env"],//指定可編譯的特定包
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "jsx": "preserve",
    "lib": ["dom", "es6", "es2017"],
    "baseUrl": "./",
    "paths": {//基於baseUrl，進行模塊解析的文件範圍
      "@/*": ["src/*"],
      "@config/*": ["config/*"],
      "@script/*": ["script/*"],
      "@store/*": ["src/store/*"],
      "@library/*": ["src/library/*"],
      "@modules/*": ["src/modules/*"],
      "@style/*": ["src/style/*"],
      "@components/*": ["src/components/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": ["./src/**/*"]
}

配置webpack，支持對Typescript的加載

vue文件中用Typescript時注意事項

一、Typescript默認不能識別.vue 文件，因此須要在.d.ts 中聲明.vue 模塊

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

二、在導入 vue 組件時須要指明 .vue 後綴。

Typescript中沒有後綴的文件，會首先被看成爲 js 文件，若是 js 文件沒有，就會被看成 .ts 文件。

Typescript類型定義方法

type

interface

.d.ts 文件

Typescript爲第三方插件定義類型

Typescript類型定義

持續更新...

更多資料：

vue 中使用 Ts

vue 對 Ts 的支持

從 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript