【前端工程】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时注意事项

1、Typescript默认不能识别.vue 文件，所以需要在.d.ts 中声明.vue 模块

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

2、在导入 vue 组件时需要指明 .vue 后缀。

Typescript中没有后缀的文件，会首先被当作为 js 文件，如果 js 文件没有，就会被当作 .ts 文件。

Typescript类型定义方法

type

interface

.d.ts 文件

Typescript为第三方插件定义类型

Typescript类型定义

更多资料：

vue 中使用 Ts

vue 对 Ts 的支持

从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript