Typescript is based on JavaScript (built from JavaScript), it is expanded on top of it, and other types are added on the basis of it, and there are also type constraints, and it supports js, because it is expanded from js, and has the characteristics of es and It supports features that es does not have (it can be regarded as an extension), and is also compatible with the js platform, but it cannot directly run .ts files (speaking of which, I thought of the scss and Less is directly written and then converted into a loader corresponding to wxss and uniapp through the vscode plug-in), ts also needs to be converted into js to run (the ts mentioned in the teacher's video cannot be executed by the js parser), ts adds some constraints , but there are configuration options to modify whether it is strict or loose, and you can choose which es version of js to compile into, which can be compatible with ie browser. TypeScript is a strongly typed version of JavaScript, and ultimately JavaScript is still run in the browser, so TypeScript does not depend on browser support, nor does it cause compatibility issues.
The biggest advantage of TypeScript, a strongly typed language, is static type checking:
1. Strong type
2. Follow ES6
3. Compiler's rigorous grammar check
1. Basic data types
1. Boolean value
let isDone: boolean = false;
2. Number
let amount: number = 6;
3. String
const str =ref<string>("abc")
const str = ref("abc")
4. Automatically judge the change according to the value type What is the type variable
let nickname: string = Gene;
let age: number = 37;
let sentence: string = `Hello, my nickname is ${ nickname }.
I'll be ${ age + 1 } years old next month.` ;
5. Arrays
In the first type, [] can be added after the element type, indicating an array composed of elements of this type:
let list: number[] = [1, 2, 3];
The second way is to use array generics, Array<element type>
let list: Array<number> = [1, 2, 3];
对象
let foo: Object = {
name: ‘Jack’,
age: 18
}
Any
Sometimes, we want to specify a type for variables whose type is not clear at the programming stage, then we can use any type to mark these variables. any means any type
Void
The void type is like the opposite of the any type, which means that there is no type.
function
function add(n1:string,n2:number): void{}
interface
Define the interface:
//Declare an
interface interface Iuser{ name:string, age:number, pet:undefined|string } const list = reactive({name:“cong”,age:18,pet:“cat”})
Now let's go through an example to understand it in depth.
New component Stepcome.vue:
<template>
<span>
<button :disabled="count<=props.min" @click="countChange(-1)">-</button>
<input type="text" v-model.number="count">
<button @click="countChange(1)" :disabled="count>=props.max">+</button>
</span>
</template>
<script lang="ts" setup>
import {defineProps,ref} from "vue";
interface Iprops{
max:number,
min:number,
step:number,
value:number,
}
const props = defineProps<Iprops>()
const count = ref<number>(props.value);
function countChange(n:number):void{
count.value+=props.step*n;
}
</script>
<template>
<div class="home">
<h1>vue+ts+setup+volar</h1>
<button @click="addCount(2)">{
{count}}</button>
<div v-for=" (item,index) in list" :key="index">{
{item}}</div>
<step :value="5" :max="20" :min="1" :step="2" ></step>
</div>
</template>
<script lang="ts" setup>
//js data type number string boolean underfind null
// reference type: array object
//ts: any: any type viod: none return value interfase interface
import {ref,reactive} from "vue"
import step from "@/components/StepCom.vue"
const count = ref<number>(10);
// const num = ref(5);
// const str = ref<string>("i love your")
// const flag = ref<boolean>(true)
//Define
function function addCount(n:number):void{ count.value+=n; } //declare an interface interface Iuser{ name:string, age:number, pet:undefined|string } const list = reactive<Iuser> ({name:"cong",age:18,pet:"cat"}) </script>