本文将展示如何从0开始初始化一个typescript项目。
点击访问git仓库, 点击下载代码包
初始化
首先，我们选定一个文件夹，然后在文件夹中执行npm init -y命令来对项目进行初始化。
anjie@panjies-Mac-Pro typescript-init % npm init -y
Wrote to /Users/panjie/github/yunzhiclub/typescript-init/package.json:{
"name": "typescript-init",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yunzhiclub/typescript-init.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/yunzhiclub/typescript-init/issues"
},
"homepage": "https://github.com/yunzhiclub/typescript-init#readme"
}该命令将为我们生成一个
package.json文件：panjie@panjies-Mac-Pro typescript-init % tree
.
├── README.md
└── package.json0 directories, 2 files
安装typescript 接下来，我们使用
npm i typescript --save-dev来安装ts：panjie@panjies-Mac-Pro typescript-init % npm i typescript --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN typescript-init@1.0.0 No description+ typescript@4.6.4
added 1 package from 1 contributor and audited 1 package in 2.22s
found 0 vulnerabilitiestypescript初始化 ts安装后，我们也需要一个初始化操作，该操作将默认生成ts的配置文件，对应的命令为
npx tsc --initpanjie@panjies-Mac-Pro typescript-init % npx tsc --initCreated a new tsconfig.json with:
TS
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: trueYou can learn more at https://aka.ms/tsconfig.json该命令将为我们自动生成
tsconfig.json，如果你想进行一些定制，则只需要打开此文件，找到对应的项进行修改或启用即可。index.ts 基本的初始化工作完成后，便可以创建
index.ts，并进行代码的测试了。'use strict';
const hello = (world: string) => {
console.log(`hello ${world}`);
}hello('world');
编译运行 文件创建完成后进行编译及运行:
panjie@panjies-Mac-Pro typescript-init % npx tsc index.ts
panjie@panjies-Mac-Pro typescript-init % node index.js
hello world自动编译运行 每次变更文件化都手动执行一下编译及运行固然可行，但这种方式的确无法忍受。tsc-watch则专门为此而生，运行
npm install tsc-watch --save-dev来安装tsc-watch：panjie@panjies-Mac-Pro typescript-init % npm install tsc-watch --save-dev
npm WARN typescript-init@1.0.0 No description+ tsc-watch@5.0.3
added 20 packages from 16 contributors and audited 21 packages in 3.788s
found 0 vulnerabilities安装完成后，我们打开
package.json文件，在scripts中增加以下dev项："scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "tsc-watch --noClear -p ./tsconfig.json --onSuccess \"node ./index.js\""
},【如何初始化一个typescript项目】然后我们在命令行中运行
npm run dev则可以实现：当文件变更时重新编译、重新运行的目的。参考文档
- https://www.digitalocean.com/community/tutorials/typescript-new-project
- https://www.npmjs.com/package/tsc-watch
