TypeScript를 사용한 DiscordBot 자습서 작성

개막사

디스코드의 봇을 TypeScript로 개발한다는 기사가 적어 난감해 자기 방식대로 기사를 쓰기로 했다.
이런 기사는 처음 써보는데 졸렬한 글이지만 누군가 도와주면 좋겠네요.

독자 대상

Discord.js의 Bot 개발 경험이 있는 사람

이번 보도의 주축은 TypeScript를 사용하여 Bot 개발을 하기 때문에 Bot 개발과 Node이다.js 등에 대한 기본 설명은 일부 생략되었다.
사전에 양해해 주십시오.

컨디션

컨디션
릴리즈
Node.js
v16.13.0
TypeScript
v4.5.2
Discord.js
v13.3.1
Visual Studio Code
v1.62.3
편집자는 좋아하는 것을 사용할 수 있지만 Visual Studio Code의 TypeScript 보완 기능이 매우 강력하기 때문에 Type Script를 쓸 때 Visual Studio Code를 추천합니다.

절차.

필요한 패키지 설치

초기 설정

실제 쓰기 코드

처리null/undefined

필요한 패키지 설치

적절한 폴더에서 다음 명령을 실행하십시오.

npm init -y
npm install --save-dev typescript ts-node eslint
npm install discord.js dotenv

버전이 표시되면 설치가 성공했습니다.

npx tsc --version
Version 4.5.2

초기 설정

TypeScript

다음 명령을 실행하십시오.

npx tsc --init

tsconfig.json 이 서류는 새로 나온 것 같습니다.좋아하는 편집기에서 열어 보십시오.
내용 대부분이 논평에서 제외되었다.
아래의 줄을 찾아서 주석을 제거한 후 쓴 대로 다시 쓰십시오.

{
  // 中略
  "outdir": "./build"
  // 略
}

출력을 컴파일할 때 생성되는 JavaScript 코드를 지정하는 디렉토리입니다.

ESLint

npx eslint --init

대화 설정 마법사가 시작됩니다.화살표 키 등을 사용하여 다음을 지정하십시오.
질문
대답 내용
How would you like to use ESLint? (ESLit은 어떻게 사용합니까?)
To check syntax, find problens, and enforce code style
What type of modules does your project use?(어떤 종류의 모듈을 사용합니까?)
JavaScript modules (import/export)
Which framework does your project use?(프레임을 사용하나요?)
None of these
Does your project use TypeScript?(Type Script를 사용합니까?)
Yes
Where does your code run?(코드는 어느 환경에서 실행됩니까?)
Browser, Node(a 키를 누르면 동시에 선택 가능)
How would you like to define a style for your project?(코드 스타일은 어떻게 정의합니까?)
Use a popular style guide
Which style guide do you want to follow?(어떤 스타일 매뉴얼을 따르시겠습니까?)
Standard
What format do you want your config file to be in?(config 파일은 어떤 형식으로 저장됩니까?)
JavaScript
Would you like to install then now with npm?(npm를 사용하여 현재 필요한 패키지를 설치합니까?)
Yes
또한 Visual Studio Code의 경우 ESLin 확장 기능을 설치합니다.
[1]

package.json

package.json에서 npm 스크립트를 지정합니다.

"scripts": {
	"test": "ts-node src/main.ts",
	"start": "node build/main.js",
	"compile": "tsc -p ."
}

마지막으로 현재 디렉터리에 src, build 폴더와 .env 파일을 새로 만드십시오.이하의 상태가 되는 겁니까?
현재 디렉토리의 상태

📁 node_modules
📁 src
📁 build
📄 package-lock.json
📄 package.json
📄 tsconfig.json
📄 .eslintrc.js
📄 .env

실제 코드 쓰기

그럼 코드를 쓸게요.src/main.ts.
src/main.ts

import { Message, Client } from 'discord.js'
import dotenv from 'dotenv'

dotenv.config()

const client = new Client({
    intents: ['GUILDS', 'GUILD_MEMBERS', 'GUILD_MESSAGES'],
})

client.once('ready', () => {
    console.log('Ready!')
    console.log(client.user.tag)
})

client.on('messageCreate', async (message: Message) => {
    if (message.author.bot) return
    if (message.content.startsWith('!ping')) {
        message.channel.send('Pong!')
    }
})

client.login(process.env.TOKEN)

오류가 발생한 줄이 있으면 먼저 번역해 보세요.

npm run compile

편집을 실행한 결과

src/main.ts:12:17 - error TS2531: Object is possibly 'null'.

12     console.log(client.user.tag)
                   ~~~~~~~~~~~

Found 1 error.

잘못된 내용은 "client.user이 비어 있을 수 있습니다"오류입니다.이런 잘못된 처리 방법은 4단계에 따라 해석하고 잠시 놓아 두어라.
오류가 발생했지만 컴파일 자체가 실행 중입니다.증거로build/main.js가 있다.
bot을 시작합니다..env 파일
.env

TOKEN = 'Discord Developer Portalで取得したトークン'

를 클릭하고,
실행

npm run start

.
bot 온라인이면 전화해 보세요!ping.대답이 있으면 성공이다.

null/undefined 대응

TypeScript는 레코더로 볼 때 null/undefined (nulllish라고 함) 의 값을 실행할 때가 아니라 컴파일링할 때 오류가 발생했습니다.
방금 실수는 "client.user이 비어 있을 수 있다"는 실수였다.
bot에 로그인하기 전에ready 이벤트가 발생하면 client.usernull로 돌아갑니다.
물론null형은 로그인 중인 Bot의 사용자 이름의 gg 속성을 표시하지 않습니다. 이렇게 하면 오류가 발생합니다.
따라서 client.user는nulllish가 아니라는 것을 보증해야 한다.
그런 상황에서 다음과 같은 조치를 취할 것이다.

client.once('ready', () => {
    console.log('Ready!')
    if (client.user) {
        console.log(client.user.tag)
    }
})

// or

client.once('ready', () => {
    console.log('Ready!')
    console.log(client.user?.tag)
})

위의 예는 이해하기 쉽다고 생각합니다.
비nulish 값은 True가 반환하는 성질을 이용하여 null이 아니라는 것을 보증합니다.
다음 예는 액세스 원본이nulish일지라도 오류가 발생하지 않고 되돌아오는 임선체인이라고 합니다. undefinedhttps://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
어느 쪽처럼 처리하면 적파선이 사라질 거야.
다시 한 번 번역해 보세요.아무것도 안 보이면 돼.

참고 가치가 있는 뉴스 사이트

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://qiita.com/hitori_yuu/items/02eae8b14dc6a9c91c0d
각주
그나저나 저는 기능을 보완하기 위해 Type Script를 사용했습니다.파람인지 아닌지... https://book.yyts.org/