typescript环境搭建(代码片段)

yyfh yyfh     2023-04-07     763

关键词:

前言

TypeScript是微软开发的一门自由和开源的编程语言,TypeScript是JavaScript的一个超集,他保留JavaScript语言本身的特性,同时他向我们提供了一些语法糖帮助我们方便更好的实践面向对象编程。

同时利用他我们可以使JavaScript开发变得更简单,同时他更符合前端模块化的开发,更是一个工程化的开发.

安装环境

1、安装Nodejs

安装下载地址NodejsDownLoads

2、安装TypeScript

npm install -g typescript

通过npm包管理工具进行全局安装TypeScript环境,安装后我们可通过如下代码片段进行测试

fenghuideMacBook-Pro:~ fenghui$ tsc -v
Version 3.8.3
fenghuideMacBook-Pro:~ fenghui$ 

HelloWord

新建文件夹ts创建一个名hello.ts的文件编写代码如下所示

console.log("hello word")

我们在通过如下命令进行执行

tsc hello.ts

执行后我们可以发现他会形成一个以hello形成的js文件

技术图片

同时打开js文件我们可以看到两个文件里面内容是相同的,因为我们并没有使用ts相关的语法.

我们再通过ts语法进行继续演示

技术图片

比如说我们进行创建一个字符串类型,我们将1赋值给str可以清晰的看到智能感知提示我们不能将类型1分配给类型string,通过这段提示我们可以发现ts对这些操作的严谨性。

那么我们需要将1改成字符串类型

var str:string="1";

执行如上代码后,我们再进行查看js文件如下所示

技术图片

typescript环境搭建,并且部署到vscode(亲测有效)(代码片段)

前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node环境。要是都有了的话,那么接下来,往下看。TypeScript环境搭建,并且部署到VSCodeTypeScript环境搭建第一步:下载淘宝镜像第二步... 查看详情

typescript基本环境搭建(代码片段)

typescript基本环境搭建工具vscode步骤扩展--主题OneDarkPronpminitpackage.json"name":"client-side","version":"1.0.0","description":"sourcecodeofts-learning","main":"./src/index.ts","scripts":"test":"echo"Error:notestspecified"&&exit1","keywords":["typescript","source_code","hequan... 查看详情

typescript教程#2:ts开发环境搭建(代码片段)

说明尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。安装过程下载node.js安装node.js使用npm全局安装:npmitypescript-g输入tsc就会出现相关信息tsc使用TS创建一个ts文件01.hello-ts.tsconsole.log("hellots");使用tsc对该文件... 查看详情

vue+ts环境搭建(代码片段)

新建?个基于ts的vue项?*vuecreatexxx*项目选项勾选上typescript在已存在项?中安装typescriptvueadd@vue/typescript 查看详情

typescript+react+antd基础环境搭建(代码片段)

typescript+react+antd基础环境搭建(包含样式定制)tsconfig.json配置//具体配置可以看上面的链接这里modulemoduleResolution的配置都会影响到antd的显示//allowSyntheticDefaultImports是antd官网给的配置必须加上"compilerOptions":"outDir":"./dist/","sourceMap"... 查看详情

typescript环境搭建(代码片段)

前言TypeScript是微软开发的一门自由和开源的编程语言,TypeScript是JavaScript的一个超集,他保留JavaScript语言本身的特性,同时他向我们提供了一些语法糖帮助我们方便更好的实践面向对象编程。同时利用他我们可以使JavaScript开发变... 查看详情

typescript搭建ts环境(代码片段)

...;Error:notestspecified\\"&&exit1","keywords":["typescript","source_code"],"author":"genius<1*******@qq.com>","license":"ISCMIT"2、构建项目目录TS_CODE_STUDY|-----build| |-----webpack.config.js||-----src| |-----ap... 查看详情

邂逅typescript(代码片段)

邂逅TypeScriptTypeScript初体验TypeScript的环境搭建第一种:ts-node环境第二种:webpack环境TypeScript初体验安装TypeScript工具:npminstalltypescript-g编写TypeScript代码functionsum(num1:number,num2:number):numberretur 查看详情

vue项目环境搭建(高配版)(代码片段)

vue项目环境搭建?Pleasepickapreset:Manuallyselectfeatures?Checkthefeaturesneededforyourproject:(*)ChooseVueversion//是否选择vue版本(*)Babel //是否安装bable(*)TypeScript//是否安装近几年流行的ts()ProgressiveWebApp(PWA)Support//渐进 查看详情

带你了解typescript(代码片段)

文章目录TypeScript是什么?javaScript是什么?JavaScript与TypeScript的区别运行环境typescript特点注意typescript语法增加了什么?TypeScript开发环境搭建基本类型类型:number类型boolean类型string类型字面量any类型unknown**注意**voi... 查看详情

搭建webpack脚手架来打包typescript代码(代码片段)

创建文件夹目录结构:dabaots初始化npminit-y生成package.json文件目录结构:dabaotsdabaots/package.json然后在开发环境中安装以下几个工具npmi-Dwebpack··························(打包代码的核心工具webpack-cli·····... 查看详情

reactnativets环境搭建(代码片段)

...,那对于编写的规范也变得更加的严格,比如说,出现的typescript,但是给编程也带来一些麻烦,比如,实现同样一个功能,我们需要写更多的代码,但优点也是很多的  1、使其更易于阅读和调试。  2、为我们提供了ES6 查看详情

typescript01编译环境的搭建字符串特性类型特性

 知识准备:JavaScript满足ES5前端规范、TypeScript满足ES6前端规范1TypeScript开发环境  TypeScript代码不能直接被浏览器识别,必须先转换成JS代码;通常是利用编译器来讲TS代码转换成JS代码  1.1使用在线的编辑器    1.1.1... 查看详情

猿创征文|typescript搭建ts的编译环境(代码片段)

...持多一些不为什么的坚持📝本文章收录于专栏:Typescript学习💭眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台−−牛客网\\color#ff7f50眼过千遍不如手锤一遍:推荐一... 查看详情

vue3.0项目环境搭建(简易版)(代码片段)

vue环境搭建(简易版)?Pleasepickapreset:Manuallyselectfeatures?Checkthefeaturesneededforyourproject:(*)ChooseVueversion//是否选择vue版本(*)Babel //是否安装bable(*)TypeScript//是否安装近几年流行的ts()ProgressiveWebAp 查看详情

angular搭建与分析(代码片段)

对于Angular我们知道,其是一款来自谷歌的用HTML和TypeScript构建客户端应用的平台与的开源web框架。而Angular本身就是用TypeScript开发而成的。它将核心功能和可选功能作为一组TypeScript库进行实现,可以根据需求把它们导入到应用中... 查看详情

vue-cli4.5搭建(vue3+typescript+antdesign2)环境及vscode代码自动格式化配置(代码片段)

一开始是准备用vite的,但总是出不来,案例也比较少,感觉还不成熟,暂时放弃了。1、升级vue-cli为最新4.5cnpminstall-gvue@vue/cli2、创建项目vuecreatedemo1选择Manuallyselectfeatures  选中这些组件  选择3.x选择:ESLint+Prettier&n... 查看详情

搭建typescript开发环境最详细的全过程

本文《搭建typescript开发环境最详细的全过程》的源代码在https://github.com/lingsbb/ts_demo/下载。搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamplestypescript案例https://www.tslang.cn/samples/index.html安装git:http://git 查看详情