TypeScript

TSLintさんに注意されたこととその修正方法

TypeScript導入したらTSlintさんにいろんなこと注意されまくったので、エラー内容と解決方法まとめときます( ˘ω˘ )
ちなみに今回指摘されたことはだいたいtslintの実行コマンドに「 --fix」つけることによって自動修正されます( ˘ω˘ )


■エラー内容
Missing trailing comma
意訳：末尾にコンマおらんやで

■修正方法
?
1
2
3
4
5
// エラー行
address: string
 
// 解決
address: string,


■エラー内容
Unnecessary semicolon
意訳：そこセミコロンいらんやで

■修正方法
?
1
2
3
4
5
6
7
8
9
10
11
// エラー行
const zoo: object = {
  name: string,
  address: string,
};
 
// 解決
const zoo: object = {
  name: string,
  address: string,
}


■エラー内容
if statements must be braced
意訳：if文はちゃんと{}で囲うんやで

■修正方法
?
1
2
3
4
5
6
7
// エラー行
if (newZooList.length === 0) console.log('end')
 
// 解決
if (newZooList.length === 0) {
  console.log('end')
}


■エラー内容
Calls to 'console.log' are not allowed.
意訳：誰がconsole.log使っていいなんて言ったんや？

■修正方法
?
1
2
3
4
5
6
7
8
9
// エラー行
console.log('end');
 
// 解決
// 流石に厳しいので、tslint.jsonにconsole.logを使ってもエラーが出ないようルール追加
"rules": {
  // ~~
  "no-console": [false],
}


■エラー内容
Array type using 'T[]' is forbidden for non-simple types. Use 'Array' instead.
意訳：ちょっと複雑な型指定のときはT[]やなくてArray使うんや

■修正方法
?
1
2
3
4
5
// エラー行
const zooList: {}[] = []
 
// 解決
const zooList:  Array<{}> = []


■エラー内容
Array type using 'Array' is forbidden for simple types. Use 'T[]' instead.
意訳：シンプルな型指定のときはArrayやなくてT[]使うんや

■修正方法
?
1
2
3
4
5
// エラー行
zooAreaBox: Array<string>;
 
// 解決
zooAreaBox: string[];


■エラー内容
trailing whitespace
意訳：末尾にいらん空白おるで

■修正方法
?
1
2
3
4
5
6
// エラー行
name: string,
 
// 解決
// (最後尾に入ってたスペース削除)
name: string,


■エラー内容
comment must start with a space
意訳：コードの後にコメント書くのやめーや

■修正方法
?
1
2
3
4
5
6
// エラー行
obj: any; // newする変数の型をどうしたらいいのかわからないのであとで調べる
 
// 解決
// newする変数の型をどうしたらいいのかわからないのであとで調べる
obj: any;


■エラー内容
" should be '
意訳："やなくて'使うんや

■修正方法
?
1
2
3
4
5
// エラー行
.then((zooList: State["zooListType"]) => {
 
// 解決
.then((zooList: State['zooListType']) => {


■エラー内容
Parentheses are required around the parameters of an arrow function definition
意訳：arrow関数使うときのパラメータには括弧つけるんや

■修正方法
?
1
2
3
4
5
// エラー行
]).then(result => {
 
// 解決
]).then((result) => {


■エラー内容
Cannot find module './assets/zooList.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
意訳：jsonファイル読み込むんなら'--resolveJsonModule'使うんや

■修正方法
?
1
2
3
4
5
6
7
8
// エラー行
import zooListJsonData from './assets/zooList.json';
 
// 解決
// tsconfig.jsonに「resolveJsonModule」を使うようにルール追加
"compilerOptions": {
  "resolveJsonModule": true
}


■エラー内容
Use an interface instead of a type literal.
意訳：タイプリテラルやなくてInterface定義使うんや

■修正方法
?
1
2
3
4
5
6
7
8
// エラー行
type zooListState = {
 
// 解決
// tsList.jsにタイプリテラルよりInterface定義を推奨するよう設定ルール追加
"rules": {
  // ~~
  "interface-over-type-literal": true,


■エラー内容
Shadowed name: 'item'
意訳：itemってその変数名もう使ってるやんけ

■修正方法
?
1
2
3
4
5
// エラー行
const filterZooArticle = zooList.filter((item: zooItemState) => item.article === beforeArticle);
 
// 解決
const filterZooArticle = zooList.filter((zooItem: zooItemState) => zooItem.article === beforeArticle);


■エラー内容
Exceeds maximum line length of 120
意訳：１行は120文字以内に収めてクレメンス

■修正方法
?
1
2
3
4
5
6
7
// エラー行
const filterZooArticle = zooList.filter((zooItem: zooItemState) => zooItem.article === beforeArticle);
 
// 解決
const filterZooArticle = zooList.filter(
  (zooItem: zooItemState) => zooItem.article === beforeArticle
);


■エラー内容
Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
意訳：'<>'構文は禁止や。'as'構文を使え

■修正方法
?
1
2
3
4
5
// エラー行
const ulElement = <HTMLElement> this.$refs.ul;
 
// 解決
const ulElement = this.$refs.ul as HTMLElement;