Useful JavaScript / TypeScript Techniques
Tags: opensource, typescript, starchart, senecaosd700
Published: 2023-02-11 06:04:09

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`
```js
export default Element = () => ...

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

```js
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. 

```js
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. 

```js
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](https://blog.logrocket.com/types-vs-interfaces-in-typescript/). Official TypeScript website provides playground to practice how it works. [type vs interface in TypeScript](https://www.typescriptlang.org/play#example/types-vs-interfaces).

### 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.