Hi, there!

vite.config.ts  import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' const pathResolve = (dir: string ): any => resolve(__dirname, '.' , dir) export default defineConfig({ resolve: { alias: [ { find: "@/" , replacement: pathResolve( 'src' ) + '/' , }, ], }, plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: `@ import "${pathResolve(" src ")}/assets/scss/variables.scss" ;` }, less: { javascriptEnabled: true , additionalData: `@ import "${pathResolve('src')}/assets/less/variables.less" ;` } }, }, }) tsconfig.json { " compilerOptions ": { " target ": "esnext" , " useDefineForClassFields ": true , " module ": "esnext" , " moduleResolutio...

1. install yarn add -D vitest yarn add -D @vue/test-utils 2. create a file in the root folder #index.test.ts import { expect, test } from 'vitest' test( 'hello vitest' , () => { expect( 1 ).toBe( 2 ) }) or import { describe, expect, test } from 'vitest' import { mount } from '@vue/test-utils' import testComponent from './test.vue' describe( 'vitest test' , () => { test( 'test the rendering' , () => { expect(testComponent).toBeTruthy() const wrapper = mount(testComponent) expect(wrapper.text()).toContain( 'hello' ) expect(wrapper.element).toMatchSnapshot() }) }) 3. change vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import * as path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '/@' : path.resolve(__dirname, './src' ), }, }, ...

for index in [1,2,3] for value of [1,2,3] Did you notice that for ... in ... is different than for ... of ... in javascript?  https://www.tutorialsteacher.com/typescript/for-loop ​

For class component interface CounterProps { message: string ; }; interface CounterState { count: number ; }; class Counter extends React.Component<CounterProps, CounterState> { state: CounterState = { count: 0 }; render() { return ( < div > {this.props.message} {this.state.count} </ div > ); } } For function component  import React, { FunctionComponent } from 'react' ; // importing FunctionComponent interface ColumnProps { text: string } export const Column: FunctionComponent<ColumnProps> = (properties) => { return ( < div > {properties.text} </ div > ) } Video Tutorial https://youtu.be/UhyL-yfTSaE ​

Install yarn https://classic.yarnpkg.com/en/docs/install/ Install parcel https://parceljs.org/getting_started.html Install svg.js yarn add @svgdotjs/svg.js Folder tree ├── package.json ├── src │ ├── index.html │ └── index.ts package.json { " scripts ": { " serve ": "parcel serve src/index.html --port 8000" , " build ": "parcel build index.html --out-dir build" } , " dependencies ": { " @svgdotjs/svg.js ": "^3.0.16" } , " devDependencies ": { " typescript ": "^4.1.2" } } index.html < html > < body > < div id = "drawing" > </ div > < script src = "./index.ts" > </ script > </ body > </ html > index.ts import { SVG } from '@svgdotjs/svg.js' var draw = SVG().addTo( '#drawing' ) , rect = draw.rect( 100 , 100 ).fill( '#f07' ) ser...