slateから参照したNode型のプロパティの値を取得したい

目的

ユーザーが打ち込んだ文字が既定の書き方に沿っていなかった場合に教えてくれるプログラムをtypeScriptで書いています。

実現したいこと

テキストエディタに打ち込んだ文字と正規表現のルールが合致するか確認したいです。

困っていること

node_modulesのslateのNode型にあるプロパティの値を参照してストリングス型で取りたいです。
下のコードの.test()の部分にvalue<Node[]>のchildren:[{text:' '}]の部分のストリングス型の値をとりたいですが、参照の仕方が分からないです。

index.ts
1  const [value, setValue] = useState<Node[]>([//typeを探す
2    {
3      type: 'paragraph',
4      children: [{ text: 'ここ' }],
5    },
6  ]);
7  console.log(value)
8  console.log()
9  
10  const general = () =>{
11    const a = / [ [ + \d + \] ] + [A-Z] + [A-Z] | \. /.test()
12    
13  }
14

下が全文になります。

index.ts
1import {
2  Box,
3  Button,
4  ButtonGroup,
5  Icon,
6  IconButton,
7  useColorMode,
8} from '@chakra-ui/react';
9import Head from 'next/head';
10import { useState, VFC } from 'react';
11import {
12  HiMoon,
13  HiOutlineArrowNarrowDown,
14  HiOutlineArrowNarrowRight,
15  HiSun,
16} from 'react-icons/hi';
17import { Node } from 'slate';//ここをたどってルール変更
18import { Slate } from 'slate-react';
19
20import { Editable } from '../components/Editable/Editable';
21import { Logo } from '../components/Logo';
22import { useDirection } from '../lib/direction';
23import { createEditor } from '../lib/editor/plugins';
24
25const IndexPage: VFC = () => {
26  const [editor] = useState(createEditor);
27  const { direction, toggleDirection } = useDirection();
28  const { colorMode, toggleColorMode } = useColorMode();
29
30  const [value, setValue] = useState<Node[]>([//typeを探す
31    {
32      type: 'paragraph',
33      children: [{ text: 'ここ' }],
34    },
35  ]);
36  console.log(value)
37  console.log()
38  
39  const general = () =>{
40    const a = / [ [ + \d + \] ] + [A-Z] + [A-Z] | \. /.test(text)
41    
42  }
43
44  return (
45    <>
46      <Head>
47        <title>INIAD IE</title>
48      </Head>
49      <ButtonGroup p="2" position="fixed" top="0" left="0">
50        <Button variant="ghost" p="2">
51          <Box as="span" display="inline-block" h="10" w="10">
52            <Logo />
53          </Box>
54        </Button>
55      </ButtonGroup>
56      <Slate
57        editor={editor}
58        value={value}
59        onChange={
60          (newValue) =>
61          setValue(newValue)
62        }//ここでテキスト更新
63      >
64        <Editable direction={direction} />
65        <ButtonGroup p="2" position="fixed" bottom="0" right="0">
66          <IconButton
67            colorScheme="gray"
68            variant="ghost"
69            p="2"
70            onClick={toggleDirection}
71            aria-label={
72              direction === 'horizontal'
73                ? '縦書きで表示する'
74                : '横書きで表示する'
75            }
76            icon={
77              <Box
78                as="span"
79                display="inline-block"
80                position="relative"
81                h="6"
82                w="6"
83              >
84                <Box
85                  as="span"
86                  fontSize="xs"
87                  position="absolute"
88                  top="0"
89                  left="0"
90                  aria-hidden="true"
91                >
92                  あ
93                </Box>
94                {direction === 'horizontal' ? (
95                  <HiOutlineArrowNarrowRight
96                    style={{
97                      position: 'absolute',
98                      width: '1.5rem',
99                      height: '1.5rem',
100                      bottom: '-0.5rem',
101                      right: 0,
102                    }}
103                  />
104                ) : (
105                  <HiOutlineArrowNarrowDown
106                    style={{
107                      position: 'absolute',
108                      width: '1.5rem',
109                      height: '1.5rem',
110                      bottom: 0,
111                      right: '-0.5rem',
112                    }}
113                  />
114                )}
115              </Box>
116            }
117          />
118
119          <IconButton
120            colorScheme="gray"
121            variant="ghost"
122            p="2"
123            onClick={toggleColorMode}
124            aria-label={
125              colorMode === 'light'
126                ? 'ダークモードにする'
127                : 'ライトモードにする'
128            }
129            icon={<Icon as={colorMode === 'light' ? HiMoon : HiSun} />}
130          />
131        </ButtonGroup>
132      </Slate>
133    </>
134  );
135};
136
137export default IndexPage;
138

足りない情報がありましたら教えていただけると幸いです。

試したこと

回答で教えていただき、下記のようにしたら、オブジェクト型はunknownですというエラーが発生しつつ、動作自体は今のところ問題なく動いています。

index.ts
1 const [value, setValue] = useState<Node[]>([
2    {
3      type: 'paragraph',
4      children: [{ text: '' }],
5    },
6  ]);
7  console.log(value[0].children)
8
9  const s = value[0].children[0].text
10  const d =console.log(s)
11  
12  const general = () =>{
13    const a = /[A-Z]/.test(s)
14    return d
15    }
16    general()
17

エラーの出ない方法をご存じの方がいらっしゃいましたら教えていただけませんでしょうか。

また、上記の指摘を受けて試したことを下に書きます。
①childrenを外してみる

index.ts
1 const [value, setValue] = useState<Node[]>([
2    {
3      type: 'paragraph',
4       text: ' ' ,
5    },
6  ]);

値を取得する際にページが真っ白になり色々なエラーが出てしまいました。

range

2022/08/26 08:09

typescriptds × reactを使用しています

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

回答1件

ベストアンサー

こんな感じで取れるかと思います。

javascript
1value[0].children[0].text

投稿2022/08/26 00:07

Matsumon0104

総合スコア1005

range

2022/08/26 00:30

ありがとうございます！とることが出来ました！！

range

2022/08/26 08:08

一度閉じたのに申し訳ございません。Matsumon0104さんのように書いたら値はとれるのですが、オブジェクト型は 'unknown' です。というエラーが出てきます。childrenの型がunknownであるためですが、エラーを消す方法はありますでしょうか？ローカル環境では今のところ問題なく動いています。何度も申し訳ございません。

Matsumon0104

2022/09/21 08:49

こんな感じで書くと、childrenがundefinedの場合は空白が、それ以外はvalue[0].children[0].textの値が入ります。 let s = (value[0].children) ? value[0].children[0].text : ''; // 三項演算でsの値を変更

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