公众号

前言

之前始终应用的Vue技术栈，在一个大型无代码平台的业务我的项目中应用过TypeScript，过后感觉很不好用，之后始终不想在业务我的项目中应用TypeScript

直到最近创立了一个React+TS我的项目，才粗浅领会到用TypeScript写业务代码真TMD爽，之前在Vue我的项目中齐全没有领会到TS这么好用。

JavaScript代码只有在运行时(runtime)能力发现错误，话中有话把我的项目跑起来，查看浏览器中成果不对或者控制台报错了，能力发现错误。

TypeScript在你写代码的过程中就能发现错误，不必等到运行时。。

一顿牢骚过会，直奔主题，接下来咱们解说一下如何搭建一个学习TypeScript 开发环境

TypeScript中文官网地址：https://www.typescriptlang.or...

Playground

微软官网也提供了一个在线开发 TypeScript 的环境。学习和测试应用都很不便，对于刚接触TypeScript的老手来说，是个很好的抉择，能够先把重点放到语法上，临时不必关怀TypeScript的编译和运行环境如何搭建。

地址：https://www.typescriptlang.or...

他还有一个益处，当应用在线开发 TypeScript 的环境写的代码遇到问题了，可间接把url给他人，他能够看到你的输出的代码，便于帮你查找问题。

例如：https://www.typescriptlang.or...

关上下面的连贯，你能够看到左侧编辑区域有输出的内容，内容和下面图片内容统一。

TypeScript编辑环境

接下来解说一下如何在我的项目中增加反对TypeScript的编辑环境。

1.创立我的项目，并初始化package.json

# 创立文件夹mkdir learn-ts # 进入文件夹cd learn-ts# 初始化我的项目npm init -y# 创立一个src文件夹，并在src文件夹上面增加index.tsmkdir srctouch src/index.ts

2.装置须要的依赖

npm install typescript --save-dev

之后执行 tsc 来运行 TypeScript 编译器。

npx tsc

看一下tsc 命令的用法：

参数很多，咱们只列举局部：

语法:   tsc [options] [file...]例子: tsc hello.ts          tsc --outFile file.js file.ts          tsc @args.txt          tsc --build tsconfig.jsonOptions: -w, --watch   监听输出文件变动                                     --pretty      设置谬误和音讯的款式 --all         展现所有的编译选项 -v, --version 打印版本 --init        创立 tsconfig.json  文件 -b, --build  -d, --declaration  创立申明文件 .d.ts                                                         ..... ..... --allowJs        容许js文件参加编译

3.创立tsconfig.json文件

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript我的项目的根目录。 tsconfig.json文件中指定了用来编译这个我的项目的根文件和编译选项。你能够通过files属性指定要编译的文件

运行命令，创立tsconfig.json文件和默认配置

npx tsc --init

执行结束以上命令之后，会在根目录创立一个tsconfig.json文件。文件外面有很多默认配置，上面咱们展现一个示例文件

具体的编译选项能够查看这个链接：https://www.typescriptlang.or...

tsconfig.json示例文件:

{    "compilerOptions": {        "module": "system",        "noImplicitAny": true,        "removeComments": true,        "preserveConstEnums": true,        "outFile": "../../built/local/tsc.js",        "sourceMap": true,        "declaration": true, //创立申明文件    },    "files": [        "core.ts",        "sys.ts"    ]}

4.应用"include"和"exclude"属性

node_module不须要编译，只须要编译src文件夹外面的内容，所以咱们要批改tsconfig.json文件

{    "compilerOptions": {        "module": "system",        "noImplicitAny": true,        "removeComments": true,        "preserveConstEnums": true,        "outFile": "../../built/local/tsc.js",        "sourceMap": true,        "declaration": true, //创立申明文件        "declarationMap": true,        "inlineSourceMap": true,        "inlineSources": true,    },    "include": [        "src/**/*"    ],    "exclude": [        "node_modules",        "**/*.spec.ts"    ]}
  • include:参加编译的文件
  • exclude：排除文件

5.细节阐明

"compilerOptions"能够被疏忽，这时编译器会应用默认值。在这里查看残缺的编译器选项列表。

"include"和"exclude"属性指定一个文件glob匹配模式列表。 反对的glob通配符有：

  • * 匹配0或多个字符（不包含目录分隔符）
  • ? 匹配一个任意字符（不包含目录分隔符）
  • **/ 递归匹配任意子目录

如果一个glob模式里的某局部只蕴含*或.*，那么仅有反对的文件扩展名类型被蕴含在内（比方默认.ts，.tsx，和.d.ts， 如果 allowJs设置能true还蕴含.js和.jsx）。

如果"files"和"include"都没有被指定，编译器默认蕴含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx），排除在"exclude"里指定的文件。JS文件（.js和.jsx）也被蕴含进来如果allowJs被设置成true。 如果指定了 "files"或"include"，编译器会将它们联合一并蕴含进来。 应用 "outDir"指定的目录下的文件永远会被编译器排除，除非你明确地应用"files"将其蕴含进来（这时就算用exclude指定也没用）。

应用命令行界面

# 依据我的项目根目录上面的 tsconfig.json编译ts文件tsc# 指定要编译的特定文件，例如上面例子：只会编译index.ts文件tsc index.ts# 编译src上面所有的.ts文件tsc src/*.ts# 指定tsconfig.jsontsc --project tsconfig.production.json# 生成.d.ts文件 和index.js文件tsc index.js --declaration --emitDeclarationOnly# 将 app.ts 和util.ts内容编译合并到index.js文件中tsc app.ts util.ts --target esnext --outfile index.js# tsc 设定一个 watch 参数监听文件内容变更，实时进行类型检测和代码转译tsc index.ts --strict --alwaysStrict false --watch

实例演示

在src/index.ts外面增加如下内容

interface LabeledValue {  label: string;}function printLabel(labeledObj: LabeledValue) {  console.log(labeledObj.label);}let myObj = {label: "Size 10 Object" };printLabel(myObj);

在我的项目跟目录上面，运行编译命令，会依据跟目录的tsconfig.json编译

npx  tsc

后果：

"use strict";function printLabel(labeledObj) {    console.log(labeledObj.label);}var myObj = { label: "Size 10 Object" };printLabel(myObj);

也能够在package.json增加scripts形式 始终监听

"scripts": {    "version": "tsc -v",    "dev": " tsc --build tsconfig.json --watch"}

增加ts-node

下面代码实例演示了通过tsc命令对TypeScript文件进行了编译，然而如果想编译完了，间接运行怎么办呢？

这时候就会用到ts-node。你能够近似地认为 ts-node = tsc + node

  • tsc 是一个编译器，把 TS 变成 JS。
  • ts-node 是一个执行环境，把 TS 变成 JS 而后执行。

装置ts-node

npm i ts-node  -Dnpm i @types/node -D

用法

# Execute a script as `node` + `tsc`.ts-node src/index.ts# Starts a TypeScript REPL.ts-node# Execute code with TypeScript.ts-node -e 'console.log("Hello, world!")'# Execute, and print, code with TypeScript.ts-node -p -e '"Hello, world!"'# Pipe scripts to execute with TypeScript.echo 'console.log("Hello, world!")' | ts-node# Equivalent to ts-node --transpile-onlyts-node-transpile-only script.ts# Equivalent to ts-node --cwd-modets-node-cwd script.ts

其余

想要理解更多ts-node用法，能够查看官网文档：https://typestrong.org/ts-node/
理解更多文章，欢送关注公众号：前端学社