search
LoginSignup
95

More than 3 years have passed since last update.

posted at

updated at

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

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

詳しくは下記

型をつける方法で回避

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
95