共计 4155 个字符,预计需要花费 11 分钟才能阅读完成。
公众号
前言
之前始终应用的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.ts
mkdir src
touch 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.json
Options:
-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.json
tsc --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 -D
npm 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-only
ts-node-transpile-only script.ts
# Equivalent to ts-node --cwd-mode
ts-node-cwd script.ts
其余
想要理解更多 ts-node 用法,能够查看官网文档:https://typestrong.org/ts-node/
理解更多文章,欢送关注公众号:前端学社