Учебное пособие по TypeScript: установка TypeScript

JavaScript TypeScript
Учебное пособие по TypeScript: установка TypeScript

Эта статья является частью серии статей под названием «Краткое руководство по TypeScript».

  1. Знакомство с TypeScript
  2. Установить машинописный текст

предисловие

Благодаря предыдущей статье я считаю, что у всех есть базовое понимание TypeScript и определенное понимание ценности TypeScript. Однако в этом разделе мы узнаем, как создать среду разработки TypeScript.

TypeScript официально предоставляетPlayground. Вы можете ввести код TypeScript слева, а скомпилированный код JavaScript автоматически отобразится справа, что очень удобно.

На самом деле, вы можете пропустить следующий контент и написать код TypeScript в следующих руководствах прямо в Playground, а затем вернуться к этому разделу, когда вы примерно знакомы с синтаксисом TypeScript.

Установите TypeScript глобально

Установите инструменты командной строки TypeScript с помощью следующей команды:

npm install -g typescript

Из результатов установки мы видим, что приведенная выше команда устанавливает две команды в глобальной среде:tscа такжеtsserver. в,tsserverВ основном используется для редакторов и IDE и т. д.Обеспечьте семантическую поддержку, как правило, не используется.

Обычно используетсяtscЗаказ.tscдляtypescript compilerАббревиатура для компилятора TypeScript, который используется для компиляции кода TS в код JS. Использование очень простое:

tsc index.ts

По соглашению файлы, написанные на TypeScript, должны начинаться с.tsкак суффикс. При написании React на TypeScript вы должны использовать.tsxсуффикс вместо.jsx.

Example

Во-первых, мы создаем новый файл TSmain.ts. Введите следующий код:

// 创建一个 sayHi 函数，具有一个参数 person
// person 必须为字符串
function sayHi(person: string) {
    return `Hi, ${ person  }`
}

sayHi('Hopsken')

использоватьtscКоманда Compile создает скомпилированные файлы JS в текущем каталоге.

tsc main.ts

Скомпилированный JS-код:

function sayHi(person) {
    return "Hi, " + person;
}
sayHi("Hopsken");

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

Кроме того, внимательные студенты могли заметить, что в исходном коде TS мы использовали синтаксис строки шаблона ES6, но в сгенерированном JS компилятор автоматически преобразует его в синтаксис ES5. Это еще одно преимущество, которое дает нам TypeScript, благодаря которому мы можем уверенно использовать новые функции JavaScript.

Так что, если в исходном коде TS есть ошибка? Например, при входящемstringгде входящийnumber. Мы вносим следующие изменения в описанную выше процедуру:

sayHi(42)

скомпилировать снова,

Как видите, компилятор автоматически сообщит о соответствующих ошибках и даст соответствующие советы.

Обратите внимание, что хотя компилятор сообщит об ошибке, он все равно будет генерировать «проблемные» JS-файлы!

tsconfig.json

В общем, каждый TypeScript должен иметь одинtsconfig.jsonфайл, указывающий, что это проект TypeScript. пройти черезtsconfig.jsonфайл, мы можем настроить параметры, которые TypeScript использует при компиляции.

Если входной файл не указан, вызовите напрямуюtscкоманда, компилятор начнет с текущего каталога и будет искать уровень за уровнемtsconfig.jsonдокумент.

пройти через--project(-p)параметр, вы можете попросить компилятор использовать указанный каталог (или путь к файлу)tsconfig.jsonдокумент.

Инициализировать один сtsconfig.jsonдокумент.

tsc --init

Ниже представлено несколько часто используемых элементов конфигурации Полный список см.здесь.

{
  "compilerOptions": {
    // 指定输出的 JS 代码所使用的 ECMAScript 版本，可选值为：ES3、ES5、ES2015、ES2016、ES2017、ES2018 和 ESNEXT。请根据具体的兼容性要求选择。
    "target": "es5",
    // 指定输出的 JS 代码所使用的模块化方案，可选值为：none、commonjs、amd、system、umd、es2015 或 ESNext。
    "module": "commonjs",
    // 指定编译过程中要使用的库，视具体情况而定。
    "lib": [],
    // 是否编译 JS 文件。
    "allowJs": true,
    // 是否报告 JS 源码中的错误。
    "checkJs": true,
    // 启用 JSX 语法，可选值为 perserve、react-native、react。
    "jsx": "preserve",
    // 是否生成相关的 '.d.ts' 声明文件。
    "declaration": true,
    // 是否生成 sourceMap 文件
    "sourceMap": true,
    // 将输出的 JS 代码整合为单个文件
    // "outFile": "./",
    // 指定输出目录
    "outDir": "./",
    // 指定源码根目录
    "rootDir": "./",
    // 是否引入 tslib
    "importHelpers": true,
    // 当目标版本为 'ES5' 或 'ES3'，用以提供完整的解构、'for-of iterable' 支持
    "downlevelIteration": true,

    // 启用所有严格类型检查，区别于 JS 的 strict mode。
    "strict": true,
    // 使用 any 类型时必须明确声明
    // "noImplicitAny": true,
    // 严格检查 null 类型
    // "strictNullChecks": true,
    // 严格检查函数类型
    // "strictFunctionTypes": true,
    // 严格检查 bind、call、apply 类型
    // "strictBindCallApply": true,
    // 严格检查类属性初始化
    // "strictPropertyInitialization": true,
    // 当 this 具有隐含 any 类型时报错
    // "noImplicitThis": true,
    // 始终使用严格模式（指 JS 中的严格模式）
    // "alwaysStrict": true,

    /* 实验性选项 */
    // 对 ES7 中的修饰器 decorator 提供实验性支持
    "experimentalDecorators": true,
  }
}

следующее уведомление

В следующей части мы официально представим базовый синтаксис TypeScript. В следующем разделе мы узнаем об основных типах и выводе типов в TypeScript.

Приложение: О редакторе

В настоящее время все основные редакторы поддерживают TypeScript. Тем не менее, здесь все же рекомендуетсяVisual Studio Code.

Это бесплатный кросс-терминальный редактор с открытым исходным кодом. Разработанный Microsoft, это современный, легкий редактор, в отличие от раздутого семейства IDE Visual Studio.

Самое главное, сам VSCodeНаписано на TypeScript, который имеет встроенную поддержку TypeScript. Будь то завершение кода, подсказки интерфейса или переходы к определениям, рефакторинг кода и т. д., с этим можно легко справиться.

Получите поддержку другого редактора или IDE для TypeScript:

Категории