Edited at

素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する

More than 1 year has passed since last update.

VSCodeの便利さを使いたいがTypeScript化するほど手間かけれない、みたいなときにtsconfig.jsonだけ作っておくとちょっと便利になりそうだったのでメモる。

追記: TypeScriptへ移植する予定が無い場合であれば、jsconfig.jsonを配置するでも十分そうです(違いはallowJSがdefaultでtrueなこととぐらい。あとはtsconfig.jsonは後述のコマンドでボイラープレートを生成できるという点ぐらいと思われます)

具体的にはこのへんとか使える


  • 未使用のimport検出

  • ライブラリの型情報を利用した検出

  • JSDocがあればそれを利用した型検証


やり方

まずtsconfig.jsonを生成する。npx使う

$ npx typescript --init

次に、allowJscheckJstrueにする

"allowJs": true,

"checkJs": true,

あとtscを叩いて上書きなどされないようにnoEmitも追加しておく

"noEmit": true

ついでにstrictも必要があればfalseにしておく。

"strict": false,

Reactの場合はjsx周りのエラーを回避するために下記も追加

"jsx": "react"

また、@types/reactも必要

$ yarn add -D @types/react


エラーが出たら?


無視するシグネチャをつける方法で回避

コメントによって一部チェックを無視することが可能。

行単位で無視したいなら下記

// @ts-ignore

ファイルごと無視したいなら下記

// @ts-nocheck

詳しくは下記

https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files


型をつける方法で回避

JSDocを指定して型指定すると回避できる。

@type {*}で値をany扱いにするのが雑ではあるものの一番ライト。

当然型の恩恵は受けれなくなるものだが、今はVSCodeの恩恵を受けることを目的とするので目をつぶる。

/** @type {*} */

const Mark = styled.div`
background:
${
/** @type {*} */
props => props.primary ? 'palevioletred' : 'white'
};
`

ちゃんと型を指定することもできるものの、ここまでやるならもうTypeScriptにしたほういいのでは?という感じはある。

import styled, { ThemedStyledProps, StyledComponentClass } from "styled-components"

/**
* @type {StyledComponentClass<any, any>}
*/

const Mark = styled.div`
background:
${
/** @type {ThemedStyledProps<{ primary: Boolean}, {}> } */
props => props.primary ? 'palevioletred' : 'white'
};
`

さらにJSDoc周りについての詳細は公式の下記を見ると良い。

https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript