ts在vue中的用法



Vue

3和Typescript的

使用

方式主要有以下几种：

1.

使用 Vue

CLI创建项目时选择TypeScript作为语言

在创建

Vue

项目时，可以选择

使用

TypeScript作为项目的语言。这样可以直接在项目中

使用

TypeScript，并且会自动生成一些TypeScript相关的配置文件和代码结构。具体步骤如下：

  vue create my-project 

在选择项目配置时选择"Manually select features"，然后选择TypeScript即可。

2. 在已有的

Vue

项目中添加TypeScript支持

如果已经有一个

Vue

项目，也可以在其中添加TypeScript支持。具体步骤如下：

- 安装TypeScript和相关依赖

 npm install --save-dev typescript ts -loader @ vue /cli-plugin-typescript 

- 配置TypeScript

在项目根目录下创建一个`

ts

config.json`文件，并添加以下内容：

 { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, " jsx ": "preserve", "esModuleInterop": true, "moduleResolution": "node", "allowSyntheticDefaultImpor ts ": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, "include": ["src//*. ts ", "src//*. tsx ", "tes ts //*. ts ", "tes ts //*. tsx "], "exclude": ["node_modules"] } 

- 配置

Vue

插件

在`

vue

.config.js`文件中添加以下内容：

 module.expor ts = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [] } }, configureWebpack: { resolve: { extensions: ['. ts ', '. tsx ', '.js', '. vue ', '.json'] }, module: { rules: [ { test: /. tsx ?$/, loader: ' ts -loader', exclude: /node_modules/, options: { append Ts SuffixTo: [/. vue $/] } } ] } } } 

- 修改

Vue

组件文件后缀名

在

Vue

组件文件中，将`.

vue

`后缀名改为`.

vue

.

ts

`，这样可以直接在

Vue

组件中

使用

TypeScript。

3. 在

Vue

3中

使用

TypeScript

在

Vue

3中，可以

使用

以下方式来

使用

TypeScript：

- 在

Vue

组件中

使用

TypeScript

在

Vue

3中，可以直接在

Vue

组件中

使用

TypeScript。具体步骤如下：

- 在`setup()`函数中定义变量的类型

- 在`defineComponent()`函数中

使用

`defineProps()`和`defineEmi

ts

()`定义属性和事件的类型

- 在`template`中

使用

TypeScript

语法

示例代码：

 <template> <div>{{ count }}</div> </template>  <script lang=" ts "> import { defineComponent, defineProps, defineEmi ts } from ' vue '  interface Props { msg: string count: number }  export default defineComponent({ props: defineProps<Props>(), emi ts : defineEmi ts (['update:count']), setup(props) { const count = ref(props.count)  return { count } } }) </script> 

- 在

Vue

3中

使用

Composition API

Vue

3中的Composition API也支持

使用

TypeScript。具体步骤如下：

-

使用

`ref()`、`reactive()`等函数定义变量的类型

- 在`defineComponent()`函数中

使用

`defineProps()`和`defineEmi

ts

()`定义属性和事件的类型

示例代码：

 <template> <div>{{ count }}</div> </template>  <script lang=" ts "> import { defineComponent, defineProps, defineEmi ts , ref } from ' vue '  interface Props { msg: string count: number }  export default defineComponent({ props: defineProps<Props>(), emi ts : defineEmi ts (['update:count']), setup(props) { const count = ref(props.count)  return { count } } }) </script> 

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/1668.html