TypeScript

Components in Angular 1.x

Posted on

Using TypeScript here:

isActionPossible(component) {
return this.someService.isActionPossible(component);
}

In Component (accessible in markup as “$ctrl.isActionPossible(item)”) above code cannot be changed to


isActionPossible = this.someService.isActionPossible;

as this will be broken in method someService.isActionPossible()

JavaScript porównywanie jednocześnie do null i undefined

Posted on Updated on

Wklepanie poniższych kommend wzróci takie wyniki jak w komentarzu po prawej

undefined == null; true
null == null; true
undefined != null; false
null != null; false
“” != null; true

Reasumując wystarczać mi na razie będzie porównanie “argument == null” gdy w rzeczywistości będę chciał sprawdzić “argument === undefined || argument === null”
działa to też dla odwrotnego operator, czyli napiszę “argument != null” zamiast pisać “argument !== undefined && argument !== null”

Sprytny czytelnik zauważy że ta rzecz powinna też działać gdy “argument == undefined” i ma rację. Ja jednak na razie zostaję przy porównywaniu do nulla.

Update

Gdy próbowałem sięgać pamięcią do tej wiedzy to wydawało mi się że ta rzecz dzieje się w TypeScript-cie, okazało się jednak, że to czysty JS i można go np używać również wewnątrz markupu w angularze.

JSFiddle na problemy z JavaScriptem, Angularem, TypeScriptem

Posted on Updated on

https://jsfiddle.net (i także wiele podobnych tooli/serwisów) jest edytorem w przeglądarce który pozwala odpalić nasz kod napisany w JavaScripcie. Takich tooli jest o wiele więcej dla różnych języków itp, ja skupie się na tym jednym i go opiszę, może są nawet lepsze alternatywy – nie wiem, widzę jednak, że jest najbardziej popularny na StackOverflow.

Składa się z 3 okienek gdzie wpisujemy nasz kod (html, JavaScript, css) oraz czwartego (output) w którym się uruchomi nasz kod:
jsfiddle example panes

Obecnie pozwala wybrać z kilku języków: JavaScript, CoffeeScript, JavaScript 1.7, Babel, TypeScript. Do tego kilkadziesiąt frameworków JS, z tego te bardziej popularne w kilku wersjach, np Angular jest w 4, a jQuery w ok. 20. To jest tylko takie ułatwienie, a nie ograniczenie. Dowolną bibliotekę można też dociągnąć tak jak includujemy każdy nowy scrypt w markupie html.

Debugowanie

Przyda się gdy coś “nie działa”

Najpierw samemu trzeba wyczerpać możliwości, bo często problem leży gdzieś u nas i widząć czysty kod, który działa w JSFiddle mamy pewność że to podejście działa tylko u nas czegoś jeszcze brakuje (gryzą sie zależności, czegoś brakuje, itp, itd). Jeśli już uruchomiliśmy w JSFiddle i nie działa tak jak powinno to wtedy mamy gotowy materiał na pytanie na StackOverflow. Nie możemy oczekiwać że obcy ludzie będą nam pomagać jeśli najpierw sami sobie nie pomogliśmy. Jeśli wrzucimy linka z kodem do uruchomienia na JSFiddle to każdy może na własne oczy zobaczyć co jest grane. I na przykład odpowiedzieć nam poprawioną wersją kodu.

Historia zmian

Nasz kod możemy wersjonować lub forkować, nawet bez zalogowania się.

TypeScript – pierwsze kroki

Posted on Updated on

Piszę w Angularze 1.5 korzystając z TypeScript. Adoptuję TypeScript. Opiszę rzeczy które mi się przydarzyły przydarzają.

  • Update EcmaScript, z es5 na es6. Więcej fajnych rzeczy można wykorzystać np ‘let’ i ‘const’. Trzeba było całkowicie wyrzucić plik es6-promise.d.ts., po prostu toole czasem mają problem i R# trzeba explicite ustawić wersję TS z której korzystamy, rozwiazanie: http://stackoverflow.com/questions/34127195/false-positive-lexical-declarations-require-ecmascript-6-and-typescript-1-x-f
  • Korzystanie ‘let‘ vs ‘var‘. Let daje name block scope zamiast function scope (var). Jest to bardziej naturalne i unika się wielu problemów. Nigdy nie stosować ‘var’.
  • Korzystanie ‘const‘ vs ‘let‘. Const nie jest immutable w ten sposób w jaki rozumiemy to z języków funkcyjnych. Jedyne przed czym chroni to powtórne przypisanie czegoś do stałej, ale już wszystkie jej właściwości zmieniamy do woli. Używam ‘let’ do obiektów i tablic, natomiast ‘const’ do typów prymitywnych. Inspiracja How much should I be using ‘let’ vs ‘const’ in ES6? . Trzeba też wyłączyć sugerowanie let->const w R# czy tam VS.
  • Konwencje nazewnicze: http://stackoverflow.com/questions/15748734/angular-js-naming-conventions-camelcase-and-pascalcase, PascalCase (z Wielkiej) dla Controllerów i innych które mają konstruktor i będa instancjonowane poprzez new – jest to zgodne z ogólną praktyką w JS. Pozostałe camelcase (z małej).
  • git i traktowanie *.ts jako nietekstowych
  • Konwencje i sposoby organizacji kodu z https://github.com/toddmotto/angular-styleguide
  • controllerAs ‘vm’ syntax, opisane w rozdziale o kontrollerach z poprzedniego punktu, ale jest to bardzo ważne więc powtarzam
  • należy unikać przypisywania zmiennych do i ze $scope (co rozwiązują powyższe punkty), jeśli już jednak nie mamy innych możliwości to warto “przetypować” sobie wszystkie zmienne od razu. Np
    this.controller = function ($scope) {
        let article: ArticleViewModel = $scope.article;
        let articleLink: ArticleLinkViewModel = $scope.articleLink;
        
        // typesafe using of variables
    }
    

Double vs single quotes – jakie ciapki w TypeScript/JavaScript

Posted on

W HTMLu zawsze podwójne:

href="/edit/2" class="btn btn-primary"

W JSON zawsze podwójne:

{name: "Marek"}

Chyba będę w JS poczytał z pojedynczych. Większość przykładów i kodu który ściągam korzysta właśnie z pojedynczych cudzysłowów (ciapków).
Dzięki temu też można w takich pojedynczych ciapkach pisać kod html który będzie miał podwójne ciapki:

let element = '<div class="wide"><a href="/edit">Edit</a></div>';

Jak to rozwiązał team rozwijający TypeScripta

Why use double quotes for strings
i dwie najciekawsze odpowiedzi:

But to specifically answer your question, we occasionally work in languages other than TypeScript. All those languages either require double quotes for strings (e.g. C#, C++, F#) or at least allow double quotes for strings (e.g. Python, Ruby). It’s easier not to ask people to shift their muscle memory when switching back and forth between languages.

One of the most common head-scratching problems with JSON is “why can’t my JSON file be parsed?” and an hour later you’ll find out single-quoted strings aren’t part of the JSON standard.

So double quotes have the least cognitive burden for us on the team. Hope that answers your question!

we decided to ban single quotes after a day of full text searching for
“width” in code and not being able to find it because it was written ‘width’

Niuanse JavaScript (zaliczone problemy)

Posted on Updated on

Na bazie doświadczeń z Agnularem 1.x

Wszystkie url kierujące do przeglądarki (np WebApi, linki) powinny się rozpoczynać od slasha (‘/’)

Markup który się wygeneruje w danej kolumnie przy korzystaniu z DataTables:

"render": function (data) {
    return '<a href="/items/' + data + '">' + data + '</a>';
}

Jeśli zapomnimy o slashu (href=”items/’ …) a jesteśmy na stronie localhost:8080/users to jedne przegląrki wygenerują adres localhost:8080/items/4 a inne (IE – może tylko w niektórych wersjach) wygenerują adres localhost:8080/users/items/4.

Podobnie przy odpytywaniu api:

P
$http.get('/api/items').success( // ...