JavaScript
AWS
editor
TypeScript
cloud9

AWS Cloud9 がTypeScriptに対応したと聞いたので試してみた


結論

まだ、VS Codeは手放せない。

編集機能は概ね良い感じ。デバッグが課題。


準備

まずはコンソールから新規に環境を作ります。


起動したら、環境を確認 && nodeを更新。


bash

ec2-user:~/environment $ nvm --version

0.31.7

ec2-user:~/environment $ nvm ls
-> v6.14.4
system
default -> 6 (-> v6.14.4)
node -> stable (-> v6.14.4) (default)
stable -> 6.14 (-> v6.14.4) (default)
iojs -> N/A (default)
lts/* -> lts/argon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.4
lts/carbon -> v8.12.0 (-> N/A)

ec2-user:~/environment $ nvm ls-remote
...
v10.12.0

ec2-user:~/environment $ nvm install v10.12.0
Now using node v10.12.0 (npm v6.4.1)

ec2-user:~/environment $ nvm alias default v10.12.0
default -> v10.12.0

ec2-user:~/environment $ node -v
v10.12.0
ec2-user:~/environment $ npm -v
6.4.1


デモ用プロジェクトを作成します。


bash

ec2-user:~/environment $ mkdir demoapp

ec2-user:~/environment $ cd demoapp/
ec2-user:~/environment/demoapp $ npm init -y
ec2-user:~/environment/demoapp $ npm install -g typescript
ec2-user:~/environment/demoapp $ npm install --save-dev @types/node


app.ts

class Demo {

greet(name: string) {
console.log(`Hello, ${name}!`);
}
}

new Demo().greet('John Smith');



tsconfig.json

{

"compilerOptions": {
"moduleResolution": "node",
"module": "es2015",
"target": "es2015",
"lib": ["es6", "es2015", "es2016", "es2017"],
"sourceMap": true,
"noEmitOnError": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
// "noUnusedParameters": true,
// "noUnusedLocals": true,
// "noFallthroughCasesInSwitch": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"baseUrl": ".",
"paths": {
},
"types": ["node"]
}
}


使用

以下の画像の状態になります。

2.png

ヒントも表示されます。

3.png

4.png

もちろん、型チェックも働きます。

5.png

型情報の参照もこの通り!

9.png

10.png

ツリービューでファイルを選択し、メニューバーの「Run」をクリックすると、自動的にトランスパイルされて実行されます。

6.png

デバッグしてみましょう。ブレークポイントを張って… 「Run」!

7.png

止まらない⁉

リリース情報を確認してみましょう。

https://docs.aws.amazon.com/cloud9/latest/user-guide/projects.html

8.png

な、なんだってー!

まだ、sourcemapデバッグに対応してないの?