如何初始化一个typescript项目

更新日期: 2022-05-05阅读: 2.2k标签: 初始化

本文将展示如何从0开始初始化一个 typescript 项目。

初始化

首先,我们选定一个文件夹,然后在文件夹中执行 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.json

0 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 vulnerabilities

typescript初始化

ts安装后,我们也需要一个初始化操作,该操作将默认生成ts的配置文件,对应的命令为 npx tsc --init

panjie@panjies-Mac-Pro typescript-init % npx tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You 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\""
  },

然后我们在命令行中运行 npm run dev 则可以实现:当文件变更时重新编译、重新运行的目的。

链接: https://fly63.com/article/detial/11441

vue数据初始化--initState

Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。首先,来看一下他的代码:

css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决。

vue组件初始化过程

组件的实例化与vue构造函数的实例化,大部分是类似的,vue的实例可以当做一个根组件,普通组件的实例化可以当做子组件。真实的DOM是一个树形结构,虚拟DOM本质只是真实DOM的抽象,也是一个树形结构

为什么css要初始化?

每次新开发网站或新网页时候我们都需要初始化CSS样式的属性,这是为什么?下面本篇文章就来给大家介绍一下初始化CSS的原因,以及方法,希望对大家有所帮助。

vue3初始化挂载组件流程

本文主要根据vue3源码去理解清楚vue3的组件挂载流程(最后附流程图),根据个人阅读源码去解释,vue的组件是怎么从.vue单文件组件一步步插入到真实DOM中,并渲染到页面上。

字符串数组初始化的小技巧

后续的处理是需要遍历这整个数组去完成某些功能,不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些不方便,比如太长、没有分类等。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!