创建Typescript项目 [天涯的知库]

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== 创建Typescript项目 ======

{{tag>node typescript}}

**1、创建文件夹**

直接创建typescipt文件夹
通过终端创建typescript文件夹
<code | download>
mkdir typescript
cd typescript
</code>

**2、进入typescript文件夹，初始化npm**

<code | download>
npm init
</code>
根据提示回车，这时候文件夹中会生成package.json文件。

===== 配置项目 =====


**3、安装typescript/tslint和NodeJS的类型声明**

<code | download>
npm install --save-dev typescript tslint @types/node
</code>
tslint是代码规则检查工具，保持代码风格一致。这时候文件夹中就会生成node_modules文件夹

**4、配置tsconfig.json**

<code | download>
{
    "compilerOptions": {
        "lib": ["ES2015"],
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true,
        "strict": true,
        "target": "es2015"
    },
    "include": [
        "src"
    ]
}
</code>
可以自己新建并配置，或者使用命令初始化，处于typescript目录下，运行以下命令

<color #ff7f27>''%%./node_modules/.bin/tsc --init%%''</color>

基本配置项目说明：

  * include ts文件在哪个文件夹中
  * lib     运行环境包括哪些api
  * module  ts代码编译成什么模块系统
  * outDir  编译后的js代码存放位置
  * stirct  是否开启严格模式
  * target  ts编译成js的标准
  * ... 有很多配置项具体可以查看其它资料


**5、配置tslint.json**
<code | download>
{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "no-console": false
    },
    "rulesDirectory": []
}
</code>
可以自己新建并配置或者使用命令初始化，处于typescript目录下，运行以下命令

<color #ff7f27>''%%./node_modules/.bin/tslint --init%%''</color>

===== 编写&运行代码 =====


**6、在src目录中创建index.ts文件并输入内容**
<code | download>
mkdir src
touch src/index.ts
</code>

现在整体目录如下
<code | download>
typescript
----node_modules/
----src/
    ----index.ts
----package.json
----tsconfig.json
----tslint.json
index.ts
...
console.log("hello TypeScript")
</code>

**7、编译**

<color #ff7f27>''%%./node_modules/.bin/tsc%%''</color>

这时候文件夹中就会生成 dist/index.js

**8、运行**

<color #ff7f27>''%%node ./dist/index.js%%''</color>

如果中断输出“hello Typescript"那么说明我们第一个typescript项目配置成功

===== 编译错误 =====

**包依赖错误**

Typescript 版本 <color #ff7f27>''%%tsc -v%%''</color>

查看node对当前Typescript版本的依赖  <color #ff7f27>''%%npm dist-tags @types/node%%''</color>

更新@types/node版本：如当前 tsc 为 3.6，对应的 @types/node 版本为 4.2.21\\
运行 <color #ff7f27>''%%npm i @types/node@4.2.21%%''</color>



===== template =====

拉取 template 项目 <color #ff7f27>''%%git clone ssh://git@serverpi:/home/git/repository/npmTemplate.git%%''</color>

删除 .git 目录，参考 [[it:server:git服务器|]] 重新上传一个新的项目
it/node/createtypscriptproject.txt · 最后更改: 2023-08-18 10:01 由 goldentianya
回到顶部