<!-- * @Description: vue-property-decorator语法 vue-class-component语法 TS语法 * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-27 14:33:43 * @LastEditors: lhl * @LastEditTime: 2020-08-28 14:55:24 -->
<template>
<div class="hello">
<!-- props的数据 -->
<h1>{{ msg }}</h1>
<!-- 变量的使用 -->
<p>{{ dataMsg }} -- 初始值undefined：{{testMsg}}</p>
<!-- 组件的使用 -->
<About/>
<!-- 事件调用 -->
<button v-on:click="hello">Click点我啊</button>
<!-- ref使用 -->
<input ref="input">
<p>传过来的数据数字类型{{count}}----名字字符串必定有值：{{name}}----布尔值：{{flag}}</p>
<p>计算属性：{{newMsg}}</p>
</div>
</template>
<script lang="ts"> import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import About from "@/views/About.vue"; // 导入组件 // import { mapGetters, mapActions } from "vuex" // vuex模块
// 跟多使用方法api请移步：https://www.npmjs.com/package/vue-property-decorator
/* ts 特殊符号用法 1. 属性或参数中使用 ？：表示该属性或参数为可选项 2. 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop 3. 变量后使用 ！：表示类型推断排除null、undefined */
// 装饰器用法
@Component({ // 注册组件
components: { About } // computed: mapGetters([
// 'xx'
// ]),
// methods: mapActions([
// 'xx'
// ])
}) // Prop等价于 // props: { // msg: { // type: String // } // count: { // type: Number, // }, // name: { // default: 'default value', // }, // addr: { // type: [String, Boolean], // }, // },
export default class HelloWorld extends Vue { @Prop() private msg!: string; @Prop(Number) readonly count: number | undefined @Prop({ default: 'default value' }) readonly name!: string @Prop([String, Boolean]) readonly flag: string | boolean | undefined $refs!: { input: HTMLInputElement } dataMsg = "这就相当于vue + js的data里面的数据"; // 请注意，如果这里直接声明初始值为undefined，则class属性不会是反应性的 为了避免这种情况，您可以使用null，value或使用datahook来代替（如下）;
personObj = { name: 'ts', age: 1 } // data hook初始化值
data(){ return { testMsg: undefined } } // 监听事件 immediate: true 初始化加载一次 deep: true 对象深度监听
@Watch('personObj.name', {immediate: true, deep: true}) onChangeValue(val:string){ // todo...
console.log('watch里面的数据：' + val) // ts
} // 计算属性
get newMsg(){ return '你好Ts' + this.dataMsg } // 弹出 Hello World!
hello() { alert("Hello World!") } created() { console.log("created-1") } // Declare mounted lifecycle hook 生命周期
mounted() { console.log("mounted-2") this.$refs.input.focus() } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
<!-- * @Description: ts语法测试 * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-28 09:10:28 * @LastEditors: lhl * @LastEditTime: 2020-08-28 17:52:22 -->
<template>
<div class="ts-contanter">
<div>hello TS</div>
<p>{{msg}}</p>
<p>{{fullName}}</p>
</div>
</template>
<script lang="ts">
// 概念：ts是js的超集 // 特点：提供类型系统和es6的支持 // 优点： // 增加代码的可读性和可维护性 // 在编译阶段就发现错误，比运行时发现错误好 // 增加了编辑器和ide的功能，代码不全、接口提示、跳转到定义、重构 // 包容性、js文件可重命名为.ts文件 // 不显式的定义类型，也能自动作出类型推论、可定义一切类型、即使typescript编译报错，也可生成js文件 // 兼容第三方库，即使第三方库不是用ts写的，也可编写单独的类型文件供ts读取 // 缺点：集成到构建流程需要工作量，可能和一些库结合的不是很完美 // 安装：npm i -g typescript 执行tsc ts文件来编译会生成js文件或者ide支持
// 声明文件 // declare var 声明全局变量 // declare function 声明全局方法 // declare class 声明全局类 // declare enum 声明全局枚举类型 // declare namespace 声明（含有子属性的）全局对象 // interface 和 type 声明全局类型 // export 导出变量 // export namespace 导出（含有子属性的）对象 // export default ES6 默认导出 // export = commonjs 导出模块 // export as namespace UMD 库声明全局变量 // declare global 扩展全局变量 // declare module 扩展模块 /// 三斜线指令
import { Component, Vue } from "vue-property-decorator"; // 接口使用的一般场景
interface Person { readonly x: number; // 只读属性
firstName: string; lastName: string; [propName: string]: any; //定义了任意属性,取 string 类型,属性值取any类型
age?: number; // 设为可选属性
year: number | string; } // 接口描述一个数字数组
interface NumberArray { [index: number]: number; //只要 index 的类型是 number，那么值的类型必须是 number。
} // 接口继承 分接口继承接口 接口继承类
interface Animal { move(): void; } // 如果需要继承多个 用逗号隔开
interface Human extends Animal { name: string; age: number; } // 泛型约束
interface Lengthwise { length: number; } @Component // TsGrammerTest文件名开头需要大写
export default class TsGrammerTest extends Vue { msg = "初始值"; fullName = "mr"; created() { this.msg = this.getName("bobo"); const obj = { firstName: "lan", lastName: "tian", gender: "male", x: 8, year: "2018" }; this.fullName = this.getFullName(obj); } mounted() { let arr1: number[] = [1, 2, 3]; //数组的值只能是number类型
let arr2: any[] = ["xiao ming", 11, false]; //数组的值可以是任意类型
let arr3: NumberArray = [4, 5, 6, 7, 8]; // 接口描述数组类型
let arr4: ReadonlyArray<number> = arr1; // TypeScript具有ReadonlyArray<T>类型 确保数组创建后再也不能被修改 console.log(arr4[0] = 12) 报错
console.log(arr1, arr2, arr3, arr4); // 接口继承接口
let person: Human = { age: 18, name: "Jack", move() { console.log("move"); } }; console.log(person,'person',person.move()); // 泛型在调用时候才知道类型 或者 可以使用断言
let output1 = this.anyType<string>("哈哈String"); // type of output will be 'string'
console.log(output1,'output1') // 泛型约束
let output2 = this.loggingIdentity({length: 10, value: 3}); console.log(output2,'output2') } // 泛型使用规则：你必须把这些参数当做是任意或所有类型 也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以
anyType<T>(arg: T): T { return arg; } // 泛型约束
loggingIdentity<T extends Lengthwise>(arg: T): T { console.log(arg.length,'arg长度'); // Now we know it has a .length property, so no more error
return arg; } // 函数用法 person: string = 'Tom' 参数默认值, age ?: number 可选参数 , ...items: any[] 剩余参数
getName(person: string) { return "Hello, " + person; } // interface 用法
getFullName(person: Person) { return "Hello, " + person.firstName + " " + person.lastName + person.gender; } } </script>
