Search for a command to run...
Miguel is a Principal Engineer and the author of the “Serverless Security” book. He has worked on multiple serverless projects as a developer and security engineer, contributed to open-source serverless projects, and worked on large military systems in various engineering roles.
No comments yet. Be the first to comment.
Protect your system from vulnerabilities
How I saved my company $1 million
This YouTube video series provides quick overviews of the top 10 cybersecurity risks for serverless applications. Each video covers the risk and some recommendations on how to address it. Why is the OWASP Serverless Top 10 important? In this video, I...
![Overview of the OWASP Serverless Top 10 [videos]](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1636408504092%2FBcNttK9q2.png&w=3840&q=75)
A little over one year ago, I published my first book thanks to Apress and author Nihad Hassan. I am in a cybersecurity writing group with Nihad, where he shared he had published his 4th book; this was back in 2019. I was impressed by his accomplishm...
You may have heard, “If you build it, they will come.” Have you heard, “If you build it, I will break it?” This is a skill I developed over my career to build better systems. It is a skill that took me a while to learn I had. Shortly before I graduat...
Miguel's Blog · Serverless · Security
49 posts
Miguel A. Calles is the author of the Serverless Security book, and a Cybersecurity engineer who works on serverless and cloud computing projects.
Using TypeScript in Nuxt or Vue can be so complex. I only want to do type checking! Nothing more. It took me so long to find out how to enable type checking in Nuxt, so I will share what I discovered (and you can apply these findings in Vue too).
It should have been obvious. In the initial web days, we had to set the script tag’s language to JavaScript explicitly. JavaScript was not the default language in the early days. Since then, the browser now assumes the script tag is always JavaScript.
To enable TypeScript in the .vue page, change the script language.
<script lang="ts">
const myVar: string = 'hello'
</script>
We can now use TypeScript. Simple.
TypeScript is very good at catching errors. You mess with the types, you get an error. We should, therefore, define what the data object should look like.
<script lang="ts">
interface Data {
var1: boolean;
}
export default {
data(): Data {
var1: true,
}
}
</script>
Now, any time we update the data dynamically or update our code, we will have type checking.
Vue pages allow us to use the this variable to access Nuxt/Vue properties and the data properties. We should define an interface to allow the use this of our functions.
<script lang="ts">
interface Data {
var1: boolean;
}
interface This extends Data {
[key: string]: any;
}
export default {
data(): Data {
var1: true,
},
created(this: This) {
this.var1 = false;
}
}
</script>
We can now use this in Vue lifecycle hooks such as created. Since this has so many properties, we needed to add a generic key definition to account for all the other properties.
If we have methods, we can choose to make sure they accept the correct input and output types.
<script lang="ts">
interface Data {
var1: boolean;
}
interface Methods {
onCreated(): void
}
interface This extends Data, Methods {
[key: string]: any;
}
export default {
data(): Data {
var1: true,
},
created(this: This) {
this.var1 = false;
console.log(this.onCreated(true))
},
methods: <Methods>{
onCreated(this: This, val: boolean): string {
return `my val = ${val}`
}
}
}
</script>
The methods get added to this and that is why we extended the This interface.
I assumed you already have the tsconfig.json and all the other necessary items to add the proper TypeScript npm packages to keep this post short and simple. The approach I described is non-conventional, but it keeps TypeScript simple in your Vue pages. Furthermore, the recommended Nuxt and Vue approaches do not show you how to type check the data and methods objects.
I hope you found this post useful.
Originally published on Medium.com
Photo by Photos Hobby on Unsplash