typescript Archives - CSS-Tricks

Understanding why Semantic HTML is important, as told by TypeScript

# August 15, 2018 By Chris Coyier

What a great technological analogy by Mandy Michael. A reminder that TypeScript...

makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type.

In other words, you have a variable age that you declare to be a number, the value for age has to stay a number otherwise TypeScript will yell at you. That type checking is a valuable thing that helps thwart bugs and keep code robust.

This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>.

And hey, if you're into TypeScript, it's notable it just went 3.0.

Vue + TypeScript: A Match Made in Your Code Editor

# June 27, 2018 By Vivek Patel

Vue is so hot right now and I’ve been thinking of doing a serious project with it since quite a while, so when the opportunity popped up, I hopped in. But there was a little problem — one of the requirements of the project was to write it in TypeScript. At first, I was super stressed about how I was going to ever get started on this combo, but vue-cli made it so easy.

I’d be lying if I said this ride was super smooth. There were frustrations, hours of staring at the screen and some fistbumps with my table but after working with Vue + TypeScript for over a month now, I can say it was worth it — and if I had to code another app with Vue, I wouldn’t do it without TypeScript.

(more…)

typescript vscode vue vue-cli vuex

Accessible Web Apps with React, TypeScript, and AllyJS

# November 16, 2017 By Daniel Yuschick

Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but ultimately these pursuits are done with the user's device in mind, not the user themselves and their potential disabilities or restrictions.

A responsive app should be one that delivers its content based on the needs of the user, not only their device.

Luckily, there are tools to help alleviate the learning curve of accessibility-minded development. For example, GitHub recently released their accessibility error scanner, AccessibilityJS and Deque has aXe. This article will focus on a different one: Ally.js, a library simplifying certain accessibility features, functions, and behaviors.

(more…)

a11y modal react typescript

TypeScript at Slack

# April 29, 2017 By Chris Coyier

An excellent subhead by Felix Rieseberg: How I Learned to Stop Worrying & Trust the Compiler.

I'd wager that some of the popularity of SCSS was due to that fact that any valid CSS was valid SCSS, so you could baby step into SCSS on an existing codebase fairly easily. The same is true with TypeScript:

Modern JavaScript is valid TypeScript, meaning that one can use TypeScript without changing a single line of code. This allowed us to use "gradual typing" by enabling the compiler and the static analysis early, without suspending work on critical bug fixes or new features.

And, also like SCSS, you get immediate benefit from the baby stepping. You'll find bugs right away:

... the more lines of code a human writes, the more inevitable it becomes to misspell a property, assume the parent of a nested object to always exist, or to use a non-standard error object.

What appeals to me the most though, is what TypeScript does to your IDE:

TypeScript understands which properties and methods are available on certain objects, enabling your editor to do the same. An autocomplete system that only uses words in the current document feels barbaric afterward.

slack typescript