Некоторое время назад друг порекомендовал мне этоTypeScript, Он сказал, что было очень круто писать, и дай мне попробовать, когда я еще был в этом непостижимом. Я был так занят в то время, что у меня не было времени смотреть. Я был очень занят в последнее время, поэтому я нашел время, чтобы проверить это.TypeScript;просто скажиtsВ основном предусмотреноdynamic type check, что обеспечилоinterfaceОсобенность интерфейса может быть очень полезной при разработке проекта.TypeScriptдаJavaScriptнадмножество . Он сJavaScriptЕсть сложные отношения.

TypeScriptСвязанные команды

tsc -init     //ts文件编译成js文件
tsc -w    //实时监控文件编译,即一遍写ts代码保存的时候就可以看到js代码

бегатьtsc -initбудет генерировать позжеtsconfig.jsonконфигурационный файл

Уважайте каждую строчку кода, уважайте каждое поручение

функция

функцияJavaScriptСамый базовый юнит в нем, я сначала начинаю с функций и потихоньку узнаю большеTypeScriptграмматика и дальнейшее овладениеtsиспользование;

Необходимо проверить тип параметра функции, включая самые основные,stringиnumber,string[],number[], и кортежи (=> обучение вводу кортежей => изучение базовых типов) иJavaScriptТакой же,TypeScriptФункции могут создавать именованные функции и анонимные функции.

function add(x:number,y:number):number {
  return x + y
}   //有名函数
let myAdd = function(x:number,y:number):number {
  return x + y
}   //匿名函数

Мы набрали анонимную функцию только в правой части кода, а в левой части знака равенства.myAddВывод типа выполняется с помощью операций присваивания, и записывается полный тип функции. (Вывод типа: если тип явно не указан, тоTypeScriptбудет делать вывод из типа (Type Inference), чтобы вывести тип. )

let myAdd: (x:number,y:number) => number = 
function(x: number,y:number):number { return x + y}

Тип функции состоит из двух частей: типа параметра и типа возвращаемого значения.TypeScriptВ определении типа => используется для обозначения определения функции, левая сторона — это тип ввода, который необходимо заключить в круглые скобки, правая сторона — это тип вывода, аES6Функция стрелки не та

Дополнительные параметры и параметры по умолчанию

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

Обязательные параметры

function buildName(firstName:string,lastName:string) {
  return firstName + " " + lastName
}
let result0 = buildName(12, 12);    //提示 12 类型的参数不能赋值给 string
let result1 = buildName('Bob')    //提示应该有两个参数，但是只获得一个
let result2 = buildName('Bob','Adams','"sr')    //提示应该有两个参数，但是只获得三个
let result3 = buildName("Bob", "Adams");    //参数和传入的参数一样，不提示

необязательный параметр

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

function selectParam(firstName:string,lastName?:string) {
  return firstName + " " + lastName
}
let selectParam1 = selectParam('bob')
let selectParam2 = selectParam('bob','Adam')
let selectParam2 = selectParam('bob','Adam')    //两个变量无法重新声明

параметры по умолчанию

Мы можем предоставить значения по умолчанию для параметров.Если параметр со значением по умолчанию появляется перед обязательным параметром, пользователь должен явно передать его вundefinedзначение, чтобы получить значение по умолчанию

function param(firstName:string,lastName = 'Smith') {
  return firstName + ' ' + lastName
}
let param1 = param('bob')
let param2 = param('bob','Adam','kk')   //提示参数应该是1-2个

остальные параметры

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

function restParam (firstName:string,...restOfName:string[]) {
  return firstName + " " + restOfName.join(' ')
}
let employName = restParam ('Joseph',"Samuel","Bob")
//restParam 可以换一种形式
let restParamFun:(fname:string,...rest:string[]) => string = restParam

thisи стрелочная функция (тут видимо проблема, нужно дорабатывать)

существуетJavaScriptвthisЗначение указывается при вызове функции. ноTypeScriptуказывается при создании

interface Card {
  suit: string;
  card: number;
}
interface Deck {
  suits: string[];
  cards: number[];
  createCardPicker(this:Deck):()=>Card;     //this 指向 Deck
}
let deck:Deck = {
  suits:['hearts','spades','clubs'],
  cards:Array(52),
  createCardPicker:function(this:Deck) {
    return () => {
      let pickedCard = Math.floor(Math.random()*52)
      let pickedSuit = Math.floor(pickedCard / 13);
      return { suit: this.suits[pickedSuit],card:pickedCard % 13}
    }
  }
} 
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
alert("card: " + pickedCard.card + " of " + pickedCard.suit);

еслиJavaScriptсообщит об ошибке, в это времяthisуказал наwindow,ноTypeScriptНет ошибки, уточнил он.thisНа каком объекте он будет вызываться

базовый тип

существуетJavaScriptСуществует два типа типов данных: примитивные типы данных (Boolean,number,string,null,undefined,Synmbol) и тип объекта, вTypeScriptТакже используются данные примитивного типа. Чтобы программа имела ценность, нам нужно уметь обрабатывать простейшие единицы данных, числа, строки

числа, строки, массивы

let decLiteral:number = 6   //数字类型
let name1:string = 'bob'    //字符串类型
let sentence:string = `Hello, my name is ${name1}`    //字符串模板
let list0:number[] = [1,2,3,4]    //[]形式定义数组
let list1:string[]=['12','12','90']
let list2:Array<number> = [1,23,4]    //Array<元素类型>
let list3:Array<string> = ['1','23','4']    //Array<元素类型>

существуетTypeScriptВ среде есть несколько определений типа массива, что является более гибким.

• тип + обозначение в квадратных скобках

let fibonacci:number[] = [1,2,3,4]//只能传number类型的，否则会提示错误

• 2. Массивы дженериков (=> перейдите к дженерикам, чтобы узнать)

let fibinacci: Array<number> = [1,2,3,4]

• 3. Используйте интерфейсы для представления массивов (=> переходите к интерфейсам для изучения)

interface NumberArray {
 [index:number]: number
}
let fibonacci: NumberArray = [1,2,3,4]

NumberArrayПредставление: это массив чисел,indexЭто тип индекса массива, за которым следует массив чисел (это выражение кажется немного странным, пожалуйста, поправьте меня)

кортежTuple

Тип кортежа позволяет представить массив с известным количеством и типом элементов, причем каждый элемент не обязательно должен быть одного типа (массивы объединяют объекты одного типа, а кортежи объединяют объекты разных типов)

let x:[string,number];
x = ['Hello',10]

Перечисление: сценарии, в которых значение ограничено определенным диапазоном.

Например, в неделе всего семь дней.

enum Color { Red,Green,Blue}
let c:Color = Color.Green

any

На этапе программирования не ясно, что тип переменной задает тип, и значение может быть введено динамически, ноObjectЗначение переменной типа позволяет присвоить ей любое значение, и нельзя вызывать у нее методы; использоватьanyТипы заставляют эту функцию принимать любой тип аргумента, что приводит к потере некоторой информации; если мы передаем число, мы просто знаем, что потенциально может быть возвращено значение любого типа.

let list:any[] =  ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
let notSure:any = 4
notSure = "maybe a string instead"
notSure = false  

voidвведите сanyпротивоположный тип

Он означает, что нет типа, когда есть функция, которая не возвращает

function warnUser():void {
  console.log("This is my waring message")
}

undefinedиnull, их собственные типы не очень полезны:Neverте никогда не существовавшие типы значений, которые представляет тип

утверждениеasповерь мне, я знаю, что делаю

let someValue:any = "this is a string"
let strLength:number = (<string>someValue).length//“尖括号”语法
let strLength1: number = (someValue as string).length;//一个为as语法

Тип объединения: указывает, что значение может быть одним из многих типов.

let myFavoriteNumber:string|number;// 连接符 |
myFavoriteNumber = 'seven'
myFavoriteNumber = 7

Дженерики

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

общая функция

function identity<T>(arg:T):T {
  return arg;
}
let output = identity<string>("myString")

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

let myIdentity:<T>(arg:T) => T = identity
let myIdentity1:{ <T>(arg:T):T} = identity

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

универсальный интерфейс

interface GenericIdentityFn {
  <T>(arg:T):T
}
function identity<T>(arg:T):T {
  return arg
}
let myIdentity:GenericIdentityFn = identity

Общий класс (=> обучение в классе)

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

class GenericNumber<T> {
  zeroValue:T,
  add:(x:T,y:T)=>T
}
let myGenericNumber = new GeneriNumber<number>()

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

общие ограничения

interface Lengthwise {
  length:number
}
function loggingIdentity<T extends Lengthwise>(arg:T):T {
  console.log(arg.length)
  return arg
}

extendsНаследование интерфейса и ограничение общей структуры данных

интерфейс

TypeScriptОдним из основных принципов является проверка типов структуры значения. Это абстракция поведения. Конкретные действия должны быть реализованы классами. Как правило, первая буква интерфейса пишется с заглавной буквы. В общем случае класс может наследоваться только от другого класса. Иногда между разными классами могут быть какие-то общие черты, но в это время они могут быть извлечены в интерфейсы и использованыinplementsключевое слово для достижения, эта функция значительно повышает гибкость объектно-ориентированного

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

Свойство только для чтения (только для чтения)

Некоторые свойства объекта могут изменить свое значение только тогда, когда объект только что создан.

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

TypeScriptимеютReadonlyArray<T>тип, аналогичныйArray<T>Аналогично просто удаляются все изменяемые методы, чтобы гарантировать невозможность изменения массива после создания.

readonly vs const

Если мы хотим рассматривать его как переменную, просто используйтеconst, если это атрибут, используйтеreadonly

Дополнительные проверки недвижимости

1. Эти проверки можно обойти с помощью утверждений типа (две формы утверждений)

let strLength:number = (<string>someValue).length   //“尖括号”语法
let strLength1: number = (someValue as string).length    //一个为 `as` 语法

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

let squareOptions = { colour: "red", width: 100 }
let mySquare = createSquare(squareOptions)

3. Добавьте сигнатуру строкового индекса

interface SquareConfig {
  color?:string;
  width?:number;
  [propName:string]:any
}

тип функции

Интерфейс может описыватьJavaScriptВ дополнение к описанию различных представлений объектов в объекте, интерфейс также может быть описан как тип функции, он имеет определение функции с сигнатурой вызова, список параметров и тип возвращаемого значения, каждый параметр в списке параметров. Для параметра необходимо имя и тип.Имя параметра функции не обязательно должно совпадать с именем, определенным в интерфейсе.Если вы не укажете тип параметра,TypeScriptсистема типов выводит тип параметра

interface SearchFunc {
  (source:string,subString:string):boolean;
}
let MySearch:SearchFunc;
MySearch = function(source:string,subString:string) {
  let result = source.search(subString);
  return result > -1
}

индексируемые типы

interface StringArray {
  [index:number]:string
}
//let myArray:StringArray = ["Bob",'Fred']
let myArray:StringArray;
myArray = ["Bob",'Fred']

Тип класса реализует интерфейс, используя ключевое словоimplements

interface ClockInterface {
  currentTime: Date;
}
class Clock implements ClockInterface {
  currentTime:Date;
  constructor(h:number,m:number){}
}

Наследовать расширение ключевого слова интерфейса

interface Shape {
  color:string;
}
interface PenStroke {
  penWidth:number;
}
interface Square extends Shape,PenStroke {
  sideLength:number
}
let square = <Square>{}

extendsЭто наследование класса.После наследования вы можете использовать метод родительского класса или переопределить метод родительского класса;

implementsОн реализует несколько интерфейсов.Методы интерфейсов обычно пусты и должны быть переписаны, прежде чем их можно будет использовать.

своего рода

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

своего рода(Class): определяют абстрактные характеристики вещи, включая ее свойства и методы.

объект (Object): экземпляр класса черезnewгенерировать

объектно-ориентированный (OOP) три основные характеристики: инкапсуляция, наследование, полиморфизм

упаковка (Encapsulation): скрыть детали операции с данными и открыть только внешний интерфейс.Внешний конец не нуждается (и не может) знать подробности и может получить доступ к объекту через предоставленный извне интерфейс, а также гарантирует, что внешний мир не может произвольно изменить внутреннюю часть данных объекта

наследовать(Inheritance): Подкласс наследует родительский класс.Помимо всех особенностей родительского класса, подкласс имеет еще несколько специфических особенностей.

полиморфизм (Polymorphism): связанные разные классы генерируются путем наследования и имеют разные ответы на один и тот же метод. НапримерCatиDogунаследовано отAnimal, но реализовали своиeatметод. На данный момент, например, нам не нужно знать, что этоCatвсе ещеDog, вы можете напрямую позвонитьeatметод, программа автоматически определит, как выполнитьeat

аксессуар (getter & setter): используется для изменения поведения чтения и назначения свойств.

модификатор (Modifiers): модификаторы — это ключевые слова, определяющие свойства члена или типа.

абстрактный класс (Abstract Class): абстрактный класс — это базовый класс, который обеспечивает наследование от других классов, абстрактный класс не может быть создан, а абстрактные методы абстрактного класса должны быть реализованы в подклассах.

интерфейс(Interface): общедоступные свойства и методы между разными классами могут быть абстрагированы в интерфейс, а интерфейс может быть реализован классом (implements), класс может наследоваться только от другого класса, но может реализовывать несколько интерфейсов.

class Greeter {
  greeting:string;
  constructor(message:string) {
    this.greeting = message
  }
  greet() {
    return "Hello" + this.greeting
  }
}
let greeter = new Greeter("World")

newструктураGreeterэкземпляр класса, вызов ранее определенного конструктора, созданиеGreeterновый объект типа, выполнить конструктор для его инициализации

наследовать

Чтобы расширить существующий класс путем наследования, базовый класс часто называют суперклассом (Animal), производные классы часто называют подклассами (Dog)

class Animal {
  name: string;
  constructor(theName: string) { this.name = theName; }
  move(distanceInMeters:number = 0) {
    console.log(`Animal moved ${distanceInMeters}`)
  }
}
class Dog extends Animal {
  constructor(name: string) { super(name); }
  bark() {
    console.log("woof woof")
  }
  move(distanceInMeters = 5) {
    super.move(distanceInMeters)
  }
}
const dog = new Dog()
dog.bark()
dog.move(10)

Производный класс содержит конструктор, который должен быть вызванsuper(), он выполнит функцию базового класса, доступ к которой осуществляется в функции-конструктореthisимущество, обязательно звонитеsuper(). ЭтоTypeScriptВажное правило для соблюдения

Общие частные и защищенные модификаторы

В целомTypeScript, участники по умолчаниюpublic

когда участники отмечены какprivateкогда он не может объявить свой внешний доступ

protectedиprivateМодификаторы ведут себя аналогично, но с одним отличиемprotectedЧлены по-прежнему доступны в производных классах.

readonlyКлючевое слово устанавливает свойство только для чтения. Свойства только для чтения должны быть инициализированы в объявлении или конструкторе.

TypeScriptИспользуя систему структурных типов, когда мы сравниваем два разных типа, если члены типа совместимы, мы считаем их типы совместимыми.

аксессуар

TypeScriptподдержка черезgetters/settersдля перехвата доступа к членам объекта

let passcode = 'secret passcode'
class Employee {
  private _fullName:string;
  get fullName():string {
    return this._fullName
  }
  set fullName(newName:string){
    if (passcode && passcode == "secret passcode") {
      this._fullName = newName
    } else {
      console.log("Error: Unauthorized update of employee!");
    }
  }
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

статические свойства

Когда свойство существует только в самом классе, а не в экземпляре класса, оно называется статическим идентификатором члена.static

абстрактный класс

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

abstract class Animal {
  abstract makeSound():void
  move():void {
    console.log('roaming the earch...')
  }
}

Используйте классы в качестве интерфейсов

Определение класса создает две вещи: экземпляр класса и конструктор. Классы могут создавать типы, поэтому вы можете использовать классы там, где разрешены интерфейсы.

class Point {
  x:number;
  y:number;
}
interface Point3d extends Point {
  z:number
}
let point3d:Point3d = {x:1,y:2,z:3}

встроенные объекты

JavaScriptВ программе много встроенных объектов.TypeScriptкак определенный тип в

let b:Boolean = new Boolean(1)
let c:Error = new Error('Error occurred')
let d:Date = new Date()
let r:RegExp = /[a-z]/

DOMиBOMпредусмотрены встроенные объекты, вTypeScriptчасто используется в

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

Кажется, я работаю сверхурочно каждый день и всегда возвращаюсь домой поздно. заставь меня учитьсяTypeScriptОсновная причина в том, что к коду предъявляются жесткие требования, и может появиться какое-то будущееbugзадушен в колыбели. Во время разработки проекта я написал публичный метод для разбора формата данных, отправляемых бэкендом.Вдруг однажды структура данных, предоставленная мне бэкендом, изменилась со строки на массив, всего один или два интерфейса. структура данных изменилась, но большая часть структуры данных не изменилась. Это заставило страницу сообщить об ошибке, построчном исключении кода и, наконец, найти публичный метод, что заняло у меня много времени. Я думал тогдаjavaКак хорошо, определить тип данных напрямую. Избегайте моей ситуации. я узнал позжеTypeScriptТакже может. Медленно влюбляйтесь в него. К коду предъявляются строгие требования, заранееdebug, Я готов усердно учиться в последнее время, я должен учиться, когда я занят, но это удобно.

изучениеTypeScriptЧто касается официальных документов, я сравниваюjavaЯ выучил грамматику, я чувствую, что грамматика очень похожа. Я постоянно спрашиваю своих коллег, выjavaЕсть ли в нем грамматика?implementsиextends, и попросил ихjavaих отличие. Мои коллеги думали, что я учусьjava, я сказал им сказать аналогию с передним концом

имеютTypeScriptИщите рекомендации по материалам, делитесь ресурсами, дважды читайте официальные документы и планируйте объединить проект для реальных боевых действий в будущем. Если у вас есть соответствующий опыт разработки, представьте, что вы учитесь и общаетесь, ха-ха, вам нужен старый водитель, чтобы меня отвезти ха-ха