typescript
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]
12月3
vscode安装json2ts插件
搜索json2ts或
https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools

或在线https://apihelper.jccore.cn/jsontool

[codes=c#]
// 复制JSON到粘贴板,然后ctrl+alt+v
{
  "id": 1,
  "name": "111",
  "address": "11",
  "ext": {
    "phone":"13312121212",
    "mail":"xx@xx.com"
  }
}

// 生成的代码
export interface Ext {
  phone: string;
  mail: string;
}

export interface RootObject {
  id: number;
  name: string;
  address: string;
  ext: Ext;
}
[/codes]
点击在新窗口中浏览此图片
12月3
typescript中快速创建一个跟接口模型结构一样的对象。

vscode定义一个class implements 这个interface,然后再使用出new即可
点击在新窗口中浏览此图片
[codes=c#]
import { setgroups } from "process";

// Model
interface Ext {
  Address: string,
  Phone: Number,
}

export interface UserInfo {
  Id: number,
  Name: string,
  Ext: Ext,
}

// 生成的代码可以使用=赋值
export class UserInfoModel implements UserInfo {
  Id: number = NaN;
  Name: string = '';
  Ext: Ext = {
    Address: '',
    Phone: NaN
  };
}

// Use
setup() {
  const state reactive({
    userInfo: new UserInfoModel(),
  });
  return {
    state,
  }
}
[/codes]
2月13

 在 Typescript 2.0 中使用 @type 类型定义

基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义。导致在编译的时候,经常会看到一连串的找不到类型的提示。解决的方式经过了许多的变化,从 DefinitelyTyped 到 typings。最后是 @types。在 Typescript 2.0 之后,推荐使用 @types 方式。

DefinitelyTyped

这个工具已经不被推荐,仅作介绍。

多数来自 javascript 的库是没有 TypeScript 类型定义的。为了解决这个问题,DefinitelyTyped 被创建出来,它提供了多数流行的脚本库的 TypeScript 定义,你可以使用名为 tsd 的一个工具来管理它。

首先,你需要安装这个工具。

npm install tsd -g

然后,可以使用这个工具来安装你需要的定义库。比如 jquery 的定义库。

tsd install jquery --save

 

如果提供了 --save 参数,它会创建一个名为 tsd.json 的配置文件来保存所管理的类型定义包。看起来如下所示。

复制代码
{     "version": "v4",     "repo": "DefinitelyTyped/DefinitelyTyped",     "ref": "master",     "path": "typings",     "bundle": "typings/tsd.d.ts",     "installed": {         "node/node.d.ts": {             "commit": "6834f97fb33561a3ad40695084da2b660efaee29"         }     } }
复制代码

 

以后,直接使用

tsd install

 

就可以安装定义在配置文件中的所有的包了。

Typings

这个也不推荐了。

后来,我们有了 Typings, 这是也是一个用来管理 Typescript 定义的库,你需要安装这个应用。

# Install Typings CLI utility. npm install typings --global

 如果需要一个库的定义文件,比如 react

typings install react --save

 安装之后,在你的项目文件夹中会自动创建一个名为 typings 的文件夹来专门保存类型定义的库。

如果这个定义来自 DefinitelyTyped, 则现有加上一个参数 --ambient

typings install jquery --ambient  --save

它自己需要一个配置文件 typings.json,可以用它来管理项目使用到的类型定义,这样,类似于 NPM,我们可以使用 install 命令来自动安装需要的类型定义。

typings install

这个 typings.json 文件的内容示例如下。

复制代码
{   "ambientDependencies": {     "jquery": "registry:dt/jquery#1.10.0+20161119044246"   },   "dependencies": {     "react": "registry:npm/react#15.0.1+20160601175240"   } }
复制代码

还是需要专门的工具来管理类型系统。我们可以让这个问题更加简单一点。

@Types

使用另外一套系统来管理类型定义显然不太方便。

在 Typescript 2.0 之后,TypeScript 将会默认的查看 ./node_modules/@types 文件夹,自动从这里来获取模块的类型定义,当然了,你需要独立安装这个类型定义。

比如,你希望 core.js 的类型定义,那么,你需要安装这个库的定义库。

npm install --save @types/core-js

与我们安装一个普通的库没有区别。当然了,常用的 jquery 也有。Microsoft 在 The Future of Declaration Files 介绍了 TypeScript 的这个新特性。

默认情况下,所有的 @types 包都会在编译时应用,任意层的 node_modules/@types 都会被使用,进一步说,在 ./node_modules/@types/,../node_modules/@types/../../node_modules/@types/ 都被应用。

如果你的类型定义不在这个文件夹中,可以使用 typesRoot 来配置,只有在 typeRoots 中的包才会被包含,例如:

{    "compilerOptions": {        "typeRoots" : ["./typings"]    } }

现在,只有在 ./typings 中的才会应用,而 ./node_modules/@types 中的则不会。

如果配置了 types,则只有列出的包才会包含。

{    "compilerOptions": {        "types" : ["node", "lodash", "express"]    } }

这样将只会包含 ./node_modules/@types/node, ./node_modules/@types/lodash 和 ./node_modules/@types/express ,其它的则不会被包含进来。

如果配置为

"types": []

则不会包含任何包。

Reference

tsconfig.json

2月13
遇到的问题以及解决方法
问题一
ts 无法识别$ref

解决方法
① 直接在 this.$refs.xxx 后面申明类型如:
[codes=c#]
this.$refs.lyricsLines as HTMLDivElement;
[/codes]
② 在export default class xxx extends Vue里面声明全部的$ref 的类型
[codes=c#]
$refs: {
    audio: HTMLAudioElement,
    lyricsLines: HTMLDivElement
}
[/codes]

问题二
ts 无法识别 require

解决方法

安装声明文件
[codes=c#]
yarn add @types/webpack-env -D
[/codes]


问题三
运行npm run build 出现


解决方法
[codes=c#]
You can fix this by using the most recent beta version of uglifyjs-webpack-plugin. Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.

If you do yarn add uglifyjs-webpack-plugin@beta --dev or npm install uglifyjs-webpack-plugin@beta --save-devyou should receive the latest beta which does successfully minify es6 syntax. We are hoping to have this released from beta extremely soon, however it should save you from errors for now!
[/codes]
也就是说升级你的uglifyjs-webpack-plugin版本:
[codes=c#]
yarn add uglifyjs-webpack-plugin@beta --dev
[/codes]


问题四
vue-property-decorator 装饰器写法不对。当时我是要把 mixins,注入到组件里,我就这样写:

ts提示找不到 mixin。我就很纳闷为什么找不到名字,由于官网vue-property-decorator例子太少,只好一步一步摸索?

解决方法

把mixins写在@Component里面…,像这样:

注意点
如果你引用第三方无类型声明的库,那就需要自己编写x.d.ts文件
如果引用 ui 组件的时候,如果控制台出现Property '$xxx' does not exist on type 'App'的话,那么可以在vue-shim.d.ts增加
[codes=c#]
declare module 'vue/types/vue' {
  interface Vue {
    $xxx: any,
  }
}
[/codes]
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]