用 TypeScript 和 css-in-js 的方式写 react app

React 是一个流行的前端框架，而 TypeScript 和 CSS-in-JS 也是越来越受欢迎的技术。本文将介绍如何使用 TypeScript 和 CSS-in-JS 的方式编写 React 应用，探讨其优点和指导意义。

TypeScript

TypeScript 是一种由 Microsoft 开发的静态类型检查器，它可以在编译时捕获常见的错误，提高代码质量，并且有助于团队协作。对于大型应用程序或者需要长期维护的项目，TypeScript 是一种非常好的选择。

安装

首先，您需要安装 TypeScript：

npm install --save-dev typescript

接着，在项目根目录下创建 tsconfig.json 文件：

// www.javascriptcn.com code example
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["dom", "es6"],
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules"
  ]
}

这个文件配置了 TypeScript 的编译选项。其中 "jsx": "react" 表示我们使用 React 来编写 JSX 语法。

示例

下面是一个简单的 TypeScript 组件：

// www.javascriptcn.com code example
import React from 'react';

interface Props {
  name: string;
}

const HelloWorld = ({ name }: Props) => {
  return <div>Hello, {name}!</div>;
};

export default HelloWorld;

在这个组件中，我们使用了 TypeScript 的接口来定义组件的属性类型。这样做可以确保 name 属性是一个字符串。

CSS-in-JS

CSS-in-JS 是一种将样式定义嵌入到 JavaScript 中的技术。它可以提高代码可维护性和复用性，并且避免了 CSS 命名冲突的问题。目前比较流行的 CSS-in-JS 库有 styled-components 和 emotion。

安装

这里以 styled-components 为例：

npm install --save styled-components

示例

下面是一个使用 styled-components 编写的组件：

// www.javascriptcn.com code example
import React from 'react';
import styled from 'styled-components';

interface Props {
  color: string;
}

const Button = styled.button<Props>`
  background-color: ${props => props.color};
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 4px;
`;

const MyButton = () => {
  return <Button color="blue">Click me!</Button>;
};

export default MyButton;

在这个组件中，我们使用了 styled-components 的模板字面量语法来定义样式。我们还可以将属性传递给组件，并使用这些属性来动态设置样式。

整合 TypeScript 和 CSS-in-JS

现在我们已经知道如何使用 TypeScript 和 CSS-in-JS 分别编写组件。那么如何整合它们呢？

首先，我们需要为 styled-components 添加 TypeScript 类型支持：

npm install --save-dev @types/styled-components

接着，我们可以使用 styled-components 的 css 函数来定义样式，并将其传递给组件：

// www.javascriptcn.com code example
import React from 'react';
import styled, { css } from 'styled-components';

interface Props {
  color: string;
}

const buttonStyles = css<Props>`
  background-color: ${props => props.color};
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 4px;
`;

const Button = styled.button`
  ${buttonStyles}
`;

const MyButton = () => {
  return <Button color="blue">Click me!</Button>;
};

export default MyButton;

在这个例子中，我们将样式定义放到了一个单独的函数中，并使用 css 函数来包装它。然后，在组件中，我们将这个函数的返回值插入到了

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/5178