加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

翻译 | 开始使用 TypeScript 和 React

发布时间:2020-12-15 06:49:58 所属栏目:百科 来源:网络整理
导读:原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些关于 TypeScript 比较好的博文,跟随这些博文,我最近开始使用 TypeScript。今天,我将展示如何从零开始建立一个 TypeScrip
  • 原文地址:Getting started with TypeScript and React
  • 原文作者:Jack_Franklin
  • 译者:luxj
  • 校对者:veizz

Tom Dale 和其他人有一些关于 TypeScript 比较好的博文,跟随这些博文,我最近开始使用 TypeScript。今天,我将展示如何从零开始建立一个 TypeScript 工程,以及如何使用 Webpack 管理构建过程。我也将陈述关于 TypeScript 的第一印象,尤其是使用 TypeScript 和 ReactJS。

我不会深入到 TypeScript 语法的具体细节,你可以阅读 TypeScript handbook 或者免费书籍 TypeScript Deep Dive,它们是关于 TypeScript 比较好的入门材料。

更新:如果你想用德语阅读这篇文章,你可以 thanks to the awesome folks at Reactx.de

安装配置 TypeScript

第一步要做的事情是使用 Yarn 将 TypeScript 安装到本地的 node_modules 目录,首先,使用 yarn init 创建一个工程:

yarn init
yarn add typescript

当你安装了 TypeScript,你就可以使用 tsc 命令行工具,这个工具可以编译 TypeScript,编译时会创建一个开始文件 tsconfig.json,你可以编辑这个文件。你可以运行 tsc --init 获得这个文件 — 如果你已经在本地安装了 TypeScript,你需要运行 ./node_modules/.bin/tsc --init

注意:你可以在我的点开头的配置文件中看到,我将 $PATH 定义为 ./node_modules/.bin 这个目录。这有点危险,因为我可能不经意地运行这个目录下的任何可执行的文件,但是我愿意承担这个风险,因为我知道这个目录下安装了什么,而且这能节省很多打字时间!

tsc --init 这个命令会生成一个 tsconfig.json 文件,所有 TypeScript 编译器的配置都存在于这个文件中。在默认配置的基础上,我做了一些修改,下面是我正在用的一个配置:

{
  "compilerOptions": {
    "module": "es6",// 使用 ES2015 模块
    "target": "es6",// 编译成 ES2015 (Babel 将做剩下的事情)
    "allowSyntheticDefaultImports": true,// 看下面
    "baseUrl": "src",// 可以相对这个目录 import 文件
    "sourceMap": true,// 使 TypeScript 生成 sourcemaps
    "outDir": "ts-build",// 构建输出目录 (因为我们大部分时间都在使用 Webpack,所以不太相关)
    "jsx": "preserve",// 开启 JSX 模式,但是 "preserve" 告诉 TypeScript 不要转换它(我们将使用 Babel)
    "strict": true,},"exclude": [
    "node_modules" // 这个目录下的代码不会被 typescript 处理
  ]
}

allowSyntheticDefaultImports

将这个属性的值设置为 true,它允许你使用 ES2015 默认的 imports 风格,即使你导入的代码没有使用 ES2015 默认的 export。

举个例子,当你 import 不是用 ES2015 编写的 React 时(虽然源码是,但是 React 使用一个构建好的版本),就可以利用上面的属性设置。这意味着,严格意义上来讲,它没有使用 ES2015 默认的 export,所以当你使用 import 的时候, TypeScript 会警告你。尽管如此,像 Webpack 这样的构建工具能够导入正确的代码,所以我将这个属性设置为 true,相比使用 import * as React from 'react',我更喜欢 import React from 'react' 这种方式。

strict:true

TypeScript 2.3 版本引入了一种新的配置选项,strict。当将这个值设置为 true 时,TypeScript 编译器会尽可能的严格 - 如果你将一些 JS 转为 TS,这可能不是你想要的,但是对于一些新的项目,使其尽可能的严格是有意义的。它还引入了一些不同的配置,其中几个比较重要的的有 noImplicitAnystrictNullChecks:

noImplicitAny

将 TypeScript 引入一个现有的项目,当你不声明变量的类型时,TypeScript 不会抛出错误。但是,当我从零开始新建一个 TypeScript 项目,我希望编译器尽可能地严格。
TypeScript 默认做的一件事是将变量设置为 any 类型。any 是 TypeScript 中避免类型检查的有效手段,它可以是任何值。当你转换 JavaScript 时,使用 any 是很有用的,但是最好还是尽可能地严格。当将 noImplicitAny 设置为 true,你必须为变量设置类型。举个例子,当将 noImplicitAny 设置为 true 时,下面的代码会报错:

function log(thing) {
  console.log('thing',thing)
}

如果你想了解更多关于 noImplicitAny 的信息,可以阅读 TypeScript Deep Dive

strictNullChecks

这是另一个使 TypeScript 编译器更严格的选项。TypeScript Deep Dive 这本书有一个很好的章节介绍这个选项。如果将这个选项设置为true,TypeScript 会更容易识别出你引用的一个可能是 undefined 值的地方,并将展示这个错误。例如:

person.age.increment()

当将 strictNullChecks 设置为 true,TypeScript 会认为 person 或者 person.age 可能是 undefined,它会报个错以确保你处理它。这会防止出现运行时错误,所以这看起来是一个从一开始就要打开的很棒的选项。

配置 Webpack,Babel and TypeScript

我是 Webpack 的脑残粉;我喜欢它的插件生态系统、开发者工作流,喜欢它擅长管理复杂的应用和构建流程。所以,即使我们可能仅仅使用 TypeScript 编译器,我仍然喜欢引入 Webpack。因为 TypeScript 输出 React 和 es6(也就是 es2015,babel 把 es6 转成 es5,所以我们还需要 babel。让我们安装 Webpack,Babel 和相关的 presets 及 ts-loader,ts-loader 是 TypeScript 在 Webpack 中的插件。

还有 awesome-typescript-loader ,也是 TypeScript 在 Webpack 中的插件,但是我首先找到的是 ts-loader 而且到目前为止它非常不错。如果谁使用了 awesome-typescript-loader,我很乐意看到关于它们两者的对比。

yarn add webpack babel-core babel-loader babel-preset-es2015 babel-preset-react ts-loader webpack-dev-server

此时此刻,我必须感谢 Tom Duncalf,他在博客中发表的 TypeScript 1.9 + React,对我来说,是一个特别好的开始,我极力推荐它。

在 Webpack 中没有特别的配置,但是我还是在代码中列出一些注释来解释它:

const webpack = require('webpack')
const path = require('path')

module.exports = {
  // 设置 sourcemaps 为 eval 模式,将模块封装到 eval 包裹起来
  devtool: 'eval',// 我们应用的入口,在 `src` 目录 (我们添加到下面的 resolve.modules):
  entry: [
    'index.tsx'
  ],// 配置 devServer 的输出目录和 publicPath
  output: {
    filename: 'app.js',publicPath: 'dist',path: path.resolve('dist')
  },// 配置 devServer 
  devServer: {
    port: 3000,historyApiFallback: true,inline: true,// 告诉 Webpack 加载 TypeScript 文件
  resolve: {
    // 首先寻找模块中的 .ts(x) 文件,然后是 .js 文件
    extensions: ['.ts','.tsx','.js'],// 在模块中添加 src,当你导入文件时,可以将 src 作为相关路径
    modules: ['src','node_modules'],module: {
    loaders: [
      // .ts(x) 文件应该首先经过 Typescript loader 的处理,然后是 babel 的处理
      { test: /.tsx?$/,loaders: ['babel-loader','ts-loader'],include: path.resolve('src') }
    ]
  },}

我们按照上面的方式配置 loaders ,从而使 .ts(x) 文件首先经过 ts-loader 的处理。按照 tsconfig.json 中的配置,使用 TypeScript 编译 .ts(x) 文件 - 输出 ES2015。然后,我们使用 Babel 将它降级到 ES5。为了实现这些,我创建了一个包含需要的 presets 的 .babelrc 文件:

{
  "presets": ["es2015","react"]
}

现在我们已经做好了写 TypeScript 应用的准备。

写一个 TypeScript React 组件

现在,我们准备好建立 src/index.tsx,这是我们这个应用的入口。我们可以创建一个虚拟的组件,渲染它,查看它是否正常运行。

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <div>
      <p>Hello world!</p>
    </div>
  )
}

ReactDOM.render(<App />,document.getElementById('app'))

如果你运行 webpack,会看到下面的错误:

ERROR in ./src/index.tsx
(1,19): error TS2307: Cannot find module 'react'.

ERROR in ./src/index.tsx
(2,22): error TS2307: Cannot find module 'react-dom'.

发生上面的错误是因为 TypeScript 试图确认 React 的类型、React 导出了什么。对于 React DOM,TypeScript 会做同样的事情。React 并不是使用 TypeScript 编写的,所以它并没有包含那些信息。幸运地是,为了应对这种情况,社区已经创建了 DefinitelyTyped,这是一个大型的组件类型库。

最近,安装机制改变了;所有的类型被发布到 npm @types scope 下。为了获得 React 和 ReactDOM 的类型,我们运行下面的命令:

yarn add @types/react
yarn add @types/react-dom

通过上面的处理,错误不见了。无论何时,你安装一个依赖时,都应该试着安装 @types 包,或者你想查看是否有被支持的类型,你可以在 TypeSearch 网站上查看。

本地运行 app

为了在本地运行 app,我们只需要运行 webpack-dev-server 命令。我配置了一个脚本 start,它能做上面的事情:

"scripts": {
  "start": "webpack-dev-server"
}

服务会找到 webpack.config.json 这个文件,使用它创建我们的应用。

如果你运行 yarn start,你会看到来自于 webpack-dev-server 的输出,包含 ts-loader 的输出,这些能够确认应用是否正常运行。

$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist
404s will fallback to /index.html
ts-loader: Using typescript@2.3.0 and /Users/jackfranklin/git/interactive-react-introduction/tsconfig.json
Version: webpack 2.4.1
Time: 6077ms
 Asset     Size  Chunks                    Chunk Names
app.js  1.14 MB       0  [emitted]  [big]  main
webpack: Compiled successfully.

为了能够在本地看到效果,我创建了一个 index.html 文件,让它加载编译后的代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Typescript App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/app.js"></script>
  </body>

在端口 3000,我们将会看到 Hello world!,我们让 TypeScript 运行了!

定义一个模块类型

在现在的工程中,我想使用 React Ace module 包含一个代码编辑器。但是这个模块并不提供 types,并且也没有 @types/react-ace。在这种情况下,我们必须在应用中增加类型,这样可以使 TypeScript 知道如何去检查它的类型。这看起来非常烦人,让 TypeScript 至少知道所有第三方依赖关系的好处是,可以节省调试时间。

定义一个只包含类型的文件,后缀是 .d.ts( ‘d‘ 代表 ‘declaration‘ ),你可以从 TypeScript docs 了解更多。在你的工程中,TypeScript 将会自动地找到这些文件,你不需要显式地导入它们。

我创建了 react-ace.d.ts 文件,添加下面的代码,创建模块,定义它的默认 export 为一个 React 组件。

declare module 'react-ace' {
    interface ReactAceProps {
      mode: string
      theme: string
      name: string
      editorProps?: {}
      showPrintMargin?: boolean
      minLines?: number
      maxLines?: number
      wrapEnabled?: boolean
      value: string
      highlightActiveLine?: boolean
      width?: string
      fontSize?: number
    }

    const ReactAce: React.ComponentClass<ReactAceProps>
    export = ReactAce
}

我首先创建了一个 TypeScript 接口,这个接口包含组件的属性,export = ReactAce 标明组件通过模块被导出。通过定义属性的类型,TypeScript 会告诉我是否弄错了属性的类型或者忘记设置一个类型,这是非常有价值的。

测试

最后,使用 TypeScript,我也想有一个很好的测试方案。我是 Facebook 的 Jest 的超级粉丝,我在 google 上做了一些搜索,确认它是否能用 TypeScript 运行。结果发现,这是可行的,ts-jest 包可以做一些很重的转换。除此之外,还有一个做类型检查的 @types/jest 包,可以让你所有的测试都是类型确认过的。

非常感谢 RJ Zaworski,他在博客上发表了 TypeScript and Jest ,这使我开始了解这个主题。如果你安装了 ts-jest,你只需要在 package.json 中配置 Jest,下面是配置:

"jest": {
  "moduleFileExtensions": [
    "ts","tsx","js"
  ],"transform": {
    ".(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },"testRegex": "/*.spec.(ts|tsx|js)$"
},

第一个配置告诉 Jest 寻找 .ts.tsx 文件。 transform 对象告诉 Jest 通过 ts-jest 预处理器运行任何 TypeScript 文件,ts-jest 预处理器通过 TypeScript 编译器运行 TypeScript 文件,产出能让 Jest 识别的 JavaScript。最后,我更新了 testRegex 设置,目的是寻找任何 *.spec.ts(x) 文件,我更喜欢用这种方式命名转换。

通过上面这些配置,我可以运行 jest 并且让每一件事情都如预期一样运行。

使用 TSLint 规范代码

尽管 TypeScript 在代码中会给出很多检查提示,我仍然想要一个规范器,做些代码风格和质量检查。就像 JavaScript 的 ESLint,TSLint 是检查 TypeScript 的最好选择。它和 ESlint 的工作方式相同 - 用一系列生效或不生效的规则,还有一个 TSLint-React 包增加 React 的具体规则。

你可以通过 tslint.json 文件配置 TSLint,我的配置文件如下。我用 tslint:latesttslint-react presets,它们可以使用很多规则。我不赞成一些默认设置,所以我重写了它们 - 你可以和我的配置不同 - 这完全取决于你!

{
    "defaultSeverity": "error","extends": ["tslint:latest","tslint-react"],"jsRules": {},"rules": {
      // 用单引号,但是在 JSX 中,强制使用双引号
      "quotemark": [true,"single","jsx-double"],// 我更喜欢没有分号 :)
      "semicolon": [true,"never"],// 这个规则使每个接口以 I 开头,这点我不喜欢
      "interface-name": [true,"never-prefix"],// 这个规则强制对象中的 key 按照字母顺序排列 
      "object-literal-sort-keys": false
    },"rulesDirectory": []
}

我可以运行 tslint --project tsconfig.json 规范我的项目

结论

总之,到目前为止,用 TypeScript 开发我很高兴。我肯定会发表更多博文来描述这门语言的细节和我是如何使用 TypeScript 的。但仅就如下操作而言,构建过程、配置所有的工具、开始使用类型,这真是一种享受。如果你正在将你的 JS 应用结构化,想要一个更强大的编译器避免错误并减少调试时间,我极力推荐你尝试 TypeScript。

如果你想看源码或者以本文中的例子作为开始,我在 GitHub 上放了一个例子,如果你有任何问题,可以提 issue。

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读