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.
Top comments (0)