ReactNative(typescript)のスタイリングに出てきた "!!"について教えてください。

UdemyのReactNativeで食べログのような評価アプリの実装を学習している者です。
そこでレビューのコンポーネントを実装する際に、
以下の部分が不明でした。

 <View style={[styles.container, !!height && { height }]}>

ここにある!!height && { height }は何を意味しているのでしょうか？

import React from 'react';
import { View, StyleSheet, TextInput, Text } from 'react-native';

type Props = {
  onChangeText: (text: string) => void;
  value: string;
  label: string;
  height?: number;
  placeholder?: string;
};

export const TextArea: React.FC<Props> = ({ value, onChangeText, label, height, placeholder }: Props) => {
  return (
    <View style={[styles.container, !!height && { height }]}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        style={styles.input}
        onChangeText={(text) => onChangeText(text)}
        value={value}
        multiline={true}
        placeholder={placeholder}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  input: {
    height: 120,
    borderColor: '#999',
    borderBottomWidth: 1,
    marginTop: 8,
  },
  label: {
    fontWeight: 'bold',
    color: '#999',
  },
});

行動規範の内容に同意します

回答1件

ベストアンサー

全体的にTypescript云々というよりJavascriptの言語仕様の話になりますが・・・

ここにある!!height && { height }は何を意味しているのでしょうか？

!!の方はBoolean以外をBooleanとして扱う(≒キャストする)意味合いでよく使われます。
例えばnumber型の0はBooleanとしてはfalseで扱われるので以下のような結果が得られます。

js
1const num = 0;
2const numFlg = !!num; // --> false

!をBoolean型以外に使うとBoolean型への変換を行いながら審議値の反転を行うので、それをもう一回行なって「反転の反転を行なった上でBoolean型にキャストしている」イメージです。

&&ですが、このあたりは「Javascirpt 短絡評価」で検索すると解説している記事がいくらでも出てくるので詳しくは割愛しますが、ざっくり説明すると「左側がtrueなら右の値を、左側がfalseなら左の値」を返します。

したがって!!height && { height }は「!!heightがfalseなら!!heightを、!!heightがtrueなら{height}」を返します。
ちなみにこの{height}の記法は、オブジェクト型のショートハンドとして知られていて、実際には{height: height}のようにプロパティ名と値として使う変数名が同じ場合にこのような書き方をします。

以下のコードを動かしてみるとイメージがつきやすいかなと思います。

js
1let height = 100;
2let style = !!height && { height };
3console.log(style);
4// --> { height: 100 }
5
6height = undefiend;
7style = !!height && { height };
8console.log(style);
9// --> false