Help us understand the problem. What is going on with this article?

素の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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした