Useful JavaScript / TypeScript Techniques

I had a lot of technical learning through code review this week. It's been over 2 years since I started JavaScript and I'm still very new to TypeScript. As a beginner, I've been trying to make something work, but often ignored to learn some of basics. I haven't felt the strong need of these techniques that I'm about to share. I think it's very useful to write better code.

Using import / export

JavaScript has many different forms of import / export. Although I can easily find the documentation how to use it, it's hard to remember at the beginning, then I started to understand through experiences. My very first question was when to use export const vs. export default. Here are differences.

• You can export multiple element using export const and element name cannot be changed
• You can export only one element using export default and the name can be changed

Here's matching export and import

export default Element = () => ...

import Element from './Element'
import MyName from './Element'

export const Element = () => ...

import { Element } from './Element'  //It works
import Element from './Element'      //Return empty object

Also you will face a situation that you want to use the same name for different modules. I had the exact case that I need to create a record in DNS module and database. Here's how you can use the same name while avoiding name conflict.

import * as dns from './dnsModule'
import * as db from './database'

//You can use same name methods as below
dns.createRecord()
db.createRecord()

I often use long descriptive function names. But I think the function names are better when they are concise and intuitive as possible. In above case, it does the same action create a record in different modules. Technically they are not the same thing, but it's easily understandable and intuitive for anyone with basic knowledge of programming.

Reducing parameters by passing object

I'm familiar with creating a class or an object in other languages like Java, C++, etc. I learned that TypeScript makes this much easier. You can declare a type by using keyword interface or type. I like the convenience that I can make some of properties optional and I can combine two different interfaces.

interface Engine {
  displacement: number
  fuelType: string
}

interface Wheel {
  size: number
  material?: string     //Optional property
}

type Car = Engine & Wheel;   //Car has all of Engine and Wheel properties

You can find more examples of using type and interface in this article. Official TypeScript website provides playground to practice how it works. type vs interface in TypeScript.

Conclusion

You can practice coding on your own, but I think learning is faster when I work in a company or participate in open source community. It's obvious that I can't have any advice if I work alone. Looking at other's code is very helpful too. I'm looking forward to next contribution to Starchart project.