前端技术分享

// ts
let obj = {
  a: 'obj',       // 标量
  b: () => {},    // 函数
  c: [1, 2, ,3],  // 数组
  d: { key01: 'a', key02: 'b'  }  // 对象
}
console.log(obj.a)    // obj
console.log(obj.b())  // 我是函数
console.log(obj.c)    // [1, 2, 3]
console.log(obj.d)    // { key01: 'a', key02: 'b'  }

// 编译成js后
var obj = {
    a: 'obj', // 标量
    b: function () { return '我是函数'; }, // 函数
    c: [1, 2, 3], // 数组
    d: { key01: 'a', key02: 'b' } // 对象
};
console.log(obj.a);
console.log(obj.b());
console.log(obj.c);
console.log(obj.d);

const person: { name: string, age: number } = { name: '老王', age: 30 }

const personFn = (person: { name: string, age: number }) => {
  console.log(`姓名：${person.name}，年龄：${person.age}`)
}
personFn({ name: '老王', age: 30 }) // 姓名：老王，年龄：30

interface Person {
  name: string,
  age?: number
}
const personFn = (person: Person) => {
  if (person.age !== undefined) console.log(`姓名：${person.name}，年龄：${person.age}`)
  else console.log(`姓名：${person.name}`)
}
personFn({ name: '老王' }) // 姓名：老王

type Person = {
  name: string,
  age? : number
}
const personFn = (person: Person) => {
  if (person.age !== undefined) console.log(`姓名：${person.name}，年龄：${person.age}`)
  else console.log(`姓名：${person.name}`)
}
personFn({ name: '老王' }) // 姓名：老王

const personFn = (person: { name: string, age?: number }) => {
  console.log(`姓名：${person.name}，年龄：${person.age}`)
}
personFn({ name: '老王' }) // 姓名：老王，年龄：undefined

const personFn = (person: { name: string, age?: number }) => {
  if (person.age !== undefined) console.log(`姓名：${person.name}，年龄：${person.age}`)
  else console.log(`姓名：${person.name}`)
}
personFn({ name: '老王' }) // 姓名：老王

type Person = {
  name: string,
  readonly age: number,
  readonly sex: string
}
const person: Person = {
  name: '老王',
  age: 30,
  sex: '男'
}
person.name = '翠花'
person.age = 18   // 报错，只读属性一旦被赋值就不能再次修改
person.sex = '女' // 报错，只读属性一旦被赋值就不能再次修改

interface personInfo {
  [key: string]: string | number
}
const person_info: personInfo = {
  name: '老王',
  sex: '男'
}
console.log(person_info)  // { name: '老王', sex: '男' }

interface personInfo {
  readonly [key: string]: string | number
}
const person_info: personInfo = {
  name: '老王',
  age: 30,
  sex: '男'
}
person_info.age = 18  // 报错

interface personInfo {
  [key: string]: string | number
}
const person_info: personInfo = {
  name: '老王',
  age: 30,
  sex: '男'
}
console.log(person_info)  // { name: '老王', age: 30, sex: '男' }

interface Person<T> {
  phone: T
}
const person01: Person<number> = {
  phone: 13222222222
}
const person02: Person<string> = {
  phone: '020-1111111'
}
console.log(person01) // { phone: 13222222222 }
console.log(person02) // { phone: '020-1111111' }

let phone: number | string = 13222222222
// 或者
let phone: number | string = '020-123456'

function savePhone(phone: number | string) {
  if (typeof phone === 'number') console.log('保存了手机号码')
  else if (typeof phone === 'string') console.log('保存了座机')
}
savePhone(13222222222)  // 保存了手机号码
savePhone('020-123456') // 保存了座机

interface Person {
  name: string,
  age: number
}
interface Sex {
  sex: '男' | '女'
}
const sexFn = (info: Person & Sex) => {
  console.log(info.name)
  console.log(info.age)
  console.log(info.sex)
}
sexFn({ name: '老王', age: 30, sex: '男' })
sexFn({ name: '翠花', age: 18, sex: '女' })

interface Cat {
  run: () => void
}
interface Fish {
  swim: () => void
}

// 以下方法会报错，虽然猫和鱼都是动物，但是鱼并不会奔跑，在动物调用时时没有run这个方法的。
// const isCat = (animal: Cat | Fish): boolean => {
//   if (typeof animal.run === 'function') return true
//   else return false
// }

// 所以应该在动物调用时给这个动物指定一个run的方法，如下：
const isCat = (animal: Cat | Fish): boolean => {
  if (typeof (animal as Cat).run === 'function') return true
  else return false
}

const cat: Cat = {
  run() {}
}
console.log(isCat(cat))   // true

const fish: Fish = {
  swim() {}
}
console.log(isCat(fish))   // false

const isCat = (animal: Cat | Fish): boolean => {
  if (typeof (<Cat>animal).run === 'function') return true
  else return false
}

const a = 1
a = 2       // 报错
const b = [2, 3]
b.push(4)   // 通过

let c = 5 as const
c = 6       // 报错

const d = [7, 8] as const
d.push(9)   // 报错，因为此时变量d已经被断言字面量为[7, 8]，数据无法再做任何修改

// ts
function eFn(f: any): string {
  return f as string
}

const g = eFn(true)
console.log(g)  // true

// 编译成js后
function eFn(f) {
    return f;
}
var g = eFn(true);
console.log(g); // true

// ts
let a: boolean = true
let b: boolean = false

// 编译成js后
var a = true;
var b = false;

// ts
let num_2: number = 11111101000       // 二进制
let num_8: number = 3750              // 八进制
let num_10: number = 2024             // 十进制
let num_16: number = 7e8              // 十六进制
let num_NaN: number = NaN             // NaN
let num_Infinity: number = Infinity   // 无穷大

// 编译成js后
var num_2 = 11111101000;
var num_8 = 3750;
var num_10 = 2024;
var num_16 = 7e8;
var num_NaN = NaN;
var num_Infinity = Infinity;

// ts
let str_01: string = '我是字符串'
let str_02: string = `你好，${str_01}`
console.log(str_02)   // 你好，我是字符串

// 编译成js后
var str_01 = '我是字符串';
var str_02 = "\u4F60\u597D\uFF0C".concat(str_01);
console.log(str_02);

// ts
let arr_01:number[] = [1, 2, 3]
let arr_02:string[] = ['a', 'b', 'c']
// let arr_03:boolean[] = [false, true, 1, 'a']  // 这样会报错，因为布尔类型数组中出现了数字和字符串，这是不允许的

// 编译成js后
var arr_01 = [1, 2, 3];
var arr_02 = ['a', 'b', 'c'];

// ts
let arr_04: Array<number> = [1, 2, 3]
let arr_05: Array<string> = ['a', 'b', 'c']

// 编译成js后
var arr_04 = [1, 2, 3];
var arr_05 = ['a', 'b', 'c'];

// ts
let arr_06: number[][] = [[1, 2], [3, 4]]

// 编译成js后
var arr_06 = [[1, 2], [3, 4]];

// ts
interface interfaceArr {
  [key: number]: string
}
// 索引key的类型为数字类型时才可使用
let arr_07: interfaceArr = ['a', 'b', 'c']

// 编译成js后
var arr_07 = ['a', 'b', 'c'];

// ts
let arr_08: any[] = [1, 'a', true, { b: '2', c: 3 }]

// 编译成js后
var arr_08 = [1, 'a', true, { b: '2', c: 3 }];

// ts
let null_01: null = null

// 编译成js后
var null_01 = null;

// ts
let undefined_01: undefined = undefined

// 编译成js后
var undefined_01 = undefined;

let never_01: number & string = 1     // let never_01: never

// ts
function voidFn(): void {
  console.log('我是空值函数')
}

// 编译成js后
function voidFn() {
  console.log('我是空值函数');
}

// ts
let any_01: any = 123
any_01 = 'abc'
any_01 = true
any_01 = [1, 2, 3]

// 编译成js后
var any_01 = 123;
any_01 = 'abc';
any_01 = true;
any_01 = [1, 2, 3];

// ts
let unknown_01: unknown
unknown_01 = 1
unknown_01 = 'a'
unknown_01 = true
unknown_01 = [1, 'a', true]
unknown_01 = { a: 1, b: 'c' }
unknown_01 = null
unknown_01 = undefined
unknown_01 = Symbol('type')

// 编译成js后
var unknown_01;
unknown_01 = 1;
unknown_01 = 'a';
unknown_01 = true;
unknown_01 = [1, 'a', true];
unknown_01 = { a: 1, b: 'c' };
unknown_01 = null;
unknown_01 = undefined;
unknown_01 = Symbol('type');

// any，可以正常调用属性和方法，哪怕是未知的属性和方法也可以调用
let any_02: any = { a: 1, b: (): number => 2 }
any_02.a
any_02.b()
any_02.e
any_02.f()

// unknown，无法调用属性和方法
let unknown_02: unknown = { c: 3, d: (): number => 4 }
unknown_02.c
unknown_02.d()

// any是最宽的类型
type any_03 = unknown & any  // any

// 在终端执行以下代码安装typescript
npm install typescript -g

let a: number = 1
let b: boolean = false

var a = 1;
var b = false;

To install it, you can run: npm install --save vue-router

npm install axios

axios.get(url)
	.then((res) => { })
	.catch((err) => {  })

<template>
    <div class="v-news content">
        <ul>
            <li v-for="item in lists" :key="item.id">
                <router-link :to="{ name: 'detail', params: { id: item.time } }">{{ item.title }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
// 引入 axios 
import axios from 'axios';

export default {
    name: 'v-news',
    desc: '新闻列表',
    data() {
        return {
            lists: []
        }
    },
    created() {
        axios.get('/news/lists')
            .then((res) => {
                this.lists = res.data;
            })
    }
}
</script>

// 引入mockjs
import Mock from 'mockjs';
// Mock.Random 是一个工具类，用于生成各种随机数据
const Random = Mock.Random;
let data = [];
for(let i = 0; i < 10; i ++) {
    data.push({
        title: Random.title(),
        time: Random.datetime()
    })
}

// 模拟新闻列表
Mock.mock('/news/lists', 'get', data);

import Vue from 'vue'
import App from './App.vue'

// 引入我们配置好的路由
import router from './router';

Vue.config.productionTip = false

// 引入样式
import './assets/css/app.css';

// 引入 mock 模拟数据
require('./mock');

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

const router = new VueRouter({
	routes: [
		{
			path: '/user/:userId',
			name: 'user',
			component: User
		}
	]
})

.
|-- node_modules
|-- public
|   |-- favicon.ico
|   |-- index.html
|-- src
|   |-- assets
|   |   |-- css
|   |   |   |-- app.css
|   |-- components
|   |   |   |-- content
|   |   |   |   |-- v-about.vue
|   |   |   |   |-- v-index.vue
|   |   |   |   |-- v-news-detail.vue
|   |   |   |   |-- v-news.vue
|   |   |-- HelloWorld.vue
|   |   |-- v-header.vue
|   |   |-- v-success.vue
|   |-- router
|   |   |-- index.js
|   |-- App.vue
|   |-- main.js
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
.

// 引入 Vue
import Vue from 'vue';
// 引入 vue-router
import VueRouter from 'vue-router';
// 安装使用 vue-router
Vue.use(VueRouter);
// 引入首页
import vIndex from '../components/content/v-index.vue';
// 开始使用 vue-router
let routes = new VueRouter({
routes: [
    { 
        path: '/', 
        name: 'index', 
        component: vIndex 
    },
    { 
        path: '/about', 
        name: 'about', 
        component: () => import(/* webpackChunkName: "about" */ '../components/content/v-about.vue') 
    },
    { 
        path: '/success', 
        component: () => import(/* webpackChunkName: "success" */ '../components/v-success.vue') 
    },
    { 
        path: '/news', 
        name: 'news', 
        component: () => import(/* webpackChunkName: "news" */ '../components/content/v-news.vue') 
    },
    { 
        path: '/news/:id', 
        name: 'detail', 
        component: () => import(/* webpackChunkName: "news" */ '../components/content/v-news-detail.vue') 
    },
]
});
// 提供接口给外面使用
export default routes;

<template>
    <div class="v-header">
        <ul class="menus">
            <li 
                class="menu" 
                v-for="item in menus" 
                :key="item.id"
            >
                <router-link :to="{ name: item.path }">{{ item.name }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'v-header',
    desc: '头部信息',
    data() {
        return {
            menus: [
                { id: 1, name: '首页', path: 'index' },
                { id: 2, name: '新闻', path: 'news' },
                { id: 3, name: '关于', path: 'about' },
            ]
        }
    }
}
</script>

<style scoped>
.v-header {
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 3px 3px 3px #ddd;
    color: #333;
}
.menus {
    list-style: none;
    padding: 0 20px;
    overflow: hidden;
}
.menu {
    float: left;
    padding: 0 20px;
    height: 70px;
    line-height: 80px;
    transition: .3s;
}
.menu:hover {
    cursor: pointer;
    color: #0051ff;
    background-color: #efefef;
}
</style>

<template>
    <div class="v-news content">
        <ul>
            <li v-for="item in lists" :key="item.id">
                <router-link :to="{ name: 'detail', params: { id: item.id } }">{{ item.title }}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'v-news',
    desc: '新闻列表',
    data() {
        return {
            lists: [
                { id: 1, title: '新闻标题 1' },
                { id: 2, title: '新闻标题 2' },
                { id: 3, title: '新闻标题 3' },
                { id: 4, title: '新闻标题 4' },
                { id: 5, title: '新闻标题 5' },
                { id: 6, title: '新闻标题 6' },
            ]
        }
    }
}
</script>