TypeScript常见问题总结

426次阅读
没有评论

TypeScript常见问题总结

用字符串做下标报错

代码示例

const person = {
    name: '张三',
    age: 10
};

function getValue(arg: string) {
    return person[arg];
}

错误信息

Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘{ name: string; age: number; }’.
No index signature with a parameter of type ‘string’ was found on type ‘{ name: string; age: number; }’.ts(7053)

解决方法1
在tsconfig.json中配置suppressImplicitAnyIndexErrors: true

{
    "compilerOptions": {
        "suppressImplicitAnyIndexErrors": true,
        ...
    },
    ...
}

解决方法2
给person定义接口

const person = {
    name: '张三',
    age: 10
};

function getValue(arg: string) {
    interface IPerson {
        [key: string]: any
    }
    return (<IPerson>person)[arg];
}

🐞 函数内使用this报错

代码示例

function test() {
    this.title = 'hello'; 
}

错误信息

‘this’ implicitly has type ‘any’ because it does not have a type annotation.ts(2683)

解决方法
在tsconfig.json中配置noImplicitThis: true

{
    "compilerOptions": {
        "noImplicitThis": true,
        ...
    },
    ...
}

🐞 找不到模块XXX

代码示例

import CryptoJS from 'crypto-js';

错误信息

Cannot find module ‘crypto-js’.ts(2307)

解决方法
安装对应的声明文件

cnpm install --save-dev @types/crypto-js

模块声明文件搜索: https://microsoft.github.io/TypeSearch/

如果安装不了或搜不到声明文件,请看下面这种方法

🐞 引入模块提示找不到声明文件(接上一个问题)

示例代码

import CryptoJS from 'crypto-js'; 

错误信息
TypeScript常见问题总结
解决方法

在src目录下修改shims-vue.d.ts声明文件,在末尾增加一行 declare module 'xxx模块名';

shims-vue.d.ts文件内容如下:

declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
}

declare module 'crypto-js';

🐞 JSON直接解析localStorage值报错

代码示例

JSON.parse(window.localStorage.getItem('token'));

错误信息

Argument of type ‘string | null’ is not assignable to parameter of type ‘string’.
Type ‘null’ is not assignable to type ‘string’.ts(2345)

解决方法
定义一个指定类型为string的变量接收localStorage值

let token: string | null = window.localStorage.getItem('token');
if (token) {
    JSON.parse(token);
}

🐞 初始加载的组件未命名,浏览器打开页面后控制台报错

代码示例

//index.vue
@Component
export default class extends Vue {}
//router.ts
import Index from '@/views/index.vue';
const routes: Array<RouteConfig> = [
    {
        path: '/',
        name: 'index',
        component: Index,
    }
];

错误信息

Invalid component name: “_class2”. Component names should conform to valid custom element name in html5 specification.

解决方法
给初始加载的组件命名

//index.vue
@Component({
    name: 'Index'
})
export default class extends Vue {}

🐞 初始值未定义类型,后面赋值报错

代码示例

export default class extends Vue {
    private search = {
        name: '',
        types: [];
    };

    private typesChange(value: string[]) {
        this.search.types = value; //这里报错
    }
}

错误信息

Type ‘string[]’ is not assignable to type ‘never[]’.
Type ‘string’ is not assignable to type ‘never’.

解决方法
给初始赋值类型断言

export default class extends Vue {
    private search = {
        name: '',
        types: [] as string[]; //这里加断言
    };

    private typesChange(value: string[]) {
        this.search.types = value; 
    }
}

🐞 在Vue原型上添加属性使用时报错

示例代码

import Vue from 'vue';
import http from './http';
Vue.prototype.$http = http;
this.$http.post('/test', {}).then(
   (resolve: any) => {
       console.log(resolve);
   },
   (reject: any) => {
       console.log(reject);
   }
);

错误信息
TypeScript常见问题总结

解决方法

在src目录下新建vue.d.ts声明文件

vue.d.ts文件内容如下:

import Vue from 'vue';
declare module 'vue/types/vue' {
    interface Vue {
        $http: any;
    }
}

🐞 element-ui使用$message报错

解决方法

在src目录下新建vue.d.ts声明文件

vue.d.ts文件内容如下:

import Vue from 'vue';
import { ElMessage } from 'element-ui/types/message';

declare module 'vue/types/vue' {
    interface Vue {
        $message: ElMessage;
    }
}

🐞 vue-cli里使用process对象报错类型找不到

解决方法

修改项目根目录下的tsconfig.json文件中的compilerOptions.types值,新增node

compilerOptions.types配置内容如下:

"compilerOptions": {
    "types": ["webpack-env", "node"],
}

🐞 vue-cli里tsconfig.json文件报错

错误信息

JSON schema for the typescript compiler's configuration file.
cannot find type definition file for 'webpack-env'.

解决方法

没找到好的解决方法,偶然间尝试了下面的方法居然就不报错了,这种方法不一定适用所有人的项目
修改项目根目录下的tsconfig.json文件中的compilerOptions.types值,先新增"nodejs",再删除"nodejs"

先新增:

"compilerOptions": {
    "types": ["webpack-env", "nodejs"],
}

再删除:

"compilerOptions": {
    "types": ["webpack-env"],
}

tsconfig.json配置解释

{
    "compilerOptions": {
        "noEmitOnError": true // 编译的源文件中存在错误的时候不再输出编译结果文件
    }
}

纯TypeScript 如何引入JS库

1、直接翻译

​ 看了上面4个字,大家可能不会不约而同地眉头一皱,立刻开喷:“喔靠,馊主意!”。我承认,这的确是个笨办法,但是我的确这么做过。笨办法也是办法,重剑无锋,大巧不工。
​ 对于一些JS库只有不到200-300行代码,直接翻译成TS又何妨呢?自己用TS重写,跟找typings(很多不一定能找到)或者自己写*.d.ts的时间其实差不了多少。自己动手,也能加深对库的理解,夯实自己。 ​

2、页面引入 + 全局定义

如果对第一条不满意,不用着急,咱还有别的办法。第二招,其实也很简单粗暴。所谓“页面引入”就是最常规的用<script>标签把js直接在html页面引入,然后“全局定义”,就是声明一个变量跟JS的全局变量名或者方法名一样。
下面用大家非常熟悉的jQuery举例吧。 页面里直接用 script 标签引入jquery.js

<html>
  <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
  </head>
  <body>
 ...... 

TS中声明全局变量$,然后就可以直接开撸

declare var $;
class App {
  init(){
    $("#msg").html("jquery引用成功!");
  }
}

简单粗暴的副作用就是不够优雅,声明的全局变量$的类型只能是any,这意味着还是弱类型变量,因此IDE中没有任何的方法和属性还有类型的提示。因而,完全失去了写TS的乐趣。下面重点说说怎样做到优雅。

3、类型定义文件(.d.ts)

相信阁下如果看本文之前百度过,肯定看过这种方法。说明,这是主流。所以,我也准备重点详细地介绍一下。

  • 首先,什么是类型定义文件?

应该有点类似于C++后缀名为.h的头文件,用于声明JS主文件的函数接口和变量类型的定义,并且把这些定义暴露给TS使用。有了.d.ts的定义之后,TS就能感知到JS库相关的代码提示了。

  • 接着,如何得到.d.ts文件?
    1.可以先去DefinitelyTyped找找碰碰运气,一般很流行的库也许会有。
    2.用npm的typings查找获取的,其实跟上面没什么两样。
    3.网上还能还有一些工具,据说根据js库能够反向生成.d.ts。我试了都不靠谱,如果是C#生成.d.ts的成功率我是敢打包票,但是对JS我就只能呵呵了。
    4.最后,“拿来主义”都不行的情况下,只有自己动手丰衣足食了。

自己做.d.ts之前,先分析一下js库的代码,看看自己需要什么接口就定义什么。那些自己用不着的大可放过。
例如,我早前做的marked.js,节选一些代码:

marked.options =
marked.setOptions = function(opt) {
  merge(marked.defaults, opt);
  return marked;
};

marked.getDefaults = function () {
  return {
    baseUrl: null,
    breaks: false,
    gfm: true,
    headerIds: true,
    headerPrefix: '',
    highlight: null,
    langPrefix: 'language-',
    mangle: true,
    pedantic: false,
    renderer: new Renderer(),
    sanitize: false,
    sanitizer: null,
    silent: false,
    smartLists: false,
    smartypants: false,
    tables: true,
    xhtml: false
  };
};

marked.defaults = marked.getDefaults();

/**
 * Expose
 */
marked.Parser = Parser;
marked.parser = Parser.parse;

marked.Renderer = Renderer;
marked.TextRenderer = TextRenderer;

marked.Lexer = Lexer;
marked.lexer = Lexer.lex;

marked.InlineLexer = InlineLexer;
marked.inlineLexer = InlineLexer.output;

marked.Slugger = Slugger;

marked.parse = marked;

这一段,很直观地看出它有什么接口可以暴露出来了。其实,我只需要一个parse的方法足矣。那么,我的marked.d.ts就会这么写。

interface MDOption {
    baseUrl?: string;
    breaks?: boolean;
    gfm?: boolean;
    headerIds?: boolean;
    headerPrefix?: string;
    highlight?: any;
    langPrefix?: string;
    mangle?: boolean;
    pedantic?: boolean;
    sanitize?: boolean;
    sanitizer?: any;
    silent?: boolean;
    smartLists?: boolean;
    smartypants?: boolean;
    tables?: boolean;
    xhtml?: boolean;
}

interface MarkDown {
    parse(src: string, opt?: MDOption, callback?: Function);
}

declare module "marked" {
    export = marked;
}
declare var marked: MarkDown;

方法定义只有MarkDown.parse一个,外加一个MDOption的结构定义。这样,我在TS调用就能用得很舒服了!至于,最后几行的declare为什么那么写?那是TS语法的套路,我这里就不多做解释,能用就行。好奇宝宝们可以进入传送门深入理解一下。

最后说一下,.d.ts怎么使用。直接上代码:

///<reference path="../typings/marked.d.ts" />
import * as marked from "marked";
var md_html = marked.parse("### Hello TypeScript");

1.引用路径
2.引入模块
3.使用方法
很简单的三行代码

至于,主体库mark.js怎么引入页面,方法很多,八仙过海各显神通。我用的是require.js。

require.config({
    paths: {
        'jquery': '//g.alicdn.com/sj/lib/jquery/dist/jquery.min',
        'marked': '/js/lib/marked.min'
    }
});

TypeScript-给第三方库添加声明文件

在使用TypeScript写程序的时候,可能会需要使用到JavaScript库,因为历史遗留问题,现在非常多的第三方库依然是用JavaScript进行编写,但是大多数情况下,库的所有者已经帮你写好了TypeScript声明文件,即x.d.ts文件。

还有一些情况是库中并没有附带ts声明文件,但是可以通过:

npm i @types/xxx -s   # xxx为第三方JavaScript库的名字

进行下载该类型的库的声明文件。

上面两种方法都是用在别人已经帮你编写了声明文件的情况下,但是如果上面两种方式都无效,怎么自行编写声明文件呢?

比如需要在Vue中使用到qqmap这个由腾讯提供的地图插件,通过上面的两种方式,都没有找到别人已经编写好的ts声明文件,其实非常简单,比如要使用qqmap这个js库,直接在src文件夹的任意地方创建一个qqmap.d.ts文件(不过还是推荐放到@types文件夹中)。

然后在qqmap.d.ts文件中编写声明:

declare module "qqmap";

好的,这些就大工告成了,直接ts文件中使用

import qqmap from "qqmap";

就可以引入这个第三方JavaScript库。