Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mazeyqian/new-typescript-project
创建一个新的 TypeScript 项目
https://github.com/mazeyqian/new-typescript-project
Last synced: 12 days ago
JSON representation
创建一个新的 TypeScript 项目
- Host: GitHub
- URL: https://github.com/mazeyqian/new-typescript-project
- Owner: mazeyqian
- Created: 2017-03-08T01:14:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T03:07:27.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T02:07:54.457Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 489 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 创建一个新的 TypeScript 项目
## 一、初始化 NPM 项目
```
# npm
npm init
# git
git init
```
## 二、安装 TypeScript
```
npm i typescript --save-dev
# 查看版本
npx tsc --version
```
## 三、初始化配置文件 `tsconfig.json`
```
npx tsc --init
```
## 四、编译 `.ts`
新建 `index.ts` 文件。
项目目录：
```
├── package.json
├── tsconfig.json
└── src
└── index.ts
```
文件 `index.ts`：
```
const ProjectName: string = 'new-typescript-project'
function say (): string {
return `This project is ${ProjectName}.`
}
console.log(say())
```
**编译：**
```
npx tsc src/index.ts
```
**结果：**
```
var ProjectName = 'new-typescript-project';
function say() {
return "This project is " + ProjectName + ".";
}
console.log(say());
```
监听文件变化：
```
npx tsc -w
```
## 五、使用 Webpack 打包
### 5.1 安装 Webpack
```
npm install webpack webpack-cli -D
```
### 5.2 安装 TypeScript 加载器 `ts-loader`
```
npm install ts-loader -D
```
### 5.3 配置 `webpack.config.js`
```
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx']
}
};
```
### 5.4 打包
```
npx webpack --config webpack.config.js
```
## 六、使用 ESLint 规范代码
### 6.1 安装依赖
```
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
### 6.2 新增配置文件 `.eslintrc`
```
# shell
touch .eslintrc
# .eslintrc
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
]
}
```
### 6.3 配置忽略文件 `.eslintignore`
```
# shell
touch .eslintignore
# .eslintignore
node_modules
dist
```
### 6.4 `package.json` 中添加检测脚本
```
"lint": "eslint . --ext .ts"
```
### 6.5 运行检测
```
npm run lint
```
报错：
```
~/new-typescript-project/src/index.ts
1:7 error Type string trivially inferred from a string literal, remove type annotation @typescript-eslint/no-inferrable-types
```
修改相应代码：
```
- const ProjectName: string = 'new-typescript-project'
+ const ProjectName = 'new-typescript-project'
```
再次运行通过！
### 6.6 自动修复不规范的代码
脚本添加 `--fix` 选项：
```
"lint-and-fix": "eslint . --ext .ts --fix"
```
### 6.7 添加更多扩展文件
```
"lint-and-fix": "eslint . --ext 'ts,tsx' --fix"
```
## 附录
案例：[GitHub: new-typescript-project](https://github.com/mazeyqian/new-typescript-project)