Руководство Amway по TypeScript

JavaScript

Сан Нянь, вы чувствовали отчаяние, когда вы не можете найти проблему после года отладки и, наконец, обнаруживаете, что имя переменной неправильное? Сан Ниан, вы почувствовали появление кода на производственной линииUncaught TypeErrorстрах времени? Сао Ниан, вы когда-нибудь чувствовали себя обиженными, когда писали код для поиска 10 000 файлов и все еще не могли найти определение метода?

Хватай клавиатуру и давай перетащим убийственный код в мусорку! (зачеркнуто)

серия статей

Этот период:"Руководство TS Amway"

второй срок:"TS in JS Practice Guide North"

предисловие

Понятно, что значительное количество студентов в настоящее время не хотят изучать тс, ведь нет (сюэ) времени (бу) времени (дон). К сожалению, я был одним из них два месяца назад. Когда я увидел, что You Da использовал ts для написания vue3, я осторожно шагнул в эту яму. После многодневной борьбы я понял истинный смысл

真香

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

Амвэй

Тс сложно написать? Не сложно. Самый простой способ сделать это в три шага.

  1. найти js-файл
  2. Нажмите, чтобы переименовать
  3. Измените .js на .ts

Готово!

打脸

(Не бейте людей по лицу, вы должны полагаться на него, чтобы есть...)

⬇️ первый опыт

gif0

что такое -тс

ts является надмножеством js, что означает, что синтаксис самого js также может выполняться в ts. С одной стороны, ts добавляет к js массу ограничений, а с другой — расширяет некоторые возможности js, так же как es6 предоставляет столько волшебных синтаксических сахаров. Пока вы пишете js по определенным правилам, вы можете пользоваться преимуществами ts.

Конечно, потому что текущий ts достаточно силен и имеет свой vscode эскорт, это удобно для тех из нас, кто привык крепко думать (lan) и смел (de) думать об этом.

Объем работы по преобразованию js в ts во многом зависит от того, насколько подробным вы хотите ограничить свой код и насколько совершенным будет описание. Самый простой, как упоминалось выше, просто изменить имя расширения (конечно, оно может в значительной степени не пройти различные статические проверки). Если вы будете писать больше, товарищам, использующим ваш код, с большей вероятностью понравится то, что вы напишете.

СледующийПростойПредставьте синтаксис ts для облегчения понимания позже.

-ts введение в синтаксис

// 'xxx: number' 表示声明一个number类型
const num: number = 123

// 声明一个函数的参数类型(number以及any)和返回值(void)
function fn (arg1: number, arg2: any): void {
    // todo
}
fn(num, [1,2,3,4])

// 声明一个接口
interface IPerson {
    name: string // IPerson需要包含一个name属性，类型是string
    age: number // IPerson需要包含一个age属性，类型是number
    family: string[] // IPerson需要包含一个family属性，类型是数组，数组里面都是string类型的数据
    sex?: '男' | '女' // IPerson可选一个sex属性，值为'男'或者'女'或者undefined
}
// 使用IPerson接口定义一个对象，如果对象不符合IPerson的定义，编译器会飘红报错
const person: IPerson = {
    name: '小王',
    age: 12,
    family: ['爹', '娘'],
}

// type类似interface，以下写法等同用interface声明IPerson
type IPerson2 = {
    name: string
    age: number
    family: string[]
    sex?: '男' | '女'
}
// 因此可以直接定义过来
const person2: IPerson2 = person

Некоторые учащиеся могут прочитать приведенное выше введение и сказать:

«Написать столько другого кода и увеличить размер файла, какого черта»

В обычных условиях для запуска ts необходимо скомпилировать в js. После компиляции это выглядит так:

// 'xxx: number' 表示声明一个number类型
var num = 123;
// 声明一个函数的参数类型(number以及any)和返回值(void)
function fn(arg1, arg2) {
    // todo
}
fn(num, [1, 2, 3, 4]);
// 使用IPerson接口定义一个对象，如果对象不符合IPerson的定义，编译器会飘红报错
var person = {
    name: '小王',
    age: 12,
    family: ['爹', '娘'],
};
// 因此可以直接定义过来
var person2 = person;

Через диф человеческую плоть обнаружилось, что все коды ts были удалены после компиляции.

Могут быть и другие студенты, которые захотят спросить:

«Какая польза от изучения этого?»

Не волнуйся, просто посмотри вниз 🤓

Сценарии применения

Эта часть представляет несколько сценариев применения ts и дает некоторое вдохновение~

- используй мой код и слушай меня

Обычно для надежности кода нам приходится делать много отказоустойчивых операций над кодом.

Если вы успешно избегаете ослепляющих глаз из-за своей старости, вы пропустите здесь параметр и передадите неправильный тип параметра при использовании написанного вами метода.Часто встречаются ненадежные пользователи, которые не читают документы API, над которыми вы так усердно работали, и передают параметры вслепую. В конце концов, если что-то пошло не так, это ваша вина, что вы плохо поработали над совместимостью.

Приходится уподобляться долбанному ребенку, думать о том, в какую кашу пацан пройдёт, а потом добавлять в код разные ветки.

Теперь с помощью ts можно дружелюбно подсказывать смысл "что ты написал" при передаче параметров.

-w149

Сначала определите функцию с помощью ts

interface IArgs {
    name: string
    age: string
}

function youFoo (arg1: string, arg2: 'a'|'b', arg3: IArgs) {
    // 这里啥都不干，你传参吧
}

Если бы это написал мой коллега Сяо Мин

youFoo('sss', 'c', {
    name: 'xiaoming',
    age: 18
})

Он найдет что-то, что кажется неправильным

Второй параметр требует «a» или «b», поэтому Сяо Мин молча изменил его, но обнаружил, что

оказалосьageнеобходимо пройтиstringТипы.

Итак, Сяо Мин передумал во время MMP.

- найти документацию

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

С помощью ts мы (da)красиво (gai) решили эту проблему:

Во-первых, напишите метод в соответствии с этой структурой:

/**
 * 一个方法：生成错误提示信息
 * 
 * @param {string} message 提示信息，比如`you have a error`
 * @param {number | string} code 错误码，数字和字符都行
 * @param {string} type 类型，请写`demo1`或者`demo2`
 * 
 * [还不懂？点这里吧](https://www.google.com)
 * 
 * ```js
 * // demo
 * genErrMsg('demo', 10086)
 * 
 * ```
 */
export function genErrMsg (message: string, code: number | string, type?: ('demo1' | 'demo2')): string {
    return (message || `网络繁忙，请稍候再试`) + (code ? `(${code})` : ``)
}

Тогда опыт во время использования следующий:

В более полной либе опыт лучше, кроме началаjqueryТакже, например:

- беспечный

Прочитайте следующий код js, Просить:Сколько ошибок в коде ниже разделительной линии?

// careless.js
let foooo = 1
let fooo = 1
let fooooooo = 1
let foo = 1
let foooooo = 1
let test = 12
const obj = {
    fn1 () {},
    fn2 () {},
    fn4 () {},
}

/*************** 分割线以下的代码有哪些地方有bug？ **************** */

obj.fn3()

console.leg(fooooo)

function test () {
    alert(tast)
}

/*

**

**

***** Разделительная линия ответов *****

**

**

*/

Вы чувствуете, что ваши глаза слепнут?

Попробуйте изменить .js на .ts

- скрытые вопросы

Если в предыдущем js коде сразу видно глазами, что не так, то в следующем не все так просто

Прочитайте следующий код js, Просить:Сколько ошибок в коде?

import * as utils from './utils'

utils.genErrMsg(10086, 'this is error') // 上面提到的genErrMsg函数

let dom = window.document.getElementById('foo')
dom.className = 'add'

/*

**

**

***** Разделительная линия ответов *****

**

**

*/

Попробуйте изменить .js на .ts

Известные проблемы следующие:

1.genErrMsgПервый параметр должен бытьstring

2.getElementByIdВозвращаемое значение также может бытьnull

- данные интерфейса неизвестны

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

Если вы используете ts, скрипт в вашей руке может быть другим

Если есть интерфейс, подобный следующему

Мы написали следующий код ts для этого интерфейса:

interface IPriceData {
    /** 标识 */
    cbf: string
    /** id */
    id: string
    /** 市场价格 */
    m: string
    /** 后台价 */
    op: string
    /** 前台价 */
    p: string
}

// 将IPriceData塞进数组里
type IPriceDataArray = IPriceData[]

function getPrice () {
    // Promise的泛型参数使用了IPriceDataArray类型，then里面返回的数据就是IPriceDataArray类型
    return new Promise<IPriceDataArray>((resolve, reject) => {
        $.get('https://xxxxxxx/prices/pgets?ids=P_100012&area=&source=', data => {
            resolve(data)
        })
    })
}

при звонкеgetPriceфункции, опыт следующий:

Вам не нужно читать документацию каждый раз, когда вы будете поддерживать эту функцию в будущем. Если поле вдруг изменилось в фоновом режиме, мы можем сразу найти проблему в процессе проверки, а затем взять данные для вопроса: вы что-то изменили, и пусть я беру на себя вину... (здесь пропущено 10 000 слов)

- Расширенный класс и перечисление

Как мы все знаем, класс в js — это синтаксический сахар.

А вот в тс повышен класс (конечно это все же синтаксический сахар, но слаще)

Поговорим о картинке:

В vscode открыты общие атрибуты, частные атрибуты, защищенные атрибуты и статические атрибуты в ts.Разрешается использовать и запрашивать только общедоступные атрибуты в экземпляре.

Кроме того, ts также предоставляет синтаксический сахар enum:

enum HttpCode {
    /** 成功 */
    '200_OK' = 200,
    /** 已生成了新的资源 */
    '201_Created' = 201,
    /** 请求稍后会被处理 */
    '202_Accepted' = 202,
    /** 资源已经不存在 */
    '204_NoContent' = 204,
    /** 被请求的资源有一系列可供选择的回馈信息 */
    '300_MultipleChoices' = 300,
    /** 永久性转移 */
    '301_MovedPermanently' = 301,
    /** 暂时性转移 */
    '302_MoveTemporarily' = 302,
}

HttpCode['200_OK']
HttpCode[200]

По сравнению с ключом-значением, определенным простым объектом, доступ к значению возможен только через ключ, а к ключу нельзя получить доступ через значение. Но в enum в качестве ключа могут использоваться как положительные, так и отрицательные значения.

Заинтересованные студенты могут узнать о скомпилированном коде~

"use strict";
var HttpCode;
(function (HttpCode) {
    /** 成功 */
    HttpCode[HttpCode["200_OK"] = 200] = "200_OK";
    /** 已生成了新的资源 */
    HttpCode[HttpCode["201_Created"] = 201] = "201_Created";
    /** 请求稍后会被处理 */
    HttpCode[HttpCode["202_Accepted"] = 202] = "202_Accepted";
    /** 资源已经不存在 */
    HttpCode[HttpCode["204_NoContent"] = 204] = "204_NoContent";
    /** 被请求的资源有一系列可供选择的回馈信息 */
    HttpCode[HttpCode["300_MultipleChoices"] = 300] = "300_MultipleChoices";
    /** 永久性转移 */
    HttpCode[HttpCode["301_MovedPermanently"] = 301] = "301_MovedPermanently";
    /** 暂时性转移 */
    HttpCode[HttpCode["302_MoveTemporarily"] = 302] = "302_MoveTemporarily";
})(HttpCode || (HttpCode = {}));
HttpCode['200_OK'];
HttpCode[200];

Преимущества и недостатки

Из приведенных выше каштанов видно, что после использования ts можно получить следующие очки умений:

  • Четкие параметры функций/атрибуты интерфейса повышают удобочитаемость и удобство сопровождения кода.
  • статическая проверка
  • Создание документации по API
  • С современными редакторами различные советы
  • активное сообщество

и соответствующие технические затраты

сопровождающий (автор пакета) Пользователь
доход Очистить параметры функции/свойства интерфейса
статическая проверка
Сгенерировать API-документацию		 Очистить параметры функции/свойства интерфейса
С современными редакторами различные советы
Стоимость Тип отметки
Объявление (интерфейс/тип)		 Комбинация с некоторыми библиотеками не идеальна (да, это vue 2.x)

Упомянутый здесь vue2.x связан с отсутствием врожденной способности ts, поэтому синтаксис ts vue должен использовать стиль класса (он будет преобразован обратно в исходный синтаксис конструктора vue во время выполнения), который несколько отличается из стиля vue, с которым мы обычно знакомы

Это связано с тем, что среда под этим Vue более сложная, и ее нужно определять во время выполнения для IDE, поэтому при написании ts необходимо вручную устанавливать свойства (такие как реквизиты, данные, методы и т. д.) для это очень хлопотно. Ранние ts не поддерживали ручное написание области этого, а позже разработали для нее область.ThisTypeМетоды.

используется в приведенном выше кодеclassСпособ написания, все необходимые свойства находятся под этим, что позволяет избежать проблемы, связанной с тем, что среда выполнения может определить только область, требуемую под этим.

С другой стороны, из-за ограниченной способности подсказок ts, например, в функциональных сценариях, если источником данных является независимый объект, опыт будет хуже.

Пожалуйста, прочитайте следующие каштаны (эта часть немного выходит за рамки названия «Amway», новые ученики, которые плохо понимают это, могут переварить это после входа в яму ~)

interface IOptions {
    name: string
    age: number
    extra: {
        data: Object
        methods: Object
    }
}

// 参数options要求符合IOptions定义的规则
function sthConstructor (options: IOptions) {}

// options对象当中并没有任何ts的静态检查和提示
const options = {
    name: 'peter',
    age: '13', // error: age应该为数字
    extra: {
        data: [],
        methods: {}
    }
}
// options飘红报错，然而提示内容废话太多，关键信息藏得太深
sthConstructor(options)

В приведенном выше сценарии мы надеемся получить полную возможность проверки ts в опциях. Добиться этого можно тремя способами:

1. Переместите содержимое опций в функцию

2. будетoptionsОпределяется с помощью IObject

3. Предоставьте вспомогательный метод

Из этих трех способов:

Способ 1 — самый простой, но в больших проектах такой способ записи встречается редко.

Метод 2 обычно используется сопровождающими, но для пользователей стоимость выше. Потому что пользователю нужно зайти в библиотеку, чтобы найти тип, соответствующий методу, и импортировать его.

На мой взгляд, метод 3 является относительно хорошим методом, если сопровождающий предоставляет аналогичныйhelperФункция пакета, вы можете получить соответствующую подсказку. Он очень похож на декоратор vue ts?

Но я не думаю, что три вышеупомянутых решения элегантны, что является одним из текущих недостатков ts.

Как ts играют в js

TypeScript и vscode являются сыновьями Microsoft.У двух братьев определенно будет больше возможностей для совместной работы друг с другом.Даже если вы используете только файлы js, вы также можете наслаждаться ими.

Вот два из них:

- автозапрос конфигурационных файлов

Все конфигурации могут запрашиваться автоматически, пока есть файл типов:

/**
 * webpack配置自动提示
 * 
 * 先安装对应的types包： `npm i @types/webpack -D`
 * 
 * @type {import('webpack').Configuration}
 */
const config = {
    
}

-js проверка синтаксиса

Автоподсказки и статические проверки также доступны в js. Просто отметьте его в настройках vscodeCheck JSВот и все. Хотя ваш js-код может быть всяким красным 🤪

⬇️ Предыдущий пример также может подсказать некоторые ошибки в js

напиши в конце

Некоторые студенты спросят: я изучаю только js, могу ли я выучить ts? Да, и рекомендуется, потому что у вас будет более глубокое понимание основ js. Есть проблемы с использованием, которые решаются поиском в stackoverflow.

Итак, где я могу изучить такой полезный инструмент? Может быть, вы можете сослаться на траекторию моего обучения:

Портал — Введение в TypeScript (рекомендуется для устранения трещин в стене)

Портал — Изучите TypeScript для Vue3 и испытайте TypeScript

Портал — простая статья проведет вас через TypeScript за 30 минут, метод представляет собой положительное и отрицательное сравнение.

Портал -- переполнение стека (рекомендуется для трещин в стене)

Портал -- гугл

В этом году т.с. внезапно зацвела повсюду и, казалось, стала трендом. На крупных сайтах по обучению и знакомствам появились различные трансформации трансформаций, учебные пособия и идеи. Некоторые одноклассники, возможно, тоже обнаружили: не это ли осталось от таких языков, как java?

Когда они были молоды, все хотели быть свободными, но повзрослев, все стали послушными и послушными.

Спасибо @junning @zenghongtu за указание на это в комментариях

В статье изначально использовались дженерики Array (Array<xxx>) указывает на то, что часть массива была заменена квадратными скобками (xxx[])Выражать.

Причина в том, что ts после 3.4 использует дженерики Array для представления массивов в сценариях только для чтения.предупреждать. Вместо этого используйте квадратные скобки, чтобы не наступать на ямы в сложных сценах.

// readonly修饰只能用于方括号的数组和元组上
let err1: readonly Set<number>; // 错误!
let err2: readonly Array<boolean>; // 错误!

let okay: readonly boolean[]; // 无错误
let okay2: readonly [boolean, string]; // 无错误

Настоящим комментируется.

Если вы считаете, что этот контент ценен для вас, пожалуйста, поставьте лайк и подпишитесь на нашу фронтенд-команду.Официальный сайтА в нашем публичном аккаунте WeChat (WecTeam) каждую неделю публикуются качественные статьи~

WecTeam

Категории