详解Vue3.0 前的 TypeScript 最佳入门实践

npm install -g @vue/cli
# OR
yarn global add @vue/cli

<template>
 <div class="hello">
 <h2>{{ msg }}</h2>
 <!-- 省略 -->
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

// 数字，二、八、十六进制都支持
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;

// 字符串，单双引都行
let name: string = "bob";
let sentence: string = `Hello, my name is ${ name }.

// 数组，第二种方式是使用数组泛型，Array<元素类型>：
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

let u: undefined = undefined;
let n: null = null;

const messyArray = [' something', 2, true, undefined, null];
const tuple: [number, string, string] = [24, "Indrek" , "Lasn"]

// 默认情况从0开始为元素编号，也可手动为1开始
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

let colorName: string = Color[2];
console.log(colorName); // 输出'Green'因为上面代码里它的值是2

let person: any = "前端劝退师"
person = 25
person = true

throw new Error(message)
return error("Something failed")
while (true) {} // 存在无法达到的终点

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;

function getLength(something: string | number): number {
 return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

function getLength(something: string | number): number {
 if ((<string>something).length) {
 return (<string>something).length;
 } else {
 return something.toString().length;
 }
}

function gen_func1<T>(arg: T): T {
 return arg;
}
// 或者
let gen_func2: <T>(arg: T) => T = function (arg) {
 return arg;
}

gen_func1<string>('Hello world');
gen_func2('Hello world'); 
// 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。

// 方法一：带有any参数的方法
function any_func(arg: any): any {
 console.log(arg.length);
		return arg;
}

// 方法二：Array泛型方法
function array_func<T>(arg: Array<T>): Array<T> {
	 console.log(arg.length);
		return arg;
}

interface Generics_interface<T> {
 (arg: T): T;
}
 
function func_demo<T>(arg: T): T {
 return arg;
}

let func1: Generics_interface<number> = func_demo;
func1(123); // 正确类型的实际参数
func1('123'); // 错误类型的实际参数

interface User {
 name: string
 age: number
}

type User = {
 name: string
 age: number
};

interface SetUser {
 (name: string, age: number): void;
}
type SetUser = (name: string, age: number): void;

interface Name { 
 name: string; 
}
interface User extends Name { 
 age: number; 
}

type Name = { 
 name: string; 
}
type User = Name & { age: number };

type Name = { 
 name: string; 
}
interface User extends Name { 
 age: number; 
}

interface Name { 
 name: string; 
}
type User = Name & { 
 age: number; 
}

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

type StringOrNumber = string | number; 
type Text = string | { text: string }; 
type NameLookup = Dictionary<string, Person>; 
type Callback<T> = (data: T) => void; 
type Pair<T> = [T, T]; 
type Coordinates = Pair<number>; 
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface User {
 name: string
 age: number
}

interface User {
 sex: string
}

/*
User 接口为 {
 name: string
 age: number
 sex: string 
}
*/

interface Person {
 name: string;
 age?: number;
 gender?: number;
}

interface User {
 readonly loginName: string;
 password: string;
}

interface IDeveloper {
 name: string;
 age?: number;
}
// OK
class dev implements IDeveloper {
 name = 'Alex';
 age = 20;
}
// OK
class dev2 implements IDeveloper {
 name = 'Alex';
}
// Error
class dev3 implements IDeveloper {
 name = 'Alex';
 age = '9';
}

 class A extends B implements C,D,E

// shims-tsx.d.ts
import Vue, { VNode } from 'vue';

declare global {
 namespace JSX {
 // tslint:disable no-empty-interface
 interface Element extends VNode {}
 // tslint:disable no-empty-interface
 interface ElementClass extends Vue {}
 interface IntrinsicElements {
 [elem: string]: any;
 }
 }
}

// shims-vue.d.ts
declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

declare namespace D3{
 export interface Selectors { ... }
}
declare var d3: D3.Base;

class Animal {
 private name: string;
 constructor(theName: string) {
 this.name = theName;
 }
}

let a = new Animal('Cat').name; //错误，‘name'是私有的

class Animal {
 protected name: string;
 constructor(theName: string) {
 this.name = theName;
 }
}

class Rhino extends Animal {
 constructor() {
 super('Rhino');
 }  
 getName() {
 console.log(this.name) //此处的name就是Animal类中的name
 }
} 

function buildName(firstName: string, lastName?: string) {
 return firstName + ' ' + lastName
}

// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName")
// 正确演示
buildName("firstName", "lastName")

let s = e!.name; // 断言e是非空并访问name属性

 import Vue from 'vue'

 const Component = Vue.extend({
 	// type inference enabled
 })

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }
}

<template>
 <div class="hello">
 <h2>{{ msg }}</h2>
 <!-- 省略 -->
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

test(f){
 console.log("before ...");
 f()
		console.log("after ...");
 }

@test
func(){
	console.log("func was called");
}

import {componentA,componentB} from '@/components';

export default {
	components: { componentA, componentB},
	props: {
 propA: { type: Number },
 propB: { default: 'default value' },
 propC: { type: [String, Boolean] },
 }
 // 组件数据
 data () {
 return {
 message: 'Hello'
 }
 },
 // 计算属性
 computed: {
 reversedMessage () {
 return this.message.split('').reverse().join('')
 }
 // Vuex数据
 step() {
 	return this.$store.state.count
 }
 },
 methods: {
 changeMessage () {
 this.message = "Good bye"
 },
 getName() {
 	let name = this.$store.getters['person/name']
 	return name
 }
 },
 // 生命周期
 created () { },
 mounted () { },
 updated () { },
 destroyed () { }
}

import { Component, Vue, Prop } from 'vue-property-decorator';
import { State, Getter } from 'vuex-class';
import { count, name } from '@/person'
import { componentA, componentB } from '@/components';

@Component({
 components:{ componentA, componentB},
})
export default class HelloWorld extends Vue{
	@Prop(Number) readonly propA!: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC!: string | boolean | undefined
 
 // 原data
 message = 'Hello'
 
 // 计算属性
	private get reversedMessage (): string[] {
 	return this.message.split('').reverse().join('')
 }
 // Vuex 数据
 @State((state: IRootState) => state . booking. currentStep) step!: number
	@Getter( 'person/name') name!: name
 
 // method
 public changeMessage (): void {
 this.message = 'Good bye'
 },
 public getName(): string {
 let storeName = name
 return storeName
 }
	// 生命周期
 private created ()：void { },
 private mounted ()：void { },
 private updated ()：void { },
 private destroyed ()：void { }
}

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
 router,
 store,
 render: (h) => h(App),
}).$mount('#app');

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// 新模块
import i18n from './i18n';

Vue.config.productionTip = false;

new Vue({
 router, 
 store, 
 i18n, // 新模块
 render: (h) => h(App),
}).$mount('#app');

// 声明全局方法
declare module 'vue/types/vue' {
 interface Vue {
 readonly $i18n: VueI18Next;
 $t: TranslationFunction;
 }
}

$ npm i axios vue-axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.axios.get(api).then((response) => {
 console.log(response.data)
})

this.axios.get(api).then((response) => {
 console.log(response.data)
})

this.$http.get(api).then((response) => {
 console.log(response.data)
})

-api
 - main.ts // 实际调用
-utils
 - request.ts // 接口封装

import * as axios from 'axios';
import store from '@/store';
// 这里可根据具体使用的UI组件库进行替换
import { Toast } from 'vant';
import { AxiosResponse, AxiosRequestConfig } from 'axios';
 
 /* baseURL 按实际项目来定义 */
const baseURL = process.env.VUE_APP_URL;

 /* 创建axios实例 */
const service = axios.default.create({
 baseURL,
 timeout: 0, // 请求超时时间
 maxContentLength: 4000,
});

service.interceptors.request.use((config: AxiosRequestConfig) => {
 return config;
}, (error: any) => {
 Promise.reject(error);
});

service.interceptors.response.use(
 (response: AxiosResponse) => {
 if (response.status !== 200) {
  Toast.fail('请求错误！');
 } else {
  return response.data;
 }
 },
 (error: any) => {
 return Promise.reject(error);
 });
 
export default service;

export interface AjaxResponse {
 code: number;
 data: any;
 message: string;
}

// api/main.ts
import request from '../utils/request';

// get
export function getSomeThings(params:any) {
 return request({
 url: '/api/getSomethings',
 });
}

// post
export function postSomeThings(params:any) {
 return request({
 url: '/api/postSomethings',
 methods: 'post',
 data: params
 });
}

<template>
	<div class="blogpost">
		<h3>{{ post.title }}</h3>
		<p>{{ post.body }}</p>
		<p class="meta">Written by {{ post.author }} on {{ date }}</p>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

// 在这里对数据进行类型约束
export interface Post {
	title: string;
	body: string;
	author: string;
	datePosted: Date;
}

@Component
export default class HelloWorld extends Vue {
	@Prop() private post!: Post;

	get date() {
		return `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}`;
	}
}
</script>

<style scoped>
h3 {
 text-decoration: underline;
}
p.meta {
 font-style: italic;
}
</style>

<template>
 <div class="home">
 <img alt="Vue logo" src="../assets/logo.png">
 	<HelloWorld v-for="blogPost in blogPosts" :post="blogPost" :key="blogPost.title" />
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld, { Post } from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
 components: {
 HelloWorld,
 },
})
export default class Home extends Vue {
 private blogPosts: Post[] = [
 {
  title: 'My first blogpost ever!',
  body: 'Lorem ipsum dolor sit amet.',
  author: 'Elke',
  datePosted: new Date(2019, 1, 18),
 },
 {
  title: 'Look I am blogging!',
  body: 'Hurray for me, this is my second post!',
  author: 'Elke',
  datePosted: new Date(2019, 1, 19),
 },
 {
  title: 'Another one?!',
  body: 'Another one!',
  author: 'Elke',
  datePosted: new Date(2019, 1, 20),
 },
 ];
}
</script>