typescript项目

by David Piepgrass

由David Piepgrass

如何设置TypeScript项目 (How to set up a TypeScript project)

适用于使用React制作Web应用程序的初学者的全面指南 (A thorough guide for beginners making web apps with React)

In all my years as a developer, I’ve never encountered a wilderness as overwhelming as The JavaScript World. It’s a world of bewildering complexity, where making a very simple project seems to require installing numerous tools, editing several text files that connect all those tools together, and running a bunch of terminal commands.

在开发人员的所有岁月中，我从未遇到过像JavaScript世界那样令人不知所措的荒野。 这是一个令人困惑的世界，要制作一个非常简单的项目，似乎需要安装大量工具，编辑将所有这些工具连接在一起的几个文本文件，并运行大量终端命令。

There are some tools that try to hide the complexity from you, with varying degrees of success. But as long as those tools don’t have universal adoption, they just seem to me like even more things you have to learn on top of everything else.

有一些工具会尝试向您隐藏复杂性，并取得不同程度的成功。 但是，只要这些工具没有得到普遍采用，就我而言，它们似乎更需要您在其他所有知识上学习更多的东西。

For me, the biggest source of irritation is that most tutorials assume you are already familiar with the ecosystem so they don’t bother to explain the basics. To make this worse, many tutorials try to push a bunch of extra tools on you — like Webpack, Bower, NVM, and Redux — with little explanation.

对我来说，最大的烦恼是大多数教程都以为您已经熟悉了生态系统，因此不必理会这些基础知识。 更糟的是，许多教程试图在您身上引入许多额外的工具，例如Webpack ， Bower ， NVM和Redux ，而没有太多解释。

It’s ironic, because JavaScript itself is already installed on virtually every computer in the world, including phones. Why should writing an app the “professional” way have to be so complex compared to writing an HTML file with some JavaScript code in it?

具有讽刺意味的是，JavaScript本身已经安装在世界上几乎每台计算机(包括电话)上。 与编写带有JavaScript代码HTML文件相比，为什么以“专业”方式编写应用程序必须如此复杂？

If, like me, you have an innate need to understand what is going on and:

如果像我一样，您天生需要了解发生了什么，并且：

• if you can’t stand blindly copying commands into terminals and text files
  如果您不能忍受盲目地将命令复制到终端和文本文件中
• if you want to make sure you need a tool before you install it
  如果要确保在安装之前需要工具
• if you’re wondering why your npm-based project is 50MB before you’ve written your first line of code
  如果您想知道为什么在编写第一行代码之前基于npm的项目为50MB

then welcome! You’ve come to the right place.

然后欢迎您！ 您来对地方了。

On the other hand, if you wanted to start programming in 5 minutes flat, I know a trick for that: skip the introduction here and start reading about Approach A in Section 2. Or if you think I’m giving you too much information, just skip the parts you don’t want to learn about as you go along.

另一方面，如果您想在5分钟内开始编程，那么我知道一个窍门：跳过此处的介绍，开始阅读第2节中的方法A。或者，如果您认为我给您太多信息，只需在进行过程中跳过不想了解的部分即可。

In this tutorial, I will assume you have some programming experience with HTML, CSS and JavaScript, but no experience with TypeScript, React, or Node.js.

在本教程中，我会假设你有HTML，CSS和JavaScript编程的经验，但没有经验的打字稿 ， 作出React ，或Node.js的 。

I’ll give you an overview of the JavaScript ecosystem as I understand it. I’ll explain why I think TypeScript and React (or Preact) are your best bet for making web apps. And I’ll help you start a project without unnecessary extras.

据我了解，我将为您提供JavaScript生态系统的概述。 我将解释为什么我认为TypeScript和React(或Preact )是制作Web应用程序的最佳选择。 而且，我会帮助您启动项目而没有多余的额外费用。

In section 2, we will discuss how and why to add extras to your project, if you decide you want them.

在第2节中，我们将讨论如果需要的话 ，如何以及为什么向项目中添加额外功能。

目录 (Table of Contents)

Section 1: Overview of the JavaScript ecosystem

第1节：JavaScript生态系统概述

Section 2: Actually Setting Up the Project

第2节：实际设置项目

• Common Steps

  常见步骤

• Approach A: The Easy Way

  方法A：简便方法

• Other approaches

  其他方法

• Approach B: The Way of Fewest Tools

  方法B：最省力的工具

• Approach C: The Webpack Way

  方法C：Webpack方式

• Summary

  摘要

第1节：JavaScript生态系统概述 (Section 1: Overview of the JavaScript ecosystem)

For many programming languages, there’s a certain way of doing things that everybody knows about.

对于许多编程语言，有一种特定的做事方式，每个人都知道。

For example, if you want to make a C# app, you install Visual Studio, create a Windows Forms project with a few mouse clicks, click the green “play” button to run your new program, and then start writing code for it. The package manager (NuGet) is built-in and the debugger Just Works. Sure, it might take a few hours to install the IDE, and WPF is about as fun as banging your head against a brick wall, but at least getting started is easy. (Except if you’re not using Windows, then it’s totally different, but I digress.)

例如，如果要制作C＃应用程序，则安装Visual Studio ，单击几次鼠标创建Windows Forms项目，单击绿色的“播放”按钮运行新程序，然后开始为其编写代码。 包管理器( NuGet )是内置的，调试器Just Works。 当然，安装IDE可能要花费几个小时，而WPF就像将头撞在砖墙上一样有趣，但是至少起步很容易。 (除非您不使用Windows，否则完全不同，但是我离题了。)

In JavaScript, on the other hand, there are so many competing libraries and tools for almost every aspect of the development process. This barrage of tools can become overwhelming before you write your first line of code! When you go Googling “how to write a web app”, every web site you visit seems to give different advice.

另一方面，在JavaScript中，几乎所有开发过程的各个方面都有如此多的竞争库和工具。 在编写第一行代码之前，这些工具可能会变得势不可挡！ 当您谷歌搜索“如何编写Web应用程序”时，您访问的每个网站似乎都会给出不同的建议。

The one thing most people seem to agree on is using the Node Package Manager (NPM) for downloading JavaScript libraries (both server-side and browser-only). But even here, some people are using Yarn, which is npm-compatible, or possibly Bower.

大多数人似乎都同意的一件事是使用Node Package Manager( NPM )下载JavaScript库(服务器端和仅浏览器端)。 但是即使在这里，也有人使用了npm兼容的Yarn或Bower。

NPM is bundled with Node.js, a web server you control entirely with JavaScript code. NPM is tightly integrated with Node. For example, the npm start command runs node server.js by default.

NPM与Node.js捆绑在一起，Node.js是一个完全由JavaScript代码控制的Web服务器。 NPM与Node紧密集成。 例如， npm start命令默认运行node server.js 。

Even if you were planning to use a different web server (or to use no web server and just double-click an HTML file), everybody seems to assume you’ll have Node.js installed. So you may as well go ahead and install node.js which gives you npm as a side-effect.

即使你计划使用不同的Web服务器(或不使用web服务器和只需双击一个HTML文件)，每个人似乎都认为你必须安装Node.js的。 因此，您最好继续安装node.js ，这会给您带来npm的副作用。

Node.js isn’t just a web server — it can also run command-line apps written in JavaScript. In that sense, the TypeScript compiler is a Node.js app!

Node.js不仅是Web服务器，它还可以运行以JavaScript编写的命令行应用程序。 从这个意义上讲，TypeScript编译器是一个Node.js应用程序！

Beyond NPM you have several choices:

除了NPM，您还有以下几种选择：

您想要哪种JavaScript？ (Which flavor of JavaScript do you want?)

The official name of JavaScript is actually ECMAScript, and the most widely-deployed version is ECMAScript 6 or ES6 for short. Old browsers, notably Internet Explorer, support only ES5.

JavaScript的正式名称实际上是ECMAScript，而使用最广泛的版本是ECMAScript 6或ES6。 旧的浏览器(尤其是Internet Explorer)仅支持ES5。

ES6 adds lots of useful and important new features such as modules, let, const, arrow functions (or lambda functions), classes, and destructuring assignment.

ES6添加了许多有用和重要的新功能，例如模块，let，const，箭头函数(或lambda函数)，类和解构分配。

ES7 adds a few more features, most notably something called async/await.

ES7增加了一些功能，其中最著名的是async / await。

If you don’t need to support old browsers and your code isn’t very large, running your code directly in the browser is an attractive option, because you don’t have to “compile” your JavaScript before opening it in the browser.

如果您不需要支持旧的浏览器并且代码不是很大，那么直接在浏览器中运行代码将是一个不错的选择，因为您不必在浏览器中打开JavaScript之前就对其进行“编译”。

But there are many reasons to use a compile step:

但是使用编译步骤有很多原因：

• If you need to support old browsers, you’ll want a “transpiler” so you can use new features of JavaScript in old browsers. A transpiler is a compiler whose output code is a high-level language, in this case JavaScript. I would guess the most popular transpiler is Babel, with TypeScript in second place.

  如果需要支持旧的浏览器，则需要一个“编译器”，以便可以在旧的浏览器中使用JavaScript的新功能。 编译器是编译器，其输出代码是高级语言，在这种情况下为JavaScript。 我猜最流行的翻译器是Babel ，而TypeScript位居第二。

• If you want to use the popular React framework (but without TypeScript), you’ll probably be writing “JSX” code — fragments of XML inside JavaScript code. JSX is not supported by browsers and so requires a preprocessor (typically Babel).
  如果要使用流行的React框架(但没有TypeScript)，则可能要编写“ JSX”代码-JavaScript代码中的XML片段。 浏览器不支持JSX，因此需要预处理器(通常是Babel)。

• If you want to “minify” your code so it uses less bandwidth (or is obfuscated), you’ll need a “minifier” preprocessor. Popular minifiers include UglifyJS, JSMin, and the Closure Compiler.

  如果要“最小化”代码以使它使用较少的带宽(或被混淆)，则需要“最小化”预处理器。 流行的缩小器包括UglifyJS，JSMin和Closure Compiler。

• If you want type checking or high-quality code completion (also known as IntelliSense), you’ll want to use TypeScript, a superset of JavaScript (meaning every JavaScript file is also a TypeScript file… ostensibly). TypeScript supports both ES7 features and JSX, and its output is ES5 or ES6 code. When TypeScript and JSX code are used together, the file extension must be .tsx. Some people are using a different language, similar in concept to TypeScript, called Flow.

  如果您要进行类型检查或高质量代码完成(也称为IntelliSense)，则需要使用TypeScript，它是JavaScript的超集(表面上意味着每个JavaScript文件也是TypeScript文件)。 TypeScript同时支持ES7功能和JSX，其输出为ES5或ES6代码。 当TypeScript和JSX代码一起使用时，文件扩展名必须为.tsx 。 有些人使用的概念与TypeScript类似的另一种语言称为Flow。

• If you don’t like JavaScript, you could try a totally different language that transpiles to JavaScript, such as Elm, ClojureScript, or Dart.
  如果您不喜欢JavaScript，则可以尝试使用完全不同的语言转换为JavaScript，例如Elm，ClojureScript或Dart。

Luckily it’s possible to automate compiling so that your code is recompiled whenever you save a file.

幸运的是，可以自动进行编译，以便在保存文件时重新编译代码。

This tutorial uses TypeScript, a superset of JavaScript with a comprehensive type system. The benefits of TypeScript are that:

本教程使用TypeScript，它是具有全面类型系统JavaScript的超集。 TypeScript的优点是：

1. You get compiler error messages when you make type-related mistakes (instead of discovering mistakes indirectly when your program misbehaves). In IDEs such as Visual Studio Code your mistakes are underlined in red.
   当您犯与类型相关的错误时(而不是在程序行为异常时间接发现错误)，您会收到编译器错误消息。 在诸如Visual Studio Code的IDE中，您的错误用红色下划线标出。

2. You can get refactoring features. For example, in Visual Studio Code, press F2 to rename a function or variable across multiple files, without affecting other things that have the same name.

   您可以获得重构功能。 例如，在Visual Studio Code中，按F2键可在多个文件中重命名函数或变量，而不会影响具有相同名称的其他内容。

3. Types allow IDEs to provide code-completion popups, also known as IntelliSense, which makes programming much easier because you don’t have to memorize all the names and expected arguments of the functions you call:
   类型使IDE可以提供代码完成弹出窗口，也称为IntelliSense，这使编程更加容易，因为您不必记住调用函数的所有名称和期望的参数：

Tip: To play with TypeScript without installing anything, visit its playground.

提示 ：要在不安装任何内容的情况下使用TypeScript进行播放， 请访问其游乐场 。

客户端与服务器 (Client versus server)

Your can run code in a client (front-end browser), a server (Node.js back-end), or both. The client is not under your control. The user might use Firefox, Chrome, Safari, Opera, Edge, or in the worst case, Internet Explorer.

您可以在客户端(前端浏览器)，服务器(Node.js后端)或两者中运行代码。 客户不在您的控制之下。 用户可能使用Firefox，Chrome，Safari，Opera，Edge，或者在最坏的情况下使用Internet Explorer。

For security reasons, keep in mind that the user can modify a browser’s behavior using browser extensions or the F12 developer tools. You can’t even be sure that your code is running in a real browser.

出于安全原因，请记住，用户可以使用浏览器扩展或F12开发人员工具来修改浏览器的行为。 您甚至无法确定您的代码是否在真实的浏览器中运行。

Developers used to rely on the jQuery library to get consistent behavior in different browsers, but these days you can rely on different browsers to behave the same way in most cases (except perhaps Internet Explorer).

开发人员曾经依靠jQuery库在不同的浏览器中获得一致的行为，但是如今，您可以在大多数情况下依靠不同的浏览器以相同的方式运行(也许Internet Explorer除外)。

In this tutorial, we’ll run all the important code in the browser, but we’ll also set up a simple Node.js server to serve the app to the browser. Many other servers are available, such as Apache, IIS, or a static server like Jekyll.

在本教程中，我们将在浏览器中运行所有重要的代码，但是我们还将设置一个简单的Node.js服务器，以将应用程序提供给浏览器。 还有许多其他服务器可用，例如Apache ， IIS或静态服务器(例如Jekyll) 。

But Node.js has become a sort of standard, likely because Node.js and NPM are bundled together.

但是Node.js成为一种标准，可能是因为Node.js和NPM捆绑在一起。

用户界面框架 (User Interface frameworks)

HTML and CSS alone are great for plain-old articles with images, or simple forms. If that’s all you’re doing, there’s probably no need for JavaScript at all. CSS can even do some things that once required JavaScript, such as pull-down menus, pages that completely reformat themselves for small/mobile browsers or printing, and animations.

仅HTML和CSS非常适合带有图像或简单形式的普通文章。 如果这就是您要做的一切，那么可能根本不需要JavaScript。 CSS甚至可以执行某些曾经需要JavaScript的操作，例如下拉菜单 ， 完全针对小型/移动浏览器或打印重新格式化的页面以及动画 。

If you need something more complex than that, or if your pages are generated dynamically from raw data, you’ll probably want to use JavaScript with an optional user-interface library or framework. I’ll show you later how to use React, which has earned a position as the most popular UI framework, and its little cousin Preact.

如果您需要比这更复杂的内容，或者从原始数据动态生成页面，则可能需要将JavaScript与可选的用户界面库或框架一起使用。 稍后我将向您展示如何使用React，React已经赢得了最受欢迎的UI框架的地位，并且它的表弟Preact也是如此。

The “large” popular alternatives include Angular 2 and Vue.js, while the “small” ones include D3, Mithril and an old classic called jQuery.

流行的“大” 替代品包括Angular 2和Vue.js ，而“小”的替代品包括D3 ， Mithril和一个古老的经典jQuery。

If your web server runs JavaScript (Node.js), you can run React on the server to pre-generate the initial appearance of the page.

如果您的Web服务器运行JavaScript(Node.js)，则可以在服务器上运行React以预先生成页面的初始外观。

构建工具 (Build tools)

Several tools for “building” and “packaging” your code are available — Webpack, Grunt, Browserify, Gulp, Parcel — but all these things are optional. I’ll show you how make do with just npm and, if you want, Parcel or Webpack.

一些为“建设”和“包装”你的代码的工具可供选择-的WebPack， 咕噜 ， Browserify ， 咕嘟咕嘟 ， 包裹 -但所有这些东西都是可选的。 我将向您展示如何仅使用npm以及如果需要的话使用Parcel或Webpack。

CSS风味 (CSS Flavors)

In this article we’ll use plain CSS. If you’re going to have a compile step anyway, you might want to try SCSS, an “improved” derivative of CSS with extra features. Or you could use SASS, which is conceptually identical to SCSS but has a more concise syntax.

在本文中，我们将使用普通CSS。 如果仍然要执行编译步骤，则可能需要尝试SCSS，它是CSS的“改进”衍生物，具有更多功能。 或者，您可以使用SASS，它在概念上与SCSS相同，但是语法更简洁。

Either way you’ll need the Sass preprocessor. And as always in the JavaScript World, there are a bunch of alternatives, notably LESS.

无论哪种方式，您都需要Sass预处理程序 。 与JavaScript世界一样，有很多替代方法 ，尤其是LESS 。

单元测试 (Unit testing)

The popular unit testing libraries are Mocha, Jasmine and Jest. See here for more. NPM has a special command for testing, npm test (which is short for npm run test).

流行的单元测试库是Mocha ， Jasmine和Jest 。 看到这里更多 。 NPM有一个特殊的测试命令， npm test (它是npm run test缩写)。

其他图书馆 (Other libraries)

Besides Redux, other popular JavaScript libraries include Lodash, Ramda, Underscore, and GraphQL.

除了终极版， 其他流行JavaScript库包括Lodash ， Ramda ， 下划线和GraphQL 。

The most popular linting utility is ESLint.

最受欢迎的linting实用程序是ESLint 。

Bootstrap is a popular CSS library but it requires a JavaScript part (and it’s really SASS, not CSS).

Bootstrap是一个流行CSS库，但是它需要一个JavaScript部分(它实际上是SASS，而不是CSS)。

When you see $ in JavaScript code, it typically refers to jQuery. When you see _ it typically refers to either Lodash or Underscore.

当您在JavaScript代码中看到$时，通常指的是jQuery。 当您看到_ ，通常指的是Lodash或Underscore。

And perhaps it’s worth mentioning popular templating libraries: Jade, Pug, Mustache and Handlebars.

也许值得一提的是流行的模板库： Jade ， Pug ， Mustache和Handlebars 。

非网络应用 (Non-web apps)

I won’t say anything more about this, but TypeScript and JavaScript can be used outside the web.

我不再赘述，但是TypeScript和JavaScript可以在网络之外使用。

With Electron you can write cross-platform desktop apps. With React Native you can write JavaScript apps for Android/iOS devices that have a “native” user interface. You can also write command-line apps with Node.js.

使用Electron，您可以编写跨平台的桌面应用程序。 使用React Native，您可以为具有“本机”用户界面的Android / iOS设备编写JavaScript应用程序。 您还可以使用Node.js编写命令行应用程序 。

模块类型 (Module types)

For the longest time, all JavaScript code ran in a single global namespace. This caused conflicts between unrelated code libraries, so various kinds of “module definitions” were invented to simulate what other languages call packages or modules.

在最长的时间内，所有JavaScript代码都在单个全局名称空间中运行。 这导致了不相关的代码库之间的冲突，因此发明了各种“模块定义”来模拟其他语言称为包或模块的内容。

Node.js uses CommonJS modules, which involves a magic function called require('module-name') to import modules and a magic variable called module.exports to create modules. To write modules that work in both browsers and Node.js, one can use Universal Module Definition (UMD modules). Modules that can be asynchronously loaded use AMD.

Node.js使用CommonJS模块，该模块包含一个名为require('module-name')的魔术函数来导入模块，以及一个名为module.exports的魔术变量来创建模块。 要编写可在浏览器和Node.js中使用的模块，可以使用通用模块定义( UMD模块)。 可以异步加载的模块使用AMD 。

ES6 introduced a module system involving import and export keywords, but Node.js and some browsers still don’t support it. Here’s a primer on the various module types.

ES6引入了涉及import和export关键字的模块系统，但是Node.js和某些浏览器仍然不支持它。 这是各种模块类型的入门 。

Polyfills和原型 (Polyfills & Prototypes)

As an experienced developer, I can think of only two words (other than the names of libraries and tools) that are used only in JavaScript Land: polyfill and prototype.

作为一名经验丰富的开发人员，我只能想到仅在JavaScript Land中使用的两个词(库和工具的名称除外)： polyfill和prototype 。

Polyfills are backward-compatibility helpers. They are pieces of code written in JavaScript that allow you to use new features in old browsers. For example, the expression "food".startsWith('F') tests whether the String 'food' starts with F (for the record, that’s false - it starts with f, not F.) But startsWith is a new feature of JavaScript that is not available in older browsers.

Polyfill是向后兼容性的帮手。 它们是用JavaScript编写的代码段，可让您在旧的浏览器中使用新功能。 例如，表达式"food".startsWith('F')测试字符串'food'是否以F开头(对于记录而言，这是false -它以f开头，而不是F开头。) startsWith是JavaScript的新功能在较旧的浏览器中不可用。

You can “polyfill it” with this code:

您可以使用以下代码“填充”它：

String.prototype.startsWith = String.prototype.startsWith ||  function(search, pos) {    return search ===       this.substr(!pos || pos < 0 ? 0 : +pos, search.length);  };

This code has the form X = X || function(...) {...}, which means “if X is defined, set X to itself (don’t change it), otherwise set X to be this function.” The function shown here behaves the way startsWith is supposed to.

此代码的形式为X = X || function(...) {...} X = X || function(...) {...} ，这意味着“如果定义了X，则将X设置为自身(不要更改)，否则将X设置为该函数。” 此处显示的功能按照startsWith的预期方式运行。

This code refers to one of the other unique things about JavaScript, the idea of prototypes. Prototypes correspond roughly to classes in other languages, so what this code is doing is actually changing the definition of the built-in String data type. Afterward when you write 'string'.startsWith() it will call this polyfill (if String.prototype.startsWith was not already defined). There are various articles out there to teach you about prototypes and prototypical inheritance, like this one.

这段代码引用了JavaScript的其他独特特征之一，即原型概念。 原型大致对应于其他语言的类，因此该代码实际上是在更改内置String数据类型的定义。 之后，当您编写'string'.startsWith() ，它将调用此polyfill(如果尚未定义String.prototype.startsWith )。 那里有很多文章可以教您有关原型和原型继承的知识，例如这篇文章 。

Even some advanced browser features have polyfills. Have you heard of WebAssembly, which lets you run C and C++ code in a browser? There’s a JavaScript polyfill for it!

甚至某些高级浏览器功能都具有polyfill。 您是否听说过WebAssembly ，它使您可以在浏览器中运行C和C ++代码？ 有一个JavaScript polyfill ！

信用 (Credit)

I’d like to thank the State of Javascript survey and State of JavaScript frameworks for much of the information above! For a few items I used npm-stat to measure popularity. See also this other new survey.

我要感谢Java状况调查和JavaScript框架状况 ，以获取上面的许多信息！ 对于一些项目，我使用了npm-stat来衡量受欢迎程度。 另请参阅此其他新调查 。

第2节：实际设置项目 (Section 2: Actually Setting Up the Project)

Hey there! Still awake? Now we will go on a tour of the JavaScript tools ecosystem. This part is not about React (we’ll get to that later) but it includes a simple React component.

嘿！ 还醒着？ 现在，我们将浏览JavaScript工具生态系统。 这部分不是关于React的(我们将在后面介绍 )，而是包括一个简单的React组件。

This is somewhat of a grand tour, so we’ll talk about writing your app in three different ways (with a summary afterward):

这有点盛大巡演，所以我们将讨论三种不同的方式(用写你的应用程序汇总后)：

• A. The Easiest Way (with Parcel)
  A.最简单的方法(使用包裹)
• B. The Way of Fewest Tools (or the do-it-yourself way)
  B.最少工具的方式(或自己动手的方式)
• C. The Webpack way
  C. Webpack方式

The first six steps are the same in all three approaches, so let’s get started!

三种方法的前六个步骤都相同，因此让我们开始吧！

步骤1：安装Node.js / npm (Step 1: Install Node.js/npm)

If you haven’t yet, go install Node.js which will also install the command-line package manager, npm.

如果尚未安装 ，请安装Node.js ，它还将安装命令行软件包管理器npm 。

If you want to deploy your app on some other web server, I recommend worrying about how to do that later.

如果要在其他Web服务器上部署应用程序，建议以后再考虑这样做。

步骤2：安装Visual Studio代码或其他编辑器 (Step 2: Install Visual Studio Code or other editor)

One of the main reasons to use TypeScript instead of JavaScript is that it supports code completion features.

使用TypeScript代替JavaScript的主要原因之一是它支持代码完成功能。

To enjoy this benefit, you’ll need to edit your TypeScript .ts files in a compatible editor such as Visual Studio Code — which is free and multi-platform. It’s also the most popular text editor for JavaScript apps. Alternatives include Atom and Sublime Text.

要享受此好处，您需要在兼容的编辑器(例如Visual Studio Code)中编辑TypeScript .ts文件，该编辑器是免费的且跨平台的。 它也是JavaScript应用程序中最受欢迎的文本编辑器。 备选方案包括Atom和Sublime Text 。

Visual Studio Code (VS Code) is folder-oriented: you open a folder in VS Code and that folder will be treated like the current “project”. During installation (on Windows, anyway) it will offer a checkbox to add an “Open with Code” action for folders (directories). I recommend using that option as an easy way to start VS Code from any folder:

Visual Studio Code(VS Code)是面向文件夹的：在VS Code中打开一个文件夹，该文件夹将被视为当前的“项目”。 在安装过程中(无论如何在Windows上)，它将提供一个复选框来为文件夹(目录)添加“使用代码打开”操作。 我建议使用该选项作为从任何文件夹启动VS Code的简便方法：

Create an empty folder for your app, then open that folder in VS Code. Notice that VS Code has a built-in terminal so you won’t need a separate terminal window.

为您的应用创建一个空文件夹，然后在VS Code中打开该文件夹。 请注意，VS Code具有内置终端，因此您不需要单独的终端窗口。

步骤3：设定package.json (Step 3: Set up package.json)

The package.json file will represent your project configuration. This includes its name, build commands, the list of npm modules used by your project, and more.

package.json文件将代表您的项目配置。 这包括其名称，构建命令，项目使用的npm模块列表等等。

If you haven’t done so yet, create an empty folder for your app and open a terminal window in that folder.

如果尚未这样做，请为您的应用创建一个空文件夹，然后在该文件夹中打开一个终端窗口。

In the terminal, run npm init.

在终端中，运行npm init 。

npm init will ask you some questions in order to produce package.json. Leave a field blank to accept the default suggestion.

npm init会问您一些问题以便产生package.json 。 将字段留空以接受默认建议。

I wanted to make a small educational app to draw some graphs demonstrating how climate science explains the 20th century temperature record.

我想制作一个小型的教育应用程序来绘制一些图表，以展示气候科学如何解释20世纪的温度记录。

So I called my app climate-app:

因此，我将我的应用程序称为climate-app ：

C:\Dev\climate-app>npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.[....]

package name: (climate-app)version: (1.0.0)description: Demo to visualize climate dataentry point: (index.js) test command:git repository:keywords:author: David Piepgrasslicense: (ISC) MIT

About to write to C:\Dev\climate-app\package.json:{  "name": "climate-app",  "version": "1.0.0",  "description": "Demo to visualize climate data",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "David Piepgrass",  "license": "MIT"}

Is this ok? (yes)

Notice the reference to index.js. Oddly, this file does not need to exist and we won’t be using it. It is used only if you share your code via npm.

注意对index.js的引用。 奇怪的是，此文件不需要存在，我们将不使用它。 仅当您通过npm共享代码时才使用它。

步骤4：安装打字稿 (Step 4: Install Typescript)

VS Code reportedly has TypeScript “language support” rather than a TypeScript compiler, so now we need to install the compiler.

据报道， VS Code具有TypeScript“语言支持”而不是TypeScript 编译器 ，因此现在我们需要安装编译器。

There are two ways to install TypeScript with npm. Either use

使用npm安装TypeScript有两种方法。 无论使用

npm install --global typescript

or

要么

npm install --save-dev typescript

If you use the --global option, then the TypeScript compiler tsc will be available in all projects on the same machine. It will also be available as a terminal command, but it will not be added to your package.json file. Therefore, if you share your code with others, TypeScript will not be installed when another person gets your code and runs npm install.

如果使用--global选项，则TypeScript编译器tsc将在同一计算机上的所有项目中可用。 它也可以作为终端命令使用，但不会添加到package.json文件中。 因此，如果您与他人共享代码，则当其他人获取您的代码并运行npm install时，将不会安装TypeScript。

If you use --save-dev, TypeScript will be added to package.json and installed in your project’s node_modules folder (current size: 34.2 MB), but it will not be available directly as a terminal command.

如果使用--save-dev ，则会将TypeScript添加到package.json并将其安装在项目的node_modules文件夹中(当前大小：34.2 MB)，但不能直接用作终端命令。

You can still run it from the terminal as ./node_modules/.bin/tsc, and you can still use tsc inside the npm "scripts" section of package.json.

您仍然可以从终端以./node_modules/.bin/tsc运行它，并且仍然可以在package.json的npm "scripts"部分中使用tsc 。

Fun fact: the TypeScript compiler is multiplatform because it is written in TypeScript — and compiled to JavaScript.

有趣的事实 ：TypeScript编译器是多平台的，因为它是用TypeScript编写的，并已编译为JavaScript。

步骤5：安装React或Preact (Step 5: Install React or Preact)

To add React to your project:

要将React添加到您的项目中：

npm install react react-domnpm install --save-dev @types/react @types/react-dom

Note: --save-dev marks things as “used for development” while --save (which is the default, and therefore optional) means “used by the program when it is deployed”.

注意：-- --save-dev事物标记为“用于开发”，而--save (这是默认值，因此是可选的)表示“已在程序部署时使用”。

@types packages provide type information to TypeScript, but they are not used when your code is running/deployed.

@types包向TypeScript提供类型信息，但是在运行/部署代码时不使用它们。

If you forget --save-dev or if you use it on the wrong package, your project will still work. The distinction is only important if you share your project as an npm package.

如果您忘记了--save-dev或在错误的软件包上使用了它，则您的项目仍将正常运行 。 仅当您以npm软件包共享项目时，区别才重要。

Alternately you can use Preact, which is almost the same as React but more than 10 times smaller. Preact has TypeScript type definitions built-in, so you only need a single command to install it:

或者，您可以使用Preact，它与 React 几乎相同 ，但小10倍以上。 Preact具有内置的TypeScript类型定义，因此您只需一个命令即可安装它：

npm install preact

Tip: npm i is a shortcut for npm install, and -D is a short for --save-dev.

提示： npm i是npm install的快捷方式， -D是--save-dev的缩写。

Note: do not to install preact and @types/react in the same project, or tsc will go insane and give you about 150 errors (see preact issue #639). If this happens, uninstall the React types with npm uninstall @types/react @types/react-dom

注意：请勿在同一项目中安装preact和@types/react ，否则tsc会发疯，并给您约150个错误(请参阅preact问题＃639 )。 如果发生这种情况，请使用npm uninstall @types/react @types/react-dom React类型， npm uninstall @types/react @types/react-dom

步骤6：编写一些React代码 (Step 6: Write some React code)

Make a file called app.tsx with this small React program:

使用以下小型React程序app.tsx一个名为app.tsx的文件：

Note: in order for the embedded JSX (HTML/XML) to work, the file extension must be tsx, not ts.

注意：为了使嵌入式JSX(HTML / XML)正常工作，文件扩展名必须为tsx ，而不是ts 。

If you have any trouble making your code work, try this code instead — it’s the simplest possible React program:

如果您在使代码正常工作时遇到任何麻烦，请尝试以下代码-这是最简单的React程序：

import * as ReactDOM from 'react-dom';import * as React from 'react';

ReactDOM.render(React.createElement("h2", null, "Hello, world!"),                document.body);

We’ll discuss how the code works later. For now, let’s focus on making it run.

稍后我们将讨论代码的工作方式。 现在，让我们集中精力使其运行。

If you’re using Preact, change the first two lines like so:

如果您使用的是Preact，请像这样更改前两行：

import * as React from 'preact';import * as ReactDOM from 'preact';

Some notes about Preact:

有关Preact的一些注意事项：

• There is a preact-compat library which allows you to use preact with zero changes to your React code. Usage instructions exist for users of Webpack/Browserify/Babel/Brunch, and this page shows how to use preact-compat with Parcel.

  有一个preact-compat库 ，该库使您可以在React代码零更改的情况下使用preact。 针对Webpack / Browserify / Babel / Brunch的用户提供了使用说明，并且此页面显示了如何将Preact-compat与Parcel结合使用。

• There are rumors that in Preact you should write /** @jsx h */ at the top of the file, which tells TypeScript to call h() instead of the default React.createElement. In this case you must not do that or you’ll get a error in your browser that h is not defined (React.h, however, is defined). In fact Preact defines createElement as an alias for h, and since our import statement assigns 'preact' to React, React.createElement exists and works just fine.

  有传言说，在Preact中，您应该在文件顶部写/** @jsx h */ ，这告诉TypeScript调用h()而不是默认的React.createElement 。 在这种情况下，您一定不要这样做，否则会在浏览器中得到一个错误，该错误未定义h (但是已定义React.h )。 实际上，Preact将createElement定义为h的别名，并且由于我们的import语句将'preact' React.createElement 'preact'分配给React ，因此React.createElement存在并且可以正常工作。

可选：运行TypeScript脚本 (Optional: running TypeScript scripts)

This tutorial is focused on making web pages that run TypeScript code. If you would like to run a TypeScript file directly from the command prompt, the easiest way is to use ts-node:

本教程的重点是制作运行TypeScript代码的网页 。 如果您想直接在命令提示符下运行TypeScript文件，最简单的方法是使用ts-node ：

npm install --global ts-node

After installing ts-node, run ts-node X.ts where X.ts is the name of a script you want to run. In the script you can call console.log("Hello") to write text to the terminal (reading text from a user is more complicated). On Linux systems you can put a “shebang” at the top of the script if you would like to be able to run ./X.ts directly (without mentioning ts-node):

安装ts-node ，运行ts-node X.ts ，其中X.ts是要运行的脚本的名称。 在脚本中，您可以调用console.log("Hello")将文本写入终端(从用户读取文本更加复杂 )。 在Linux系统上，如果您希望能够直接运行./X.ts (无需提及ts-node )，则可以在脚本的顶部放置一个“ shebang”：

#!/usr/bin/env ts-node

Note: if you don’t need to run .ts files from a terminal then you don’t need to install ts-node.

注意：如果您不需要从终端运行.ts文件，则无需安装ts-node 。

运行项目，方法A：简单方法 (Running your project, Approach A: The Easy Way)

I discovered Parcel when I was mostly done writing this article. Honestly, if I knew about Parcel from the beginning I might not have bothered writing about the other approaches. Don’t get me started on how easy Parcel is! It deserves a medal!

当我写完这篇文章的大部分时间后，我就发现了Parcel。 老实说，如果我从一开始就了解Parcel，那么我可能就不会为其他方法而烦恼。 不要让我开始了解Parcel的难易程度！ 它值得一枚勋章！

It’s very large, though (81.9 MB), so you should install it as a global:

不过，它非常大(81.9 MB)，因此您应该将其安装为全局文件：

npm install --global parcel-bundler

The truth is I’ve been lying to you. Parcel is so easy, you don’t even need all six steps above! You only really need Steps 1, 2 and 6 (install Node, install an editor, and write some code) because Parcel will do steps 3, 4, and 5 for you automatically.

事实是我一直在骗你。 包裹非常简单，您甚至不需要上面的所有六个步骤！ 您实际上只需要步骤1、2和6(安装Node，安装编辑器并编写一些代码)，因为Parcel会自动为您执行步骤3、4和5。

So all we have to do now is to create an index.html file that refers to our app.tsx file, like this:

因此，我们现在要做的就是创建一个引用我们app.tsx文件的index.html文件，如下所示：

Then, simply open a terminal in the same folder and run the command parcel index.html.

然后，只需在同一文件夹中打开终端并运行命令parcel index.html 。

This can’t run directly in a browser, of course, so Parcel:

当然，这不能直接在浏览器中运行，因此，Parcel：

1. Automatically compiles app.tsx

   自动编译app.tsx

2. Installs React or Preact if it wasn’t already installed, because it notices that you’re using it
   如果尚未安装React或Preact，则安装它，因为它会注意到您正在使用它

3. Bundles your app with its dependencies into a single file called app.dd451710.js (or some other funny name)

   将您的应用及其依赖项捆绑到一个名为app.dd451710.js (或其他有趣名称)的文件中

4. Creates a modified index.html that refers to the compiled and bundled app

   创建一个修改后的index.html ，引用已编译和捆绑的应用程序

5. Puts these new files in a folder called dist.

   将这些新文件放在名为dist的文件夹中。

And then it does everything else for you:

然后，它为您完成其他所有操作：

1. It runs your app on a mini web server at http://127.0.0.1:1234 — viewable on a web browser on the same machine

   它可以在位于http://127.0.0.1:1234的小型Web服务器上运行您的应用程序-在同一台计算机上的Web浏览器中可以查看

2. It watches for changes to your code (app.tsx and index.html) and recompiles when you change them

   它app.tsx代码( app.tsx和index.html )的更改，并在更改它们时重新编译

3. As if that wasn’t enough, when your files change, it will send a command to your web browser to automatically refresh!

   似乎还不够，当文件更改时，它将向网络浏览器发送命令以自动刷新！

4. Even better, it updates the page without fully reloading it using its Hot Module Replacement feature

   更妙的是，它使用其“ 热模块更换”功能更新页面而无需完全重新加载页面

It can be challenging to set up a conventional build that does all of these things. This tutorial only covers how to do #1 and #2 in a conventional build, with only code recompilation (not HTML).

设置执行所有这些操作的常规构建可能会很困难。 本教程仅介绍如何在常规构建中执行＃1和＃2，而仅重新编译代码(而不是HTML)。

To learn about more features of Parcel, have a look at the Parcel documentation.

要了解Parcel的更多功能，请查看Parcel文档 。

One limitation of Parcel is that it doesn’t perform type checking (your code is translated to JavaScript, but type errors are not detected).

Parcel的一个限制是它不执行类型检查(您的代码已转换为JavaScript，但未检测到类型错误)。

For small projects, this is not a big problem because Visual Studio Code performs its own type checking. It gives you red squiggly underlines to indicate errors and all errors are listed in the “Problems” pane (press Ctrl+Shift+M to show it). But if you want, you can npm install parcel-plugin-typescript for enhanced TypeScript support including type checking (not currently working for me).

对于小型项目，这不是一个大问题，因为Visual Studio Code会执行自己的类型检查。 它为您提供了红色弯曲的下划线，指示错误，并且所有错误均在“问题”窗格中列出(按Ctrl + Shift + M进行显示)。 但是，如果需要，您可以npm install parcel-plugin-typescript以获得增强的TypeScript支持，包括类型检查( 当前不适用于我 )。

其他方法 (Other approaches)

The other approaches are more well-known and are standard practice in the JavaScript community. We will be creating a folder with the following files inside:

其他方法是众所周知的，并且是JavaScript社区中的标准实践。 我们将创建一个包含以下文件的文件夹：

• app/index.html

  app/ index.html

• app/app.tsx

  app/ app.tsx

• package.json

  package.json

• tsconfig.json

  tsconfig.json

• server.js

  server.js

• webpack.config.js (optional)

  webpack.config.js (可选)

As a matter of communicating to other people who look at your code later, it is useful to separate your program’s front-end code from its build configuration and app server.

在以后与其他查看您代码的人进行交流时，将程序的前端代码与其构建配置和应用服务器分开是很有用的。

The root folder of a project tends to become cluttered with extra files over time (such as .gitignore if you use git, README and LICENSE files, appveyor/travis files if you use continuous integration.) Therefore, we should separate the code of our front-end into a different folder.

随着时间的推移，项目的根文件夹往往会被多余的文件appveyor (例如，如果您使用git的则为.gitignore ，如果使用持续集成的 appveyor README和LICENSE ；如果使用持续集成 ， appveyor / travis文件。)因此，我们应该分离代码前端放入另一个文件夹。

In addition to the files we create, TypeScript will compile app.tsx into app.js and app.js.map, while npm creates a folder called node_modules and a file called package-lock.json . I can’t imagine why it’s called “lock”, but this page explains why it exists.

除了我们创建的文件外，TypeScript还将app.tsx编译为app.js和app.js.map ，而npm创建一个名为node_modules的文件夹和一个名为package-lock.json的文件。 我无法想象为什么将其称为“锁定”，但是此页面说明了其存在的原因 。

So please begin by creating an app folder and putting your app.tsx there.

因此，请先创建一个app文件夹，然后将app.tsx此处。

运行您的项目，方法B：最少工具的方式 (Running your project, Approach B: The Way of Fewest Tools)

It seems like everybody’s JavaScript project uses a dozen tools plus the kitchen sink. Is it possible to make a small program without any extra tools? It certainly is! Here’s how.

似乎每个人JavaScript项目都使用了十几种工具以及厨房水槽。 是否可以制作一个没有任何额外工具的小型程序？ 必然是！ 这是如何做。

步骤B1：建立tsconfig.json (Step B1: Create tsconfig.json)

Create a text file called tsconfig.json in your root folder, and put this code in it:

在您的根文件夹中创建一个名为tsconfig.json的文本文件，并将以下代码放入其中：

This file marks the folder as a TypeScript project and enables build commands in VSCode with Ctrl+Shift+B (the tsc: watch command is useful — it will automatically recompile your code whenever you save it.)

该文件将文件夹标记为TypeScript项目，并使用Ctrl + Shift + B启用VSCode中的构建命令( tsc: watch命令很有用-只要保存它，它就会自动重新编译代码。)

Silly fact: tsc allows comments in .json files but npm does not.

愚蠢的事实 ： tsc允许在.json文件中进行注释，但npm不允许。

This file is very important because if the settings aren’t right, something may go wrong and mysterious errors may punch you in the face. Here is the documentation of tsconfig.json, but compiler options are documented separately.).

该文件非常重要，因为如果设置不正确，可能会出问题并且神秘错误可能会打扰您。 这是tsconfig.json的文档 ，但是编译器选项是单独记录的 。)。

步骤B2：添加构建脚本 (Step B2: Add a build script)

To allow npm to build your TypeScript code, you must also add entries in the scripts part of package.json. Modify that section so it looks like this:

要允许npm构建您的TypeScript代码，还必须在package.json的scripts部分中添加条目。 修改该部分，使其如下所示：

"scripts": {  "test": "echo \"Error: no tests installed\" && exit 1",  "build": "tsc",  "start": "node server.js"},

The build script simply runs tsc which compiles your code according to the options in tsconfig.json. To invoke this script you write npm run build on the command line.

build脚本仅运行tsc ，即可根据tsconfig.json.的选项编译代码tsconfig.json. 要调用此脚本，您npm run build在命令行上编写npm run build 。

“But wait!” you may be thinking. “It’s really much easier to type tsc than npm run build!” That’s true, but there are two reasons to define a build script:

“可是等等！” 你可能在想。 “输入tsc确实比npm run build容易得多！” 没错，但是定义build脚本有两个原因：

1. If you installed TypeScript with --save-dev but not --global, you can’t run tsc directly from the command line because it’s not in the PATH.

   如果您使用--save-dev而不是--global安装TypeScript，则不能直接从命令行运行tsc ，因为它不在PATH 。

2. There’s a good chance your build process will become more complicated later. By creating a build script you can easily add other commands to the build process later.
   您的构建过程很有可能在以后变得更加复杂。 通过创建构建脚本，您可以在以后轻松地将其他命令添加到构建过程中。

Note: npm runs the prestart script automatically whenever someone runs the start script, so you could add this additional an additional script:

注意：每当有人运行start脚本时， npm都会自动运行prestart脚本，因此您可以将此附加脚本添加到其他脚本中：

"prestart": "npm run build",

This would build your project whenever you start your server with npm start or npm run start.

每当您使用npm start或npm run start服务器时，这都会构建您的项目。

But this has two disadvantages:

但这有两个缺点：

1. tsc is a bit slow

   tsc有点慢

2. if tsc finds type errors then your server won’t start

   如果tsc发现类型错误，则您的服务器将无法启动

When TypeScript detects type errors, that doesn’t stop it from writing JavaScript output files, and you may find it is occasionally useful to run your code even with type errors.

当TypeScript检测到类型错误时，这不会阻止它编写JavaScript输出文件，并且您可能会发现即使遇到类型错误，有时也可以运行代码。

The default behavior of npm start is to run node server.js, so it seems redundant to include "start": "node server.js". However, if your server is written in TypeScript you’ll need this line because server.js doesn’t exist until server.ts is compiled. And if server.js doesn’t exist, npm start will give the error missing script: start unless you include this line.

npm start的默认行为是运行node server.js ，因此包含"start": "node server.js"似乎是多余的。 但是，如果您的服务器是用TypeScript编写的，则将需要此行，因为在编译server.ts之前server.js不存在。 如果server.js不存在，则npm start将提供错误missing script: start除非您包括以下行。

步骤B3：制作一个简单的服务器 (Step B3: Make a simple server)

To make sure Node.js is working, create a text file called server.js and put this code in it:

为了确保Node.js正常运行，请创建一个名为server.js的文本文件，并将以下代码放入其中：

const http = require('http');

http.createServer(function (request, response) {  // Send HTTP headers and body with status 200 (meaning success)  response.writeHead(200, {'Content-Type': 'text/html'});  response.end(`    <html><body>      <h1>Hello, world!</h1>      You asked for: ${request.url}    </body&gt;</html>`);}).listen(1234);

Run npm start to start it, visit http://127.0.0.1:1234/index.html to make sure it works, then press Ctrl+C to stop the server.

运行npm start来启动它，请访问http://127.0.0.1:1234/index.html以确保其正常工作，然后按Ctrl + C停止服务器。

To get IntelliSense for Node.js, you need to install type information for it with this command:

要获取IntelliSense for Node.js，您需要使用以下命令为其安装类型信息：

npm install @types/node --save-dev

Then in VS Code, type http. to make sure it works:

然后在VS Code中，键入http. 确保其有效：

Behind the scenes, VS Code uses the TypeScript engine for this. However, if you rename your file to server.ts, IntelliSense doesn’t work! Is TypeScript broken in Node.js? Not really. TypeScript can still compile it, it just doesn’t grok require in a .ts context. So in TypeScript files, you should use import instead of require:

在后台，VS Code为此使用TypeScript引擎。 但是，如果将文件重命名为server.ts ，则IntelliSense无法正常工作 ！ Node.js中的TypeScript是否损坏？ 并不是的。 TypeScript仍然可以编译它，只是在.ts上下文中require 。 因此，在TypeScript文件中，应使用import而不是require ：

import * as http from 'http';

Note: this is confusingly different from Node’s .mjs files, which require import http from 'http'; (Details)

注意 ：这与Node的.mjs文件令人困惑，后者需要import http from 'http'; ( 详细 )

TypeScript then converts import to require in its output (because of the "module": "umd" option in tsconfig.json).

然后TypeScript在其输出中将import转换为require (由于tsconfig.json中的"module": "umd"选项)。

Now let’s change our server so it can serve any file from our /app folder:

现在，让我们更改服务器，以便它可以提供/app文件夹中的任何文件：

You’ll notice that this code has some funny… nesting. That’s because Node.js functions are normally asynchronous. When you call functions in fs, instead of returning a result, they pause your program until they are done and then they call a function provided by you, sending that function either an error (err) or some information (fileInfo).

您会注意到该代码具有一些有趣的嵌套功能。 这是因为Node.js函数通常是异步的。 当您在fs调用函数时，它们不返回结果，而是暂停您的程序，直到完成为止，然后调用您提供的函数，向该函数发送错误( err )或某些信息( fileInfo )。

For example, instead of returning information about a file, fs.stat sends information to a callback.

例如， fs.stat不会返回有关文件的信息， fs.stat 将信息发送到回调。

A fishy thing about this web server is that it ignores request.method, treating every request as if it were a GET. But it works well enough to get started.

关于此Web服务器的一个令人毛骨悚然的事情是，它忽略了request.method ，将每个请求都视为GET 。 但是它足以开始使用。

步骤B4(可选)：使用Express (Step B4 (optional): Use Express)

If you want your server side to do any “routing” that is more complicated than serving a few files, you should probably learn about the most popular Node.js server framework: Express.

如果您希望服务器端执行比提供几个文件更复杂的“路由”，那么您应该了解最流行的Node.js服务器框架： Express 。

If we use Express, our server code will be much shorter.

如果使用Express，则服务器代码将短得多。

Just install it with npm install express and put the following code in server.js:

只需使用npm install express进行npm install express ，然后将以下代码放入server.js ：

const express = require('express');const app = express();

app.use('/node_modules', express.static('node_modules'));app.use('/', express.static('app'));app.listen(1234, () => console.log(    'Express server running at http://127.0.0.1:1234'));

步骤B5：制作一个网页来保存您的应用 (Step B5: Make a web page to hold your app)

Finally, in your app folder, create an index.html file in there to load your app:

最后，在您的app文件夹中，创建一个index.html文件以加载您的应用程序：

This page includes both React (react.development.js and react-dom.development.js) and Preact (preact.dev.js) so I don’t need to give you separate instructions for each one. You can remove whichever one you aren’t using, but the page can still load with unresolved script elements.

此页面同时包含React( react.development.js和react-dom.development.js )和Preact( preact.dev.js )，因此我不需要为每个单独提供说明。 您可以删除不使用的任何一个，但是该页面仍可以使用未解析的脚本元素加载。

At this point you should be able to build your code (npm run build), start your server (npm start) and visit http://127.0.0.1:1234 to view your app!

此时，您应该能够构建代码( npm run build )，启动服务器( npm start )并访问http://127.0.0.1:1234来查看您的应用程序！

Remember, you can recompile your code automatically in VS Code: press Ctrl+Shift+B and choose tsc: watch.

请记住，您可以在VS Code中自动重新编译代码：按Ctrl + Shift + B并选择tsc: watch 。

Note: It’s important to load app.js at the end of the body, or React will say Error: Target container is not a DOM element because app.js would be calling document.getElementById('app') before the app element exists.

注意 ：在body的末尾加载app.js很重要，否则React会说Error: Target container is not a DOM element因为app.js在app元素存在之前会调用document.getElementById('app') 。

At this point it’s worth noting that this code is a little hacky. Especially this part:

在这一点上，值得注意的是这段代码有点hacky。 特别是这部分：

<script>    module = {exports:{}}; exports = {};    window.require = function(name) { return window[name]; };    window['react'] = window['React'];    window['react-dom'] = window['ReactDOM'];<;/script>

What’s this for? The short answer is that if your code contains import, TypeScript cannot produce code that “just works” in a browser, and this is one of many possible workarounds for that problem.

这是用来干嘛的？ 简短的答案是，如果您的代码包含import ，则TypeScript 无法生成在浏览器中“正常工作”的代码，这是解决该问题的许多可能方法之一。

The long answer? First of all, remember that the JavaScript ecosystem has multiple module systems. Right now, your tsconfig.json file uses the "module": "umd" option, because "module": "umd" and "module": "commonjs" are the only modes that can be used in both Node.js and a web browser.

长答案？ 首先，请记住，JavaScript生态系统具有多个模块系统。 现在，您的tsconfig.json文件使用"module": "umd"选项，因为"module": "umd"和"module": "commonjs"是可同时在Node.js和网页浏览器。

I asked you to make a server.js (not server.ts) file, but by using "module": "umd" you could write your server code in TypeScript if you want to.

我要求您制作一个server.js (不是server.ts )文件，但是如果需要，可以使用"module": "umd"来用TypeScript编写服务器代码。

UMD is the natural choice since it’s supposed to make a “universal” module definition, but TypeScript doesn’t really try to be universal — it simply won’t attempt to work in a web browser unaided.

UMD是自然的选择，因为它应该进行“通用”模块定义，但是TypeScript并未真正尝试成为通用的-它根本不会尝试在Web浏览器的帮助下工作。

Instead, it expects to find predefined symbols either for an AMD module system or a CommonJS (or Node.js) module system. If neither of these is defined, the module exits without even logging an error message.

相反，它期望找到针对AMD模块系统或CommonJS(或Node.js)模块系统的预定义符号。 如果这两个都未定义，则模块将退出，甚至不会记录错误消息。

Even if we could use the "module": "es6" option, which keeps import commands unchanged in the output file, it wouldn’t work because Chrome somehow still doesn’t support import in 2018. Also, the URLs of our modules have little in common with the string in our import statements, and I have learned that TypeScript path mapping aliases can’t solve the problem because they don’t change the compiler’s output.

即使我们可以使用"module": "es6"选项，该选项在输出文件中保持import命令不变，也无法正常工作，因为Chrome在2018年仍然不支持import 。此外，我们模块的URL具有与我们的import语句中的字符串几乎没有共同点，而且我了解到TypeScript 路径映射别名无法解决问题，因为它们不会更改编译器的输出。

TypeScript’s CommonJS implementation requires the require to be defined, of course — it’s used to import modules. But it also looks for exports and module.exports, even though our module doesn’t export anything. So our little hack must define all three.

当然，TypeScript的CommonJS实现需要定义require －它用于导入模块。 但它也寻找exports和module.exports ，即使我们的模块不出口任何东西。 因此，我们的小技巧必须定义所有这三个。

The UMD versions of React, ReactDOM, and Preact set global variables called React, ReactDOM and preact respectively. But “global” variables in a browser are actually members of a special object called window. And in JavaScript, window.something means exactly the same thing as window['something'] except that you can use special characters, such as dashes, in the latter form. Therefore, window['preact'] and/or window['React'] already exist. So by defining a require function that simply returns window[name], it allows React or Preact to be imported.

的UMD版本的React，ReactDOM和Preact设置所谓的全局变量React ， ReactDOM和preact分别。 但是浏览器中的“全局”变量实际上是称为window的特殊对象的成员。 And in JavaScript, window.something means exactly the same thing as window['something'] except that you can use special characters, such as dashes, in the latter form. Therefore, window['preact'] and/or window['React'] already exist. So by defining a require function that simply returns window[name] , it allows React or Preact to be imported.

However, we also need to create lowercase aliases 'react' and 'react-dom' because those are the names we must use in our TypeScript code (those names are recognized by the TypeScript compiler because those are the names of the folders in node_modules).

However, we also need to create lowercase aliases 'react' and 'react-dom' because those are the names we must use in our TypeScript code (those names are recognized by the TypeScript compiler because those are the names of the folders in node_modules ).

There’s another thing in our index.html that is a bit… unfortunate:

There's another thing in our index.html that is a bit… unfortunate:

<script src="node_modules/react/umd/react.development.js"></script><script src="node_modules/react-dom/umd/react-dom.development.js"></script><script src="node_modules/preact/dist/preact.dev.js"></script>

What makes this code less than ideal?

What makes this code less than ideal?

1. We already have import statements in our app.tsx file, so it’s unfortunate that we need a separate command to load the modules in our index.html.

   We already have import statements in our app.tsx file, so it's unfortunate that we need a separate command to load the modules in our index.html .

2. We’re specifically referring to the development versions of the code, which include comments and are a lot more readable than minified versions. But if we roll out our web site to a large audience we’ll want to switch to the minified versions so that pages load faster. It would be nice if we could do that without losing the debugging benefits of the development versions.

   We're specifically referring to the development versions of the code, which include comments and are a lot more readable than minified versions. But if we roll out our web site to a large audience we'll want to switch to the minified versions so that pages load faster. It would be nice if we could do that without losing the debugging benefits of the development versions.

3. It assumes we can access files in node_modules, which is an unusual way to set up a server.

   It assumes we can access files in node_modules , which is an unusual way to set up a server.

All the disadvantages described here lead us to want some kind of additional tool to help us deploy code to our web browser. We discussed Parcel already, but the most popular one is Webpack.

All the disadvantages described here lead us to want some kind of additional tool to help us deploy code to our web browser. We discussed Parcel already, but the most popular one is Webpack.

Running your project, Approach C: The Webpack Way (Running your project, Approach C: The Webpack Way)

The most popular thing to do with front-end apps is to “pack” all the modules (React + your code + anything else you need) into a single file. This is comparable to what they call “linking” in some other languages, such as C++. That’s basically what Parcel and Webpack are built to do (Gulp is not — it requires extra tools installed separately.)

The most popular thing to do with front-end apps is to “pack” all the modules (React + your code + anything else you need) into a single file. This is comparable to what they call “linking” in some other languages, such as C++. That's basically what Parcel and Webpack are built to do (Gulp is not — it requires extra tools installed separately.)

Steps C1 & C2: Create tsconfig.json and server.js (Steps C1 & C2: Create tsconfig.json and server.js)

If you skipped approach B, please do steps B1 and B4 now.

If you skipped approach B, please do steps B1 and B4 now.

Step C3: Install webpack (Step C3: Install webpack)

You could install it like this:

You could install it like this:

npm install --save-dev webpack webpack-cli

Unfortunately, Webpack is over-sized: these two packages have 735 dependencies weighing in at 50.9 MB (13,198 files in 1868 folders). And for some reason, webpack-cli requires the Webpack package but doesn’t mark it as a dependency, hence you must install both of them explicitly.

Unfortunately, Webpack is over-sized: these two packages have 735 dependencies weighing in at 50.9 MB (13,198 files in 1868 folders). And for some reason, webpack-cli requires the Webpack package but doesn't mark it as a dependency, hence you must install both of them explicitly.

And although webpack-cli is ostensibly “just” the command-line interface for Webpack’s APIs, it is disproportionately large for some reason (Webpack alone is only 13.6 MB).

And although webpack-cli is ostensibly “just” the command-line interface for Webpack's APIs, it is disproportionately large for some reason (Webpack alone is only 13.6 MB).

Due to its size, it probably makes more sense to install it as a global:

Due to its size, it probably makes more sense to install it as a global:

npm install --global webpack webpack-cli

When using --global, keep in mind that if you share your code with someone else, the other person won’t get Webpack automatically when they type npm install, so you’ll want to explain how to install in your README file.

When using --global , keep in mind that if you share your code with someone else, the other person won't get Webpack automatically when they type npm install , so you'll want to explain how to install in your README file.

If you change your mind and want to switch from --save-dev to --global, just run the --global installation command and then use npm uninstall webpack webpack-cli to delete the local copy.

If you change your mind and want to switch from --save-dev to --global , just run the --global installation command and then use npm uninstall webpack webpack-cli to delete the local copy.

Step C4: Add build scripts (Step C4: Add build scripts)

To allow npm to build and serve your project, add entries in the "scripts" section of package.json.

To allow npm to build and serve your project, add entries in the "scripts" section of package.json .

You could modify that section so it looks like this:

You could modify that section so it looks like this:

"scripts": {  "test": "echo \"Error: no tests installed\" && exit 1",  "build": "tsc && webpack app/app.js -o app/app.bundle.js --mode=production",  "build:dev": "tsc && webpack app/app.js -o app/app.bundle.js --mode=development",  "start": "node server.js"},

With these scripts, you would use either npm run build to build a minified production version, or npm run build:dev to build a development version with full symbols and comments. However, this is inconvenient, because when you change your code, you have to manually repeat the npm run build:dev command.

With these scripts, you would use either npm run build to build a minified production version, or npm run build:dev to build a development version with full symbols and comments. However, this is inconvenient, because when you change your code, you have to manually repeat the npm run build:dev command.

In Approach B we could use tsc: watch in VS Code, but that won’t work this time because we also need to run Webpack — and tsc doesn’t know that.

In Approach B we could use tsc: watch in VS Code, but that won't work this time because we also need to run Webpack — and tsc doesn't know that.

Can we set it up to rebuild automatically when our code changes? Yes, but we will need a Webpack plugin to accomplish this. One of the plugins that can do the job is called awesome-typescript-loader. Install it like this:

Can we set it up to rebuild automatically when our code changes? Yes, but we will need a Webpack plugin to accomplish this. One of the plugins that can do the job is called awesome-typescript-loader . Install it like this:

npm install awesome-typescript-loader --save-dev

Then in package.json, change your "scripts" section to look lke this:

Then in package.json , change your "scripts" section to look lke this:

This makes webpack fully responsible for building our TypeScript code, and therefore we can use its --watch option to watch for code changes. The command to build and watch for code changes is npm run watch.

This makes webpack fully responsible for building our TypeScript code, and therefore we can use its --watch option to watch for code changes. The command to build and watch for code changes is npm run watch .

Step C5: Start server and Webpack (Step C5: Start server and Webpack)

You’ll need two separate terminals, one for your build system (npm run watch) and one for your server (npm start). If your server is written in TypeScript, then you need to run npm run watch first, otherwise it doesn’t matter which one you start first.

You'll need two separate terminals, one for your build system ( npm run watch ) and one for your server ( npm start ). If your server is written in TypeScript, then you need to run npm run watch first, otherwise it doesn't matter which one you start first.

It’s worth noting that VS Code can keep track of multiple terminals. You can create two terminals and run one command in each, like this:

It's worth noting that VS Code can keep track of multiple terminals. You can create two terminals and run one command in each, like this:

Step C6: Create index.html and load it (Step C6: Create index.html and load it)

In Approach C, your index.html file is much simpler than in Approach B:

In Approach C, your index.html file is much simpler than in Approach B:

<!DOCTYPE html><html><head>  <title>App</title>  <meta charset="utf-8"/></head><body>  <h1>Mini React app ❤</h1>  <div id="app"></div>  <script src="app.bundle.js"></script></body></html>

Visit http://127.0.0.1:1234 and the page should load. You’re done!

Visit http://127.0.0.1:1234 and the page should load. 你完成了！

Step C7: Create a webpack.config.js file (optional) (Step C7: Create a webpack.config.js file (optional))

Our build command is getting rather long, and is very similar for our three modes. Also, we’ve only set up the tsx file extension so webpack doesn’t know how to compile ts files yet.

Our build command is getting rather long, and is very similar for our three modes. Also, we've only set up the tsx file extension so webpack doesn't know how to compile ts files yet.

The most popular way of using Webpack is with a special configuration file, separate from package.json. The "build" script above becomes the following webpack.config.js file:

The most popular way of using Webpack is with a special configuration file, separate from package.json . The "build" script above becomes the following webpack.config.js file:

module.exports = {  entry: __dirname+'/app/app.tsx',  output: {    path: __dirname+'/app',    filename: 'app.bundle.js'  },  module: {    rules: [      { test: /\.(ts|tsx)$/, loader: 'awesome-typescript-loader' }    ]  }};

After you create this file, change your scripts in package.json as follows:

After you create this file, change your scripts in package.json as follows:

As before you can build and watch for changes with npm run watch, or use npm run build for a minified production build.

As before you can build and watch for changes with npm run watch , or use npm run build for a minified production build.

你完成了！ (You’re done!)

That’s it! Click here for a summary of all the steps above and here to continue learning about TypeScript. Any questions?

而已！ Click here for a summary of all the steps above and here to continue learning about TypeScript. 任何问题？

翻译自: https://www.freecodecamp.org/news/how-to-set-up-a-typescript-project-67b427114884/

typescript项目