Манекены для реагирования и типографии

Я знаю, что есть много ресурсов на TypeScript и отреагировать там …. Вырежь! Зачем писать еще один? Верно! Потому что кому -то это нужно. Я не буду тратить пространство страниц, пытаясь накормить моих коллег -нубов плюсами и минусами TS и реагировать. Как, черт возьми, я могу использовать TypeScript с React, не читая и не наблюдая слишком много? Ну … вот как!

Нет времени для кодирования? Просто клонируйте репо и уже поступите 👌

Поскольку CRA (Create-React-App) поддерживает TypeScript, мы будем использовать его (мы все ленивы! 🤫). Это не означает, что вы ограничены CRA. Если вы чувствуете себя достаточно уверенно, вы также можете использовать WebPack и Вавилон (После нескольких поездок в Stackoverflow и GitHub 🤡), но это происходит за объем того, что нужно моим коллегам.

Окей, пойдем ….

Открытый терминал и любезный тип

npx create-react-app my-dummy-project --template typescript

Если ты религиозная пряжа, как я, улыбнись и иди с 😋

yarn create react-app my-dummy-project --template typescript

Вот длинное шоу того же

Уош! Это было долго! 😰

Теперь, когда вы отметили все волшебные коробки создания проекта, вы можете с гордостью открыть папку Project, используя ваш любимый редактор кода. Мне жаль, если вы не используете код, потому что это то, что добросовестно TS/JS Fanboys/Fangirls используют (сильное предупреждение о мнении!) .

💡

Как вы заметили, нормальный .js и .jsx были заменены в пользу .ts и .tsx . Это подтверждение присутствия типографии в каркасе 🧪!

Давайте бежим ️

yarn start

или

npm run start

Хит http://localhost: 3000/ И вы должны увидеть это

Идеальный! Если вы находитесь на этом этапе, то вы готовы упасть в TypeScript Hands TypeScript! 🔥 Попробуем что -то изменить на App.tsx

//App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";

const App = () => (
  
    
      
      Dummy Trying To Typescript 🤪
    
  
);

export default App;

Бум 💥

Добавление нового компонента (с напечатанными реквизитами 😍)

Поскольку вся проблема наличия в телеисточнике вообще не заменяет JavaScript, мы должны сделать это для нас. Сладость безопасности типа и заманчивые ошибки прямо на коде Редактор (не так Найдите меня 🥺!) Можно быть свидетелем прямо на месте. Попробуем это.

Создайте файл в SRC/ Папка DummyComponent.tsx Пожалуйста, скопируйте и вставьте этот код в компонент 🙏🏼

//DummyComponent.tsx

import React from "react";

interface DummyComponentProps {
  //
}

const DummyComponent: React.FC = () => {
  return This is my Dummy Component!;
};

export default DummyComponent;

Что это!? 🙄

Я точно знаю! Позвольте мне сломать это для вас. Первая строка – обычный импорт React. И да, это не главное. Так Что, черт возьми, происходит в этом фрагменте?

interface DummyComponentProps {
  //
}

В TypeScript, Интерфейс это ключевое слово, которое используется для создания разрешенных определений типа или контрактов. Наш фиктивный компонент будет соблюдать типы, которые мы определяем здесь. Для тех из нас манекеной, которые использовали Proptypes Раньше наш DummyComponentProps поможет нам с легкостью достичь проверки типов.

Почему мы даже делаем это? Мы хотим убедиться, что мы передаем в качестве реквизита на наши фиктивные компоненты, это не то, что мы думаем, а то, что им точно нужно Анкет Например, избегать прохождения Числа где нить или логический требуется! Видеть…. это легко 🤗

Давайте отредактируем наш компонент, чтобы добавить реквизит

//DummyComponent.tsx

interface DummyComponentProps {
  //renders dummy name
  name: string;
  // renders dummy age
  age: number;
  //renders sad dummy 
  isSad: boolean;
}

Как вы можете видеть, мы явно заявили о типе значений, которые фиктивный компонент может переносить в качестве реквизита. Ага! 😁

Итак, как мы используем наши новые сверхдержавы на фиктивном компоненте 🤔?

Вот как

const DummyComponent: React.FC = ({name, age, isSad}) => {
  return This is my Dummy Component!;
};

Что мы сделали … Наш фиктивный компонент напечатан Реагировать. Fc <> общий тип, который поставляется с определениями типа React! Да! Я сказал это! По сути, это означает, что React имеет типы, определяемые для того, чтобы помочь нам определить наши компоненты со ссылкой на эти свойства. Наш компонент напечатан как функциональный компонент (отсюда fc ). Мы можем фактически импортировать это отдельно от самого реагирования

import React, {FC} from 'react';

В порядке! 😇 Поскольку определяются наши компоненты, мы можем использовать интерфейс в качестве ссылки в

React.FC

👊 К настоящему времени вы должны увидеть магию автозаполнения, когда мы разрушаем наши реквизиты

PHEEW !! Теперь давайте добавим больше смелости (вырекомендовать!) В нашем теле компонента. Это должно выглядеть так

//DummyComponent.tsx
import React from "react";

interface DummyComponentProps {
  //renders dummy component name
  name: string;
  // renders dummy age
  age: number;
  //renders sad dummy component
  isSad: boolean;
}

const DummyComponent: React.FC = ({
  name,
  age,
  isSad,
}) => {
  return (
    
      I am {name}
      I am {age} years Old
      {isSad ? "😔" : "😀 "}
    
  );
};

export default DummyComponent;

Мы сделали!

Извините, пока нет! Нам нужно использовать наш компонент! 🙀

Использование и свидетельство мгновенных преимуществ TypeScript 🥰

Давайте обновим наш App.tsx иметь фиктивного детского компонента.

😈 Теперь давайте добавим это

//App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import DummyComponent from "./DummyComponent"


const App = () => (
  
    
      
      Dummy Trying To Typescript 🤪

         {/* 😡 */}
    
  
);

export default App;

TypeScript с автоматически быть похожим на 😡

Но мы знаем, что нужно компоненту. Итак, мы даем это!

Вуаля !!

Что если нам нужно сделать некоторые реквизиты необязательными?

Просто добавь ? в определении Здесь Issad Опора не является обязательной

//DummyComponent.tsx

interface DummyComponentProps {
  //renders dummy component name
  name: string;
  // renders dummy age
  age: number;
  //renders sad dummy component
  isSad?: boolean; // 👈
}

…. И Что если нам нужно иметь опору с более чем одним типом данных?

Больше ни слова! Мы можем позволить возрасту быть строкой или число

//DummyComponent.tsx

interface DummyComponentProps {
  //renders dummy component name
  name: string;
  // renders dummy age
  age: number | string; // 👈
  //renders sad dummy component
  isSad?: boolean;
}

Например, когда мы хотим отображать Мне сто двадцать лет Мы просто обновляем

И здесь мы идем!

Завершившись!

TypeScript – это отличный инструмент для разработчика JavaScript. Это дает возможность создавать программное обеспечение с детерминированным поведением, не говоря уже о уверенности в том, чтобы рефакторировать большие кодовые основания, не сталкиваясь с хаосом 😉. Это все люди! Вы все ясно. Сейчас никто не манекен 😎

Это моя первая статья. Пожалуйста будь вежлив! Если у вас есть предложение о работе, пожалуйста, Холла. Спасибо! Быть безопасным! 🤝

Оригинал: “https://dev.to/hillkim/dummies-for-react-and-typescript-dak”

💡