typescript

往日一去不复返 發表於 2019-6-26 18:14:00

<div>
<div>
<h2 class="heading" data-id="heading-1"> 使用官方脚手架构建</h2>
<pre><code class="hljs bash copyable" lang="bash">npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码</code></pre>
新的<code>Vue CLI</code>工具允许开发者使用 <code>TypeScript</code> 集成环境创建新项目。
只需运行<code>vue create my-app</code>。
然后，命令行会要求选择预设。使用箭头键选择<code>Manually select features</code>。
接下来，只需确保选择了<code>TypeScript</code>和<code>Babel</code>选项，如下图：
 
<img class="lazyload inited loaded" alt="image-20190611163034679" width="729" height="578" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57d82715e9?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1140" data-height="904">
 
完成此操作后，它会询问你是否要使用<code>class-style component syntax</code>。
然后配置其余设置，使其看起来如下图所示。
 
<img class="lazyload inited loaded" alt="image-20190611163127181" width="742" height="588" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57d83e1974?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1140" data-height="904">
 
Vue CLI工具现在将安装所有依赖项并设置项目。
 
<img class="lazyload inited loaded" alt="image-20190611163225739" width="916" height="726" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57dd7f8c66?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1140" data-height="904"> 接下来就跑项目喇。
 
 
<img class="lazyload inited loaded" alt="image-20190611163245714" width="801" height="871" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57daeaf341?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1080" data-height="1175">
 
总之，先跑起来再说。
<h2 class="heading" data-id="heading-2">2. 项目目录解析</h2>
通过<code>tree</code>指令查看目录结构后可发现其结构和正常构建的大有不同。
 
<img class="lazyload inited loaded" alt="image-20190611163812421" width="797" height="632" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57e05c4d0f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1140" data-height="904">
 
这里主要关注<code>shims-tsx.d.ts</code>和 <code>shims-vue.d.ts</code>两个文件
两句话概括：
<ul>
<li><code>shims-tsx.d.ts</code>，允许你以<code>.tsx</code>结尾的文件，在<code>Vue</code>项目中编写<code>jsx</code>代码</li>
<li><code>shims-vue.d.ts</code> 主要用于 <code>TypeScript</code> 识别<code>.vue</code> 文件，<code>Ts</code>默认并不支持导入 <code>vue</code> 文件，这个文件告诉<code>ts</code> 导入<code>.vue</code> 文件都按<code>VueConstructor<Vue></code>处理。</li>
</ul>
此时我们打开亲切的<code>src/components/HelloWorld.vue</code>，将会发现写法已大有不同
<pre><code class="hljs bash copyable" lang="bash"><template>
<div class="hello">
<h1>{{ msg }}</h1>

</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>


<style scoped></style>
复制代码</code></pre>
至此，准备开启新的篇章 <code>TypeScript</code>极速入门和 <code>vue-property-decorator</code>
<h2 class="heading" data-id="heading-3">3. <code>TypeScript</code>极速入门</h2>
<h3 class="heading" data-id="heading-4">3.1 基本类型和扩展类型</h3>
 
<img class="lazyload inited loaded" alt="image-20190611173126273" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a57de204bb4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
<code>Typescript</code>与<code>Javascript</code>共享相同的基本类型，但有一些额外的类型。
<ul>
<li>元组 <code>Tuple</code></li>
<li>枚举 <code>enum</code></li>
<li><code>Any</code> 与<code>Void</code></li>
</ul>
<h4 class="heading" data-id="heading-5">1. 基本类型合集</h4>
<pre><code class="hljs bash copyable" lang="bash">// 数字，二、八、十六进制都支持
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;

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

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

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

复制代码</code></pre>
<h4 class="heading" data-id="heading-6">2. 特殊类型</h4>
<h5 class="heading" data-id="heading-7">1. 元组 <code>Tuple</code><img class="lazyload inited loaded" alt="image-20190611174157121" width="731" height="200" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a58028534c2?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274"></h5>
想象元组作为有组织的数组，你需要以正确的顺序预定义数据类型。
<pre><code class="hljs javascript copyable" lang="javascript">const messyArray = [' something', 2, true, undefined, null];
const tuple: = [24, "Indrek" , "Lasn"]
复制代码</code></pre>
如果不遵循为元组预设排序的索引规则，那么<code>Typescript</code>会警告。
 
<img class="lazyload inited loaded" alt="image-20190611174515658" width="476" height="177" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a580a458319?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1001" data-height="372">
 
 （<code>tuple</code>第一项应为<code>number</code>类型）
<h5 class="heading" data-id="heading-8">2. 枚举 <code>enum</code></h5>
 
<img class="lazyload inited loaded" alt="image-20190611174833904" width="586" height="160" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a580c96180f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
<code>enum</code>类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
<pre><code class="hljs bash copyable" lang="bash">// 默认情况从0开始为元素编号，也可手动为1开始
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

let colorName: string = Color;
console.log(colorName);// 输出'Green'因为上面代码里它的值是2
复制代码</code></pre>
另一个很好的例子是使用枚举来存储应用程序状态。
 
<img class="lazyload inited loaded" alt="image-20190611175542886" width="652" height="334" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a580eb8d6f7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="988" data-height="506">
 
<h5 class="heading" data-id="heading-9">3. <code>Void</code></h5>
 
<img class="lazyload inited loaded" alt="image-20190611175724302" width="384" height="105" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a5811b7c692?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
在<code>Typescript</code>中，你必须在函数中定义返回类型。像这样：
 
<img class="lazyload inited loaded" alt="image-20190611175858587" width="804" height="432" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a58137c6084?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="986" data-height="530">
 
若没有返回值，则会报错：
 
<img class="lazyload inited loaded" alt="image-20190611175932713" width="724" height="286" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a58322260c4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="998" data-height="394">
 
我们可以将其返回值定义为<code>void</code>:
 
<img class="lazyload inited loaded" alt="image-20190611180043827" width="780" height="462" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a582b658d41?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1000" data-height="592">
 
此时将无法 <code>return</code>
<h5 class="heading" data-id="heading-10">4. <code>Any</code></h5>
 
<img class="lazyload inited loaded" alt="image-20190611180255381" width="824" height="225" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a58357d0129?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
Emmm...就是什么类型都行，当你无法确认在处理什么类型时可以用这个。
但要慎重使用，用多了就失去使用Ts的意义。
<pre><code class="hljs bash copyable" lang="bash">let person: any = "前端劝退师"
person = 25
person = true
复制代码</code></pre>
主要应用场景有：
<ol>
<li>接入第三方库</li>
<li>Ts菜逼前期都用</li>
</ol>
<h5 class="heading" data-id="heading-11">5. <code>Never</code></h5>
 
<img class="lazyload inited loaded" alt="image-20190611180943940" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a5836a7344f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
用很粗浅的话来描述就是："<code>Never</code>是你永远得不到的爸爸。"
具体的行为是：
<ul>
<li><code>throw new Error(message)</code></li>
<li><code>return error("Something failed")</code></li>
<li><code>while (true) {} // 存在无法达到的终点</code></li>
</ul>
 
<img class="lazyload inited loaded" alt="image-20190611181410052" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a5839fb5caa?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1000" data-height="352">
 
<h4 class="heading" data-id="heading-12">3. 类型断言</h4>
 
<img class="lazyload inited loaded" alt="image-20190611182337690" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a584a48d1d6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1003" data-height="274">
 
简略的定义是：可以用来手动指定一个值的类型。
有两种写法，尖括号和<code>as</code>:
<pre><code class="hljs bash copyable" lang="bash">let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
复制代码</code></pre>
使用例子有：
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
<pre><code class="hljs bash copyable" lang="bash">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'.
复制代码</code></pre>
如果你访问长度将会报错，而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，此时需要断言才不会报错：
<pre><code class="hljs bash copyable" lang="bash">function getLength(something: string | number): number {
if ((<string>something).length) {
 return (<string>something).length;
} else {
 return something.toString().length;
}
}
复制代码</code></pre>
<h3 class="heading" data-id="heading-13">3.2 泛型：<code>Generics</code></h3>
软件工程的一个主要部分就是构建组件，构建的组件不仅需要具有明确的定义和统一的接口，同时也需要组件可复用。支持现有的数据类型和将来添加的数据类型的组件为大型软件系统的开发过程提供很好的灵活性。
在<code>C#</code>和<code>Java</code>中，可以使用"泛型"来创建可复用的组件，并且组件可支持多种数据类型。这样便可以让用户根据自己的数据类型来使用组件。
<h4 class="heading" data-id="heading-14">1. 泛型方法</h4>
在TypeScript里，声明泛型方法有以下两种方式：
<pre><code class="hljs bash copyable" lang="bash">function gen_func1<T>(arg: T): T {
return arg;
}
// 或者
let gen_func2: <T>(arg: T) => T = function (arg) {
return arg;
}
复制代码</code></pre>
调用方式也有两种：
<pre><code class="hljs bash copyable" lang="bash">gen_func1<string>('Hello world');
gen_func2('Hello world');
// 第二种调用方式可省略类型参数，因为编译器会根据传入参数来自动识别对应的类型。
复制代码</code></pre>
<h4 class="heading" data-id="heading-15">2. 泛型与<code>Any</code></h4>
<code>Ts</code> 的特殊类型 <code>Any</code> 在具体使用时，可以代替任意类型，咋一看两者好像没啥区别，其实不然：
<pre><code class="hljs bash copyable" lang="bash">// 方法一：带有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;
}
复制代码</code></pre>
<ul>
<li>方法一，打印了<code>arg</code>参数的<code>length</code>属性。因为<code>any</code>可以代替任意类型，所以该方法在传入参数不是数组或者带有<code>length</code>属性对象时，会抛出异常。</li>
<li>方法二，定义了参数类型是<code>Array</code>的泛型类型，肯定会有<code>length</code>属性，所以不会抛出异常。</li>
</ul>
<h4 class="heading" data-id="heading-16">3. 泛型类型</h4>
泛型接口：
<pre><code class="hljs bash copyable" lang="bash">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'); // 错误类型的实际参数
复制代码</code></pre>
<h3 class="heading" data-id="heading-17">3.3 自定义类型：<code>Interface</code> vs <code>Type alias</code></h3>
<code>Interface</code>，国内翻译成接口。
<code>Type alias</code>，类型别名。
 
<img class="lazyload inited loaded" alt="image-20190613192317416" data-src="https://user-gold-cdn.xitu.io/2019/6/13/16b512f2dc49f9e5?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1000" data-height="300">
 
以下内容来自：
<blockquote>
Typescript 中的 interface 和 type 到底有什么区别
</blockquote>
<h4 class="heading" data-id="heading-18">1. 相同点</h4>
都可以用来描述一个对象或函数：
<pre><code class="hljs bash copyable" lang="bash">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;

复制代码</code></pre>
都允许拓展（extends）：
<code>interface</code> 和 <code>type</code> 都可以拓展，并且两者并不是相互独立的，也就是说<code>interface</code>可以 <code>extends type</code>, <code>type</code> 也可以 <code>extends interface</code> 。 虽然效果差不多，但是两者语法不同。
interface extends interface
<pre><code class="hljs bash copyable" lang="bash">interface Name {
name: string;
}
interface User extends Name {
age: number;
}
复制代码</code></pre>
type extends type
<pre><code class="hljs bash copyable" lang="bash">type Name = {
name: string;
}
type User = Name & { age: number};
复制代码</code></pre>
interface extends type
<pre><code class="hljs bash copyable" lang="bash">type Name = {
name: string;
}
interface User extends Name {
age: number;
}
复制代码</code></pre>
type extends interface
<pre><code class="hljs bash copyable" lang="bash">interface Name {
name: string;
}
type User = Name & {
age: number;
}

复制代码</code></pre>
<h4 class="heading" data-id="heading-19">2. 不同点</h4>
<code>type</code> 可以而 <code>interface</code> 不行
<ul>
<li><code>type</code> 可以声明基本类型别名，联合类型，元组等类型</li>
</ul>
<pre><code class="hljs bash copyable" lang="bash">// 基本类型别名
type Name = string

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

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList =
复制代码</code></pre>
<ul>
<li><code>type</code> 语句中还可以使用 <code>typeof</code>获取实例的类型进行赋值</li>
</ul>
<pre><code class="hljs bash copyable" lang="bash">// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
复制代码</code></pre>
<ul>
<li>其他骚操作</li>
</ul>
<pre><code class="hljs bash copyable" lang="bash">type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = ;
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
复制代码</code></pre>
<code>interface</code>可以而 <code>type</code>不行
<code>interface</code> 能够声明合并
<pre><code class="hljs bash copyable" lang="bash">interface User {
name: string
age: number
}

interface User {
sex: string
}

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

复制代码</code></pre>
<code>interface</code> 有可选属性和只读属性
<ul>
<li>
可选属性
接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。例如给函数传入的参数对象中只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个<code>?</code>符号。如下所示
</li>
</ul>
<pre><code class="hljs bash copyable" lang="bash">interface Person {
name: string;
age?: number;
gender?: number;
}
复制代码</code></pre>
<ul>
<li>
只读属性
顾名思义就是这个属性是不可写的，对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 <code>readonly</code>来指定只读属性，如下所示：
</li>
</ul>
<pre><code class="hljs bash copyable" lang="bash">interface User {
readonly loginName: string;
password: string;
}
复制代码</code></pre>
上面的例子说明，当完成User对象的初始化后loginName就不可以修改了。
<h3 class="heading" data-id="heading-20">3.4 实现与继承：<code>implements</code>vs<code>extends</code></h3>
<code>extends</code>很明显就是ES6里面的类继承，那么<code>implement</code>又是做什么的呢？它和<code>extends</code>有什么不同？
<code>implement</code>，实现。与C#或Java里接口的基本作用一样，<code>TypeScript</code>也能够用它来明确的强制一个类去符合某种契约
implement基本用法：
<pre><code class="hljs bash copyable" lang="bash">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';
}
复制代码</code></pre>
而<code>extends</code>是继承父类，两者其实可以混着用：
<pre><code class="hljs bash copyable" lang="bash"> class A extends B implements C,D,E
复制代码</code></pre>
搭配 <code>interface</code>和<code>type</code>的用法有：
 
<img class="lazyload inited loaded" alt="image-20190612003025759" data-src="https://user-gold-cdn.xitu.io/2019/6/12/16b47a58564149b6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1000" data-height="812">
 
<h3 class="heading" data-id="heading-21">3.5 声明文件与命名空间：<code>declare</code> 和 <code>namespace</code></h3>
前面我们讲到Vue项目中的<code>shims-tsx.d.ts</code>和<code>shims-vue.d.ts</code>，其初始内容是这样的：
<pre><code class="hljs bash copyable" lang="bash">// 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 {
 : any;
}
}
}

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

复制代码</code></pre>
<code>declare</code>：当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
这里列举出几个常用的：
<pre><code class="hljs bash copyable" lang="bash">declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare global 扩展全局变量
declare module 扩展模块
复制代码</code></pre>
<code>namespace</code>：“内部模块”现在称做“命名空间”
<code>module X {</code> 相当于现在推荐的写法 <code>namespace X {</code>)
<h2 class="heading" data-id="heading-22">跟其他 JS 库协同</h2>
类似模块，同样也可以通过为其他 JS 库使用了命名空间的库创建 <code>.d.ts</code> 文件的声明文件，如为 <code>D3</code> JS 库，可以创建这样的声明文件：
<pre><code class="hljs bash copyable" lang="bash">declare namespace D3{
export interface Selectors { ... }
}
declare var d3: D3.Base;
复制代码</code></pre>
所以上述两个文件：
<ul>
<li><code>shims-tsx.d.ts</code>，在全局变量 <code>global</code>中批量命名了数个内部模块。</li>
<li><code>shims-vue.d.ts</code>，意思是告诉 <code>TypeScript</code> <code>*.vue</code> 后缀的文件可以交给 <code>vue</code> 模块来处理。</li>
</ul>
<h3 class="heading" data-id="heading-23">3.6 访问修饰符：<code>private</code>、<code>public</code>、<code>protected</code></h3>
其实很好理解：
<ol>
<li>
默认为<code>public</code>
</li>
<li>
当成员被标记为<code>private</code>时，它就不能在声明它的类的外部访问，比如：
</li>
</ol>
<pre><code class="hljs bash copyable" lang="bash">class Animal {
private name: string;
constructor(theName: string) {
 this.name = theName;
}
}

let a = new Animal('Cat').name; //错误，‘name’是私有的
复制代码</code></pre>
<ol start="3">
<li><code>protected</code>和<code>private</code>类似，但是，<code>protected</code>成员在派生类中可以访问</li>
</ol>
<pre><code class="hljs bash copyable" lang="bash">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
}
}
复制代码</code></pre>
<h3 class="heading" data-id="heading-24">3.7 可选参数 ( ?: )和非空断言操作符（!.）</h3>
可选参数
<pre><code class="hljs bash copyable" lang="bash">function buildName(firstName: string, lastName?: string) {
return firstName + ' ' + lastName
}

// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName")
// 正确演示
buildName("firstName", "lastName")
复制代码</code></pre>
非空断言操作符：
能确定变量值一定不为空时使用。
与可选参数不同的是，非空断言操作符不会防止出现 null 或 undefined。
<pre><code class="hljs bash copyable" lang="bash">let s = e!.name;// 断言e是非空并访问name属性
复制代码</code></pre>
<h2 class="heading" data-id="heading-25">4. <code>Vue</code>组件的<code>Ts</code>写法</h2>
从 vue2.5 之后，vue 对 ts 有更好的支持。根据官方文档，vue 结合 typescript ，有两种书写方式：
**Vue.extend **
<pre><code class="hljs bash copyable" lang="bash">import Vue from 'vue'

const Component = Vue.extend({
// type inference enabled
})
复制代码</code></pre>
vue-class-component
<pre><code class="hljs bash copyable" lang="bash">import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
@Prop({ type: Object })
private test: { value: string }
}
复制代码</code></pre>
理想情况下，<code>Vue.extend</code> 的书写方式，是学习成本最低的。在现有写法的基础上，几乎 0 成本的迁移。
但是<code>Vue.extend</code>模式，需要与<code>mixins</code> 结合使用。在 mixin 中定义的方法，不会被 typescript 识别到
，这就意味着会出现丢失代码提示、类型检查、编译报错等问题。
菜鸟才做选择，大佬都挑最好的。直接讲第二种吧：
<h3 class="heading" data-id="heading-26">4.1 <code>vue-class-component</code></h3>
 
<img class="lazyload inited loaded" alt="image-20190613013846506" data-src="https://user-gold-cdn.xitu.io/2019/6/14/16b53b466001ed96?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="996" data-height="561">
 
我们回到<code>src/components/HelloWorld.vue</code>
<pre><code class="hljs bash copyable" lang="bash"><template>
<div class="hello">
<h1>{{ msg }}</h1>

</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>


<style scoped></style>
复制代码</code></pre>
有写过<code>python</code>的同学应该会发现似曾相识：
<ul>
<li><code>vue-property-decorator</code>这个官方支持的库里，提供了函数 **装饰器（修饰符）**语法</li>
</ul>
<h4 class="heading" data-id="heading-27">1. 函数修饰符 <code>@</code></h4>
“@”，与其说是修饰函数倒不如说是引用、调用它修饰的函数。
或者用句大白话描述：<code>@</code>: "下面的被我包围了。"
举个栗子，下面的一段代码，里面两个函数，没有被调用，也会有输出结果：
<pre><code class="hljs html copyable" lang="html">test(f){
console.log("before ...");
f()
console.log("after ...");
}

@test
func(){
console.log("func was called");
}
复制代码</code></pre>
直接运行，输出结果：
<pre><code class="hljs bash copyable" lang="bash">before ...
func was called
after ...
复制代码</code></pre>
上面代码可以看出来:
<ul>
<li>只定义了两个函数：<code>test</code>和<code>func</code>，没有调用它们。</li>
<li>如果没有“@test”，运行应该是没有任何输出的。</li>
</ul>
但是，解释器读到函数修饰符“@”的时候，后面步骤会是这样：
<ol>
<li>
去调用<code>test</code>函数，<code>test</code>函数的入口参数就是那个叫“<code>func</code>”的函数；
</li>
<li>
<code>test</code>函数被执行，入口参数的（也就是<code>func</code>函数）会被调用（执行）；
</li>
</ol>
换言之，修饰符带的那个函数的入口参数，就是下面的那个整个的函数。有点儿类似<code>JavaScrip</code>t里面的 <code>function a (function () { ... });</code>
 
<img class="lazyload inited loaded" alt="ççç¥ç¥ï¼é¬¼é¬¼ç¥ç¥è¡¨æ
å
ï¼ä¸çå¹¶ç¥ï¼ä¸ä¸ªçç©¿çå°è£åï¼é¬¼é¬¼ç¥ç¥è¡¨æ
å
.jpg" data-src="https://user-gold-cdn.xitu.io/2019/6/13/16b512f30ff5e238?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="198" data-height="198">
 
<h4 class="heading" data-id="heading-28">2. <code>vue-property-decorator</code>和<code>vuex-class</code>提供的装饰器</h4>
<code>vue-property-decorator</code>的装饰器：
<ul>
<li><code>@Prop</code></li>
<li><code>@PropSync</code></li>
<li><code>@Provide</code></li>
<li><code>@Model</code></li>
<li><code>@Watch</code></li>
<li><code>@Inject</code></li>
<li><code>@Provide</code></li>
<li><code>@Emit</code></li>
<li><code>@Component</code> (provided by vue-class-component)</li>
<li><code>Mixins</code> (the helper function named <code>mixins</code> provided by vue-class-component)</li>
</ul>
<code>vuex-class</code>的装饰器：
<ul>
<li>@State</li>
<li>@Getter</li>
<li>@Action</li>
<li>@Mutation</li>
</ul>
我们拿原始Vue组件模版来看：
<pre><code class="hljs bash copyable" lang="bash">import {componentA,componentB} from '@/components';

export default {
components: { componentA, componentB},
props: {
propA: { type: Number },
propB: { default: 'default value' },
propC: { type: },
}
// 组件数据
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 () { }
}
复制代码</code></pre>
以上模版替换成修饰符写法则是：
<pre><code class="hljs bash copyable" lang="bash">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() 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 { }
}
复制代码</code></pre>
正如你所看到的，我们在生命周期列表那都添加<code>private XXXX</code>方法，因为这不应该公开给其他组件。
而不对<code>method</code>做私有约束的原因是，可能会用到<code>@Emit</code>来向父组件传递信息。
<h3 class="heading" data-id="heading-29">4.2 添加全局工具</h3>
引入全局模块，需要改<code>main.ts</code>:
<pre><code class="hljs bash copyable" lang="bash">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');
复制代码</code></pre>
<code>npm i VueI18n</code>
<pre><code class="hljs bash copyable" lang="bash">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');
复制代码</code></pre>
但仅仅这样，还不够。你需要动<code>src/vue-shim.d.ts</code>：
<pre><code class="hljs bash copyable" lang="bash">// 声明全局方法
declare module 'vue/types/vue' {
interface Vue {
 readonly $i18n: VueI18Next;
 $t: TranslationFunction;
}
}
复制代码</code></pre>
之后使用<code>this.$i18n()</code>的话就不会报错了。
<h3 class="heading" data-id="heading-30">4.3 Axios 使用与封装</h3>
<code>Axios</code>的封装千人千面
如果只是想简单在Ts里体验使用<code>Axios</code>，可以安装<code>vue-axios</code> 简单使用<code>Axios</code>
<pre><code class="hljs bash copyable" lang="bash">$ npm i axios vue-axios
复制代码</code></pre>
<code>main.ts</code>添加：
<pre><code class="hljs bash copyable" lang="bash">import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
复制代码</code></pre>
然后在组件内使用：
<pre><code class="hljs bash copyable" lang="bash">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)
})
复制代码</code></pre>
<h4 class="heading" data-id="heading-31">1. 新建文件<code>request.ts</code></h4>
文件目录:
<pre><code class="hljs bash copyable" lang="bash">-api
- main.ts // 实际调用
-utils
- request.ts// 接口封装
复制代码</code></pre>
<h4 class="heading" data-id="heading-32">2. <code>request.ts</code>文件解析</h4>
<pre><code class="hljs bash copyable" lang="bash">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;
复制代码</code></pre>
为了方便，我们还需要定义一套固定的 axios 返回的格式，新建<code>ajax.ts</code>：
<pre><code class="hljs bash copyable" lang="bash">export interface AjaxResponse {
code: number;
data: any;
message: string;
}
复制代码</code></pre>
<h4 class="heading" data-id="heading-33">3. <code>main.ts</code>接口调用：</h4>
<pre><code class="hljs bash copyable" lang="bash">// 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
});
}
复制代码</code></pre>
<h2 class="heading" data-id="heading-34">5. 编写一个组件</h2>
为了减少时间，我们来替换掉<code>src/components/HelloWorld.vue</code>，做一个博客帖子组件：
<pre><code class="hljs bash copyable" lang="bash"><template>
<div class="blogpost">
<h2>{{ post.title }}</h2>
{{ post.body }}
"meta">Written by {{ post.author }} on {{ date }}
</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>
h2 {
text-decoration: underline;
}
p.meta {
font-style: italic;
}
</style>
复制代码</code></pre>
然后在<code>Home.vue</code>中使用:
<pre><code class="hljs bash copyable" lang="bash"><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>
</code></pre>
</div>
 作者：前端劝退师 链接：https://juejin.im/post/5d0259f2518825405d15ae62 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div> 
来源：https://www.cnblogs.com/objectjj/p/11092240.html

頁: [1]

琼殿技术论坛's Archiver

typescript