Как подключить typescript к html

TypeScript в браузере¶

Если вы используете TypeScript для создания веб-приложения, вот мои рекомендации по быстрой настройке проекта TypeScript + React (мой выбор для пользовательского интерфейса).

Общая настройка системы¶

• Установите Node.js
• Установите Git

Быстрая настройка проекта¶

1 2 3

git clone https://github.com/basarat/react-typescript.git cd react-typescript npm install 

Подробная настройка проекта¶

Ниже можно проследить как этот проект был создан.

• Создайте директорию для проекта:

mkdir your-project cd your-project 

• Создайте tsconfig.json :

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

 "compilerOptions":  "sourceMap": true, "module": "commonjs", "esModuleInterop": true, "resolveJsonModule": true, "experimentalDecorators": true, "target": "es5", "jsx": "react", "lib": ["dom", "es6"] >, "include": ["src"], "compileOnSave": false > 

• Создайте package.json .

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

 "name": "react-typescript", "version": "0.0.0", "license": "MIT", "repository":  "type": "git", "url": "https://github.com/basarat/react-typescript.git" >, "scripts":  "build": "webpack -p", "start": "webpack-dev-server -d --content-base ./public" >, "dependencies":  "@types/react": "16.4.10", "@types/react-dom": "16.0.7", "clean-webpack-plugin": "0.1.19", "html-webpack-plugin": "3.2.0", "react": "16.4.2", "react-dom": "16.4.2", "ts-loader": "4.4.2", "typescript": "3.0.1", "webpack": "4.16.5", "webpack-cli": "3.1.0", "webpack-dev-server": "3.1.5" > > 

• Создайте webpack.config.js , чтобы собрать ваши модули в один файл app.js , который содержит все ваши ресурсы:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

const  CleanWebpackPlugin, > = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports =  entry: './src/app/app.tsx', plugins: [ new CleanWebpackPlugin( cleanAfterEveryBuildPatterns: ['public/build'], >), new HtmlWebpackPlugin( template: 'src/templates/index.html', >), ], output:  path: __dirname + '/public', filename: 'build/[name].[contenthash].js', >, resolve:  extensions: ['.ts', '.tsx', '.js'], >, module:  rules: [ test: /\.tsx?$/, loader: 'ts-loader' >], >, >; 

• Файл src/templates/index.html . Он будет использоваться в качестве шаблона для index.html , сгенерированного webpack. Сгенерированный файл будет в папке public и затем будет раздаваться с вашего веб-сервера:

1 2 3 4 5

html> body> div id="root">div> body> html> 

• src/app/app.tsx — это точка входа вашего веб-приложения:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import * as React from 'react'; import * as ReactDOM from 'react-dom'; const Hello: React.FunctionComponent compiler: string, framework: string, >> = (props) =>  return ( div> div>props.compiler>/div> div>props.framework>/div> /div> ); >; ReactDOM.render( Hello compiler="TypeScript" framework="React" />, document.getElementById('root') ); 

Разрабатывайте свое удивительное приложение¶

Вы можете установить самые последние пакеты, используя npm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest —save-exact

• Используйте реагирующий на изменения сервер, запустив npm start .
  • Откройте http://localhost:8080
  • Отредактируйте src/app/app.tsx (или любой файл ts/tsx, используемый каким-либо образом src/app/app.tsx ) и приложение обновится.
  • Отредактируйте файл src/templates/index.html и сервер обновится.
  • Раздавайте из папки public (которая содержит собранные ресурсы) вашего сервера.

  подключение ts файла в html

  насколько я понимаю, браузеры еще не умеют выполнять ts, они выполняют js. Поэтому ts нужно скомпилить в js и подключить уже js.

  Отслеживать
  ответ дан 6 июн 2018 в 14:47
  383 1 1 серебряный знак 16 16 бронзовых знаков

  я использую WS у меня автоматически переводится ts в js, но когда путь прописываю к js файлу то он не работает

  6 июн 2018 в 14:58

  хотя работает но оно выделяет красным var canvas = document.getElementById(«myCanvas»), context = canvas.getContext(«2d»); context.strokeStyle = «red»; getContext — это часть кода с ts файла

  6 июн 2018 в 15:04
  выделяет только — getContext
  6 июн 2018 в 15:06
  а canvas-элемент с именем myCanvas на html-странице есть? он расположен выше скрипта?
  6 июн 2018 в 16:08
  myCanvas — елемент html
  6 июн 2018 в 17:08

   var canvas = document.getElementById('myCanvas'); 

  Отслеживать
  51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
  ответ дан 6 июн 2018 в 17:28
  Дмитрий Литвин Дмитрий Литвин
  33 7 7 бронзовых знаков
  вот этого не хватало
  6 июн 2018 в 17:30

  • html
  • typescript
  Важное на Мете

  Похожие

  Подписаться на ленту

  Лента вопроса

  Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

  Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

  Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

  Базовая настройка TypeScript проекта

  Как быстро собрать TypeScript проект с помощью parcel bundler.

  TypeScript · 26.09.2019 · читать 1 мин �� · Автор: Alexey Myzgin

  Начать работу с TypeScript сейчас проще, чем когда-либо. Ты можешь настроить среду разработки прямо в своем браузере или быстро собрать локальную среду с помощью сборщика пакетов parcel bundler.

  Самый быстрый способ опробовать TypeScript — перейти на CodeSandbox.io, нажать на Сreate Sandbox и выбрать сэндбокс Vanilla + TS . Также, всегда можно перейти по ссылке Vanilla + TS. Здесь уже есть файл TypeScript, с которым можно играть и редактировать на свой вкус. Каждое внесенное изменение будет автоматически отражено в окне.

  В ином случае, можно развернуть локально среду с установленным Node. Для этого нужно установить parcel bundler, выполнив команду npm install -g parcel-bundler . Это установит parcel глобально. С установленным parcel , создать новый файл index.html в корне директории. Внутри html файла создать тег script с src=»https://frontend-stuff.com/blog/basic-typescript-setup/index.ts» :

  DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> meta http-equiv="X-UA-Compatible" content="ie=edge" /> title>Documenttitle> head> body>body> script src="./index.ts"> script> html>

  Затем, создать файл index.ts , на который указали ссылку. Внутри файла index.ts напишем console.log(«Hello from TypeScript!») .

  Parcel автоматически обрабатывает всё для нас. Для этого нужно выполнить команду parcel index.html — он установит TypeScript, создаст папку dist со всеми необходимыми ему файлами и запустит сервер с портом http://localhost:1234 . Открыв консоль в браузере, увидим сообщение Hello from TypeScript! .

  Если ты Node разработчик, тебе необходимо удалить папку dist (если она есть и её сгенерировал parcel). Затем запустить parcel , указав файл TypeScript index.ts и цель —target=node .

  parcel index.ts --target=node

  Ты увидишь, что он снова скомпилировался в папку dist , но на этот раз с index.js . Запускаешь node с нужным файлом node dist/index.js и в консоле увидишь то же сообщение Hello from TypeScript! .

  как подключить typescript к react

  Для подключения TypeScript к React необходимо выполнить следующие шаги:

  • Установить TypeScript и ts-loader:

  install typescript ts-loader --save-dev 

  • Создать файл tsconfig.json в корневой директории проекта и описать правила. Пример:

   "compilerOptions":  "outDir": "./dist/", "module": "es6", "target": "es5", "jsx": "react", "allowJs": true >, "include": ["./src/**/*"] > 

  Этот файл определяет настройки компилятора TypeScript и указывает, где находятся файлы проекта.

  • Создать webpack.config.js файл:

  const path = require('path'); module.exports =  entry: './src/index.tsx', module:  rules: [  test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, >, ], >, resolve:  extensions: ['.tsx', '.ts', '.js'], >, output:  filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), >, >; 

  Этот файл определяет настройки Webpack.

  • Создать файл index.tsx в папке src и добавить в него следующий код:

  import React from 'react'; import ReactDOM from 'react-dom'; interface AppProps  message: string; > const App: React.FCAppProps> = ( message >) =>  return h1>message>h1>; >; ReactDOM.render( App message='Hello, world!' />, document.getElementById('root') ); 

  Этот файл определяет основной компонент React.

  • Создать файл index.html в корневой директории проекта и добавить в него следующий код:

      charset="utf-8" /> React TypeScript   id="root">