TS入门基础写法讲解

179 阅读4分钟

这篇文章主要是想分享给同学们一些基础的ts的讲解定义,同样的也是最最基础的一些代码,有兴趣的同学们可以尝试着去写一写~~~

图片

双王镇楼!!

下面我们开始正题:

首先来说,ts这门语言定义是为js这门语言的超集,作为js更加规范化,标准化的一个必不可少的升级。

主要的,也是最常用的用途便是声明数据类型,规范接口数据格式。以及各种复杂的配置项。

然后我们从最基础的开始讲起,

如何在本地部署typescript环境

** **

图片

上面呢是我们如果想要在本地,不依赖各种脚手架的情况下,需要全局安装TS环境,而后才可以去写我们的TS文件。

当然,如果我们的同学想要在项目中安装ts,但是又不知道如何安装的时候,可以按照以下步骤来操作

第一种情况:新项目需要使用TS语法\

在这里,作者建议使用vite构建项目,可以快速帮助我们完成TS项目的搭建。

第二种情况:老项目想要引入TS模块,

第一种vue项目引入ts

首先是在vue配置文件中,加入以下模块

"typescript": "^4.2.3",

 "@vue/eslint-config-typescript": "^7.0.0",

   "@typescript-eslint/eslint-plugin": "^4.15.1",

    "@typescript-eslint/parser": "^4.15.1",

     "vue-class-component": "^7.2.6",

       "vue-property-decorator": "^9.1.2",

  "@vue/cli-plugin-typescript": "^4.5.12",

第二步在src文件目录下面添加一个tsconfig.json文件

{

  "compilerOptions": {

   "target": "esnext",

   "module": "esnext",

   "strict": true,

   "importHelpers": true,

   "moduleResolution": "node",

   "experimentalDecorators": true,

   "esModuleInterop": true,

   "allowSyntheticDefaultImports": true,

   "sourceMap": true,

   "baseUrl": ".",

   "allowJs": false,

   "noEmit": true,

   "types": [

    "webpack-env"

   ],

   "paths": {

    "@/*": [

     "src/*"

    ]

   },

   "lib": [

    "esnext",

    "dom",    

    "dom.iterable",   

    "scripthost"   

   ]  

},  

"exclude":[   "node_modules"  ]

}

第三步在src目录下添加一个shime.d.ts声明文件引入vue模块\

declare module '*.vue'{ 

     import Vue from 'vue'  

     export default Vue

   }

declare module '*.js'

react项目引入TS与vue方法基本相同

简单总结:

一、

安装TS环境依赖

二、

初始化项目tsc --init,暴露tsconfig.json

三、

安装TS声明模块,如@types/react等

即可使用TS语法完成项目搭建了

下面我们开始讲解TS基础语法

基础数据类型声明

图片

复杂数据类型声明

图片

联合类型的声明

图片

类型断言

图片

类型别名

图片

接口

图片

图片

泛型

图片

枚举

图片

图片

以上呢就是我们目前常用的TS语法定义的类型了,写法都非常的简单

下面我们来简单总结一下应用这些语法的场景

场景一:

应用简单数据以及复杂数据类型的时候,可以给它声明数据类型也可不声明

场景二:

当我们需要获取某个参数,比如获取dom元素时,需作类型断言,按照TS语法规则来说,我们并不清楚将要获取到一个什么参数,所以需要作出类型断言

场景三:

定义接口,我们可以使用interface|type|的方式来声明接口;其意义在于,当我们定义清楚接口参数之后,我们可以保证,接口返回的参数是我们可以处理,也是提前预知好的参数,比如我们定义一个对象传给函数,函数利用泛型返回,这个时候我们不必考虑这个函数里面是怎样运行的,我们可以直接了解到他的返回值便是我们传去的参数类型一致,简单来说就是,我们传去一个对象,他便需要给我返回一个对象,而不可能返回一个字符或者数值参数,也就等于我们这个接口不会返回任何与我传去参数的不相匹配的参数。

以上就是笔者对于TS语法的简单讲解。

题外话:

当我们已经开始做TS项目搭建的时候,我们要考虑到两点,

一、引入插件时,要相对应的安装插件声明模块,而有些项目是没有TS声明模块的,此时最简单的方法便是利用declare module声明这个模块

二、//@ts-ignore      当我们遇到无法作出数据类型推断,而导致参数无法使用的情况下,可以使用此注释来忽略错误。不建议多用

最后友情提示,此文章主要面向大众,是最基础的TS写法以及一些简单的理解,希望大家都能有所收获

 有兴趣的同学可以关注一下作者哦~~~

qrcode_for_gh_94721abee845_258-2.jpg