Достаточное резюме TypeScript

внешний интерфейс JavaScript TypeScript
Достаточное резюме TypeScript

«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

Введение

прочитай прежде чем писать ТСофициальная документация,стеганое одеяло那么多Функционал пугает.На самом деле фич для написания бизнеса не так уж и много. В конце мая ts официально обновился до версии 4.3, а 4.4 уже в бете. Почти сэр, этого достаточно.Вот больше, чтобы обобщить часто используемые функции ts с вашим собственным пониманием. неправильно понятый,欢迎大哥指正👏🏻

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

Первый блог:Учебная база Джун ЦзеДобро пожаловать, звезда, давайте учиться вместе! На главной странице блога есть группа по выдуванию воды, отсканируйте код, чтобы присоединиться!

Во-вторых, преимущества и недостатки ТС.

1. Преимущества

  • 代码的可读性和可维护性: Для 🌰 посмотрите на задний конец接口返回值, как правило, вам нужно выйти в сеть, чтобы увидеть или прочитать документацию по интерфейсу, а затем узнать возвращаемую структуру данных, и после правильного использования ts редактор提醒Тип возвращаемого значения интерфейса, что весьма полезно.
  • существует编译阶段нашел большинство ошибок и избежал многих线上bug
  • Расширенный редактор и функциональность IDE, в том числе代码补全,接口提示,跳转到定义,重构Ждать

2. Недостатки

  • иметь определенный学习成本, вам необходимо понимать такие понятия, как интерфейсы, обобщения, классы и перечисления, с которыми фронтенд-инженеры могут быть не очень хорошо знакомы.
  • увеличит некоторые开发成本, конечно, это на ранней стадии, а поздняя эксплуатация попроще
  • Некоторым библиотекам JavaScript требуется兼容, предоставляя файлы объявлений, такие как vue2, базовая совместимость с ts не очень хороша.
  • требуется компиляция ts时间Да, это означает, что когда проект большой, скорость запуска среды разработки и упаковки рабочей среды становится испытанием.
  • может видетьВнутренний код Deno откажется от TypeScript по пяти конкретным причинам

Более или менее, архитектура с лучшим опытом разработки, который я слышал:React Hooks + TypeScript.目前也在用，还在学习中，至于到底好不好，我还是对vueМягкое место. Фронтенд еще активно развивается, позже будет еще одинxxxScript, никто не может сказать плохо. Итак, одно слово:学！

3. любой скрипт

Это может быть из-за бизнес-сценариев или деловой напряженности, или убегающий старший брат экономит усилия, и проекты, использующие typeScript, также могут статьanyScript. Вот несколько способов помочь:大哥们还没有其他办法):

  • // @ts-nocheck отключает проверку ts для всего файла
  • // @ts-ignore отключает однострочную проверку ts
  • любой и неизвестный

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

Бросьте вопрос интервью:你知道any和unknown的区别吗？

Вернемся к теме, приступим к изучению, подытожим некоторые проекты, которые используются больше, а некоторые расширенные возможности TS здесь обсуждаться не будут.

4. тип ТС

Все демонстрации в этой статье доступны по адресуTypeScript PlaygroundБеги, беги и смотри, не понимаешь ли ты предложения.

image.png

1. Базовый тип

  • Обычно используется: логическое значение, число, строка, массив, перечисление, любое значение, пустота.
  • Нечасто используется: кортеж, null, undefined, никогда
const count: number = 20210701;

2. Тип объекта

Простое понимание разницы между интерфейсом и типом: тип мощнее, интерфейс может声明合并, тип не работает;

В зависимости от личных привычек интерфейс обычно используется для объявлений, и необходимо использовать другие типы переменных с большим количеством типов. Есть ли интерфейс или тип一把梭的🤣?

interface Hero {
  name: string;
  age: number;
  skill: string;
  skinNum?: number;
  say(): string; // say函数返回值为string
  [propname: string]: any; // 当前Hero可定义任意字符串类型的key
}
// 继承
interface littleSoldier extends Hero {
  rush(): string;
}
// 任意类型
interface IAnyObject {
  [key: string]: any;
}

type Hero = {
  name: string,
  age: number,
  skill: string,
  skinNum?: number,
};

3. Тип массива

Обычно пишется в проекте, нужно объявить列表数据Типы:

interface IItem {
  id: number;
  name: string;
  isGod: boolean;
}
const objectArr: IItem[] = [{ id: 1, name: '俊劫', isGod: true }];
// or
const objectArr: Array<IItem> = [{ id: 1, name: '俊劫', isGod: true }];

const numberArr: number[] = [1, 2, 3];

const arr: (number | string)[] = [1, "string", 2];

4. Кортеж кортеж

Кортежи похожи на массивы, но аннотации типов отличаются

Тип, расположение и количество назначений должны соответствовать типу, расположению и количеству назначений.

Я не использовал его некоторое время, я не думаю, что это очень полезно~~~

// 数组 某个位置的值可以是注解中的任何一个
const LOL: (string | number)[] = ["zed", 25, "darts"];

// 元祖 每一项数据类型必须一致
const LOL: [string, string, number] = ["zed", "darts", 25];

5. Объединение |или Пересечение и тип

  • Типы объединения: переменная может быть одним из нескольких интерфейсов, используя|сегментация
  • Крестовый тип: состоит из нескольких типов, с&соединять
// anjiao 某胖博主爱好
interface Waiter {
  anjiao: boolean;
  say: () => {};
}

interface Teacher {
  anjiao: boolean;
  skill: () => {};
}

// 联合类型
function judgeWho(animal: Waiter | Teacher) {}
// 交叉类型 
// 同名类型会进行合并，同名基础类型属性的合并返回：never
// 同名非基础类型属性可以正常合并
function judgeWho(jishi: Waiter & Teacher) {}

6, перечисление

Улучшайте ремонтопригодность кода, единообразно поддерживайте определенные значения перечисления, избегайтеJiShi === 1Это магическое число.JiShi === JiShiEnum.BLUEJТаким образом, босс сразу понимает, кого я ищу.

// 初始值默认为 0
enum JiShiEnum {
     REDJ,
     BLUEJ,
     GREENJ,
}
// 设置初始值
enum JiShiEnum {
     REDJ = 8,
     BLUEJ,
     GREENJ,
}
const jishi: JiShiEnum = JiShiENUM.BLUE
console.log(jishi) // 9
// 字符串枚举，每个都需要声明
enum JiShiEnum {
     REDJ = "8号",
     BLUEJ = "9号",
     GREENJ = "10号",
}

7. Общий Т (Тип)

Проще говоря: общий тип, неопределенный тип, можно понимать как占位符(Использование T — это просто привычка, подойдет любая буква)

  • K (ключ): представляет тип ключа в объекте;
  • V (значение): представляет тип значения в объекте;
  • E (элемент): указывает тип элемента.
// T 自定义名称
function myFun<T>(params: T[]) {
  return params;
}
myFun <string> (["123", "456"]);

// 定义多个泛型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join <number, string> (1, "2");

8. Утверждение

Утверждения используются для ручного указания типа значения.值 as 类型 or <类型>值

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

function judgeWho(animal: Waiter | Teacher) {
  if (animal.anjiao) {
    (animal as Teacher).skill();
  }else{
    (animal as Waiter).say();
  }
}

9. в

При защите типов, аналогично массивам и строкамincludesметод

Он также имеет функцию обхода.Чтобы получить Ключ, определенный типом ts, есть еще один способ получить Ключ: keyof — тип объединения ключа типа, а in — ключ типа обхода.

function judgeWhoTwo(animal: Waiter | Teacher) {
  if ("skill" in animal) {
    animal.skill();
  } else {
    animal.say();
  }
}

10. Типовые аннотации

Явно скажите коду, что наша переменная count имеет числовой тип, который называется аннотацией типа.

let count: number; // 类型注解
count = 123;

11, вывод типа

  • Если ТС умеет автоматически анализировать типы переменных, нам ничего делать не нужно
  • Если TS не может проанализировать тип переменной, нам нужно использовать аннотации типов
// ts可以推断出count 为number类型
let count = 123;

12. недействителен и никогда

Тип возвращаемого значения также считается базовым типом. Функция без возвращаемого значения: void

function sayHello(): void {
  console.log("hello world");
}

Если функция никогда не выполняется, вы можете определить возвращаемое значение never.

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

Функция имеет входные параметры и выходные параметры.Традиционный способ записи в проекте:

// 定义一个小姐姐
interface IGirl {
  name: string,
  age: number,
  skill: string,
  isAnMo: boolean;
  number: JiShiEnum;
};
// 定义搜索小姐姐的入参
interface ISearchParams extends IGirl{
  serviceTime: string;
}
interface IGetGirls {
  data: IGirl[];
}
// 函数主体
export function getGirls(data: ISearchParams): Promise<IGetGirls> {
  return axios({
    url: `/dabaojian/getGirls`,
    method: 'GET',
    data,
  });
}

13. Определение типа

1, тип

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

interface Hero {
  name: string;
  skill: string;
}

const zed: Hero = { name: "影流之主", skill: "影子" };
type LOL = typeof zed; // type LOL = Hero

В приведенном выше коде мы получаем тип переменной zed через оператор typeof и присваиваем его переменной типа LOL, после чего мы можем использовать тип LOL

const ahri: LOL = { name: "阿狸", skill: "魅惑" };

2. экземпляр

class NumberObj {
  count: number;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

3. ключ

keyof немного похож на Object.keys, за исключением того, что keyof принимает ключи интерфейса

interface Point {
    x: number;
    y: number;
}

// type keys = "x" | "y"
type keys = keyof Point;

Используйте keyof для лучшего определения типов данных

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  return o[name]
}

14. Ключевые слова в классе ts

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

  • public
  • Снаружи частный класс недоступен, равно как и наследование
  • Снаружи защищенный класс недоступен, возможно наследование.
  • общедоступное свойство readOnly xxx, доступное только для чтения
  • static funcXXX статические методы, которые можно вызывать без новых
  • абстрактный абстрактный класс funcXXX, все подклассы должны реализовывать funcXXX

Пять, цконфиг

Вам необходимо понять описание некоторых параметров в tsconfig.json, подробности см. в официальной документации.tsconfig.json

1. Функция:

  • Корневой путь, используемый для идентификации проекта TypeScript;
  • Используется для настройки компилятора TypeScript;
  • Используется для указания скомпилированного файла.

2. Примечания:

  • tsc -init генерирует tsconfig.json, непосредственно tsc в каталоге проекта, а файл конфигурации будет взят при компиляции
  • Внутреннее значение поляcompileOptionsВ этой статье есть подробное описание
  • Конфигурация алиаса проекта: столкнулся с ямой, только настройка алиаса в конфиге проекта не действует, нужно настроить заново в tsconfig.json

6. Типы утилит

Типы утилит: это можно понимать как тип инструмента, основанный на инкапсуляции ts;

На конкретный анализ исходного кода можно ссылаться:

1,Partial<T>

Преобразуйте все атрибуты в T в необязательные атрибуты. Возвращаемый тип может быть любым подмножеством T

export interface UserModel {
  name: string;
  age?: number;
  sex: number;
}

type JUserModel = Partial<UserModel>
// =
type JUserModel = {
    name?: string | undefined;
    age?: number | undefined;
    sex?: number | undefined;
}

// 源码解析
type Partial<T> = { [P in keyof T]?: T[P]; };

2,Required<T>

Создает новый тип, делая все свойства T обязательными. В отличие от частичного

type JUserModel2 = Required<UserModel>
// =
type JUserModel2 = {
    name: string;
    age: number;
    sex: number;
}

3.Readonly<T>

Установите все свойства в T только для чтения

type JUserModel3 = Readonly<UserModel>

// =
type JUserModel3 = {
    readonly name: string;
    readonly age?: number | undefined;
    readonly sex: number;
}

4.Record<K,T>

Создает тип, который имеет набор свойств K, каждое из которых относится к типу T. Может использоваться для отображения свойств одного типа на другой. Дженерики, лежащие в основе Record, — это типы ключей и значений объекта.

Простое понимание: K соответствует соответствующему ключу, T соответствует значению объекта, а возвращаемый объект является объявленным объектом.

type TodoProperty = 'title' | 'description';

type Todo = Record<TodoProperty, string>;
// =
type Todo = {
    title: string;
    description: string;
}

interface IGirl {
  name: string;
  age: number;
}

type allGirls = Record<string, IGirl>

5.Pick<T,K>

В объявленном объекте выберите часть, чтобы сформировать новый объявленный объект

interface Todo {
  title: string;
  description: string;
  done: boolean;
}

type TodoBase = Pick<Todo, "title" | "done">;

// =
type TodoBase = {
    title: string;
    done: boolean;
}

6.Omit<T,K>

Возьмите все остальные свойства из T, кроме K. Напротив Пика.

7.Exclude<T,U>

Атрибуты, присваиваемые U, исключаются из T, а оставшиеся атрибуты образуют новый тип

type T0 = Exclude<'a' | 'b' | 'c', 'a'>; 

// = 

type T0 = "b" | "c"

8,Extract<T,U>

Атрибуты, которые могут быть присвоены U, извлекаются из T для формирования нового типа. Напротив исключения

type T0 = Extract<'a' | 'b' | 'c', 'a'>; 

// = 

type T0 = 'a'

9,NonNullable<T>

удалить нулевые и неопределенные типы из T

10.Parameters<T>

Возвращает массив типов параметров функции типа T


type T0 = Parameters<() => string>;  // []

type T1 = Parameters<(s: string) => void>;  // [string]

11.ReturnType<T>

возвращаемый тип функции T

type T0 = ReturnType<() => string>;  // string

type T1 = ReturnType<(s: string) => void>;  // void

12.InstanceType<T>

Возвращает тип экземпляра конструктора типа T

class C {
  x = 0;
  y = 0;
}

type T0 = InstanceType<typeof C>;  // C

Семь, обучающие ресурсы

Восемь, прошлый обзор

9. Наконец

Категории