Skip to content

Commit cb45300

Browse files
s0s0
committed
Add instructions for writing TS
1 parent 10240c1 commit cb45300

File tree

2 files changed

+254
-4
lines changed

2 files changed

+254
-4
lines changed

‎writing-npm-libraries-using-typescript/Lesson.ipynb‎

Lines changed: 253 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -206,14 +206,15 @@
206206
},
207207
{
208208
"cell_type": "code",
209-
"execution_count": 8,
209+
"execution_count": 21,
210210
"metadata": {},
211211
"outputs": [
212212
{
213213
"name": "stdout",
214214
"output_type": "stream",
215215
"text": [
216-
"node_modules\n"
216+
"node_modules\n",
217+
"npm-debug.log"
217218
]
218219
}
219220
],
@@ -297,7 +298,7 @@
297298
"cell_type": "markdown",
298299
"metadata": {},
299300
"source": [
300-
"## Writing and compiling TypeScript\n",
301+
"## Configuring & compiling TypeScript\n",
301302
"\n",
302303
"Unlike JavaScript, TypeScript can't be run directly in node or in the browser.\n",
303304
"We need to first compile it, by using `tsc` to convert the TypeScript code to JavaScript.\n",
@@ -342,7 +343,7 @@
342343
}
343344
],
344345
"source": [
345-
"json -I -f package.json -e 'this.scripts={tsc:\"tsc\"}';"
346+
"json -I -f package.json -e 'this.scripts={tsc:\"tsc\"}'"
346347
]
347348
},
348349
{
@@ -691,6 +692,254 @@
691692
"Let's commit the changes we've made so far, and then start writing some TypeScript."
692693
]
693694
},
695+
{
696+
"cell_type": "code",
697+
"execution_count": 22,
698+
"metadata": {},
699+
"outputs": [
700+
{
701+
"name": "stdout",
702+
"output_type": "stream",
703+
"text": [
704+
"On branch master\n",
705+
"Changes not staged for commit:\n",
706+
" (use \"git add <file>...\" to update what will be committed)\n",
707+
" (use \"git checkout -- <file>...\" to discard changes in working directory)\n",
708+
"\n",
709+
"\t\u001b[31mmodified: .gitignore\u001b[m\n",
710+
"\t\u001b[31mmodified: package.json\u001b[m\n",
711+
"\n",
712+
"Untracked files:\n",
713+
" (use \"git add <file>...\" to include in what will be committed)\n",
714+
"\n",
715+
"\t\u001b[31mtsconfig.base.json\u001b[m\n",
716+
"\t\u001b[31mtsconfig.json\u001b[m\n",
717+
"\n",
718+
"no changes added to commit (use \"git add\" and/or \"git commit -a\")\n"
719+
]
720+
}
721+
],
722+
"source": [
723+
"git status"
724+
]
725+
},
726+
{
727+
"cell_type": "code",
728+
"execution_count": 23,
729+
"metadata": {},
730+
"outputs": [
731+
{
732+
"name": "stdout",
733+
"output_type": "stream",
734+
"text": [
735+
"[master de6aca6] Add TypeScript config\n",
736+
" 4 files changed, 77 insertions(+)\n",
737+
" create mode 100644 tsconfig.base.json\n",
738+
" create mode 100644 tsconfig.json\n"
739+
]
740+
}
741+
],
742+
"source": [
743+
"git add .; git commit -m \"Add TypeScript config\""
744+
]
745+
},
746+
{
747+
"cell_type": "code",
748+
"execution_count": 24,
749+
"metadata": {},
750+
"outputs": [
751+
{
752+
"name": "stdout",
753+
"output_type": "stream",
754+
"text": [
755+
"On branch master\n",
756+
"nothing to commit, working tree clean\n"
757+
]
758+
}
759+
],
760+
"source": [
761+
"git status"
762+
]
763+
},
764+
{
765+
"cell_type": "markdown",
766+
"metadata": {},
767+
"source": [
768+
"## Writing TypeScript\n",
769+
"\n",
770+
"Now that we have set up the compiler options,\n",
771+
"let's write our fist typescript file for our package.\n",
772+
"\n",
773+
"Create the folder `src/` and create the file `index.ts` with the following content:\n",
774+
"\n",
775+
"```ts\n",
776+
"export function hello_world(a1: string, a2: number){\n",
777+
" console.log(`Hello World! I was given the string ${a1} and the number ${a2}`)\n",
778+
"}\n",
779+
"```"
780+
]
781+
},
782+
{
783+
"cell_type": "code",
784+
"execution_count": 25,
785+
"metadata": {},
786+
"outputs": [],
787+
"source": [
788+
"mkdir src"
789+
]
790+
},
791+
{
792+
"cell_type": "markdown",
793+
"metadata": {},
794+
"source": [
795+
"The following command will write the file for us.\n",
796+
"But if you're not running from the notebook, you should create this using a text editor instead."
797+
]
798+
},
799+
{
800+
"cell_type": "code",
801+
"execution_count": 50,
802+
"metadata": {},
803+
"outputs": [],
804+
"source": [
805+
"cat > src/index.ts << 'EndOfTypeScriptFile'\n",
806+
"export function hello_world(a1: string, a2: number){\n",
807+
" console.log(`Hello World! I was given the string ${a1} and the number ${a2}`)\n",
808+
"}\n",
809+
"EndOfTypeScriptFile"
810+
]
811+
},
812+
{
813+
"cell_type": "code",
814+
"execution_count": 51,
815+
"metadata": {},
816+
"outputs": [
817+
{
818+
"name": "stdout",
819+
"output_type": "stream",
820+
"text": [
821+
"export function hello_world(a1: string, a2: number){\n",
822+
" console.log(`Hello World! I was given the string ${a1} and the number ${a2}`)\n",
823+
"}\n"
824+
]
825+
}
826+
],
827+
"source": [
828+
"cat src/index.ts"
829+
]
830+
},
831+
{
832+
"cell_type": "markdown",
833+
"metadata": {},
834+
"source": [
835+
"Now if we compile the typescript code:"
836+
]
837+
},
838+
{
839+
"cell_type": "code",
840+
"execution_count": 52,
841+
"metadata": {},
842+
"outputs": [
843+
{
844+
"name": "stdout",
845+
"output_type": "stream",
846+
"text": [
847+
"\u001b[?25h\u001b[0G\u001b[K\n",
848+
"> my-amazing-package@0.0.1 tsc /home/jupyter/notebooks/my-amazing-package\n",
849+
"> tsc\n",
850+
"\n",
851+
"\u001b[?25l\u001b[0G- |---------------------------------------------------------------------------|\n",
852+
"\u001b[?25h\u001b[?25h\u001b[1A\u001b[0G\u001b[K\u001b[?25h\u001b[0G\u001b[K\u001b[?25l\u001b[0G- |---------------------------------------------------------------------------|\n",
853+
"\u001b[?25h\u001b[?25h\u001b[1A\u001b[0G\u001b[K\u001b[?25h\u001b[0G\u001b[K"
854+
]
855+
}
856+
],
857+
"source": [
858+
"npm run tsc"
859+
]
860+
},
861+
{
862+
"cell_type": "markdown",
863+
"metadata": {},
864+
"source": [
865+
"We can see that a new directory `lib` has appeared. Inside of which is the file `index.js`."
866+
]
867+
},
868+
{
869+
"cell_type": "code",
870+
"execution_count": 55,
871+
"metadata": {},
872+
"outputs": [
873+
{
874+
"name": "stdout",
875+
"output_type": "stream",
876+
"text": [
877+
"total 44\n",
878+
"drwxr-xr-x 6 jupyter jupyter 4096 Jul 16 18:52 .\n",
879+
"drwxr-xr-x 6 jupyter jupyter 4096 Jul 16 18:59 ..\n",
880+
"drwxr-xr-x 8 jupyter jupyter 4096 Jul 16 18:44 .git\n",
881+
"-rw-r--r-- 1 jupyter jupyter 26 Jul 16 18:44 .gitignore\n",
882+
"drwxr-xr-x 2 jupyter jupyter 4096 Jul 16 18:52 lib\n",
883+
"drwxr-xr-x 4 jupyter jupyter 4096 Jul 16 18:41 node_modules\n",
884+
"-rw-r--r-- 1 jupyter jupyter 146 Jul 16 18:42 package.json\n",
885+
"drwxr-xr-x 2 jupyter jupyter 4096 Jul 16 18:48 src\n",
886+
"-rw-r--r-- 1 jupyter jupyter 5743 Jul 16 18:42 tsconfig.base.json\n",
887+
"-rw-r--r-- 1 jupyter jupyter 139 Jul 16 18:42 tsconfig.json\n"
888+
]
889+
}
890+
],
891+
"source": [
892+
"ls -la"
893+
]
894+
},
895+
{
896+
"cell_type": "code",
897+
"execution_count": 54,
898+
"metadata": {},
899+
"outputs": [
900+
{
901+
"name": "stdout",
902+
"output_type": "stream",
903+
"text": [
904+
"index.js\n"
905+
]
906+
}
907+
],
908+
"source": [
909+
"ls lib"
910+
]
911+
},
912+
{
913+
"cell_type": "markdown",
914+
"metadata": {},
915+
"source": [
916+
"And if we take a look at that file,\n",
917+
"we can see the JavaScript that `tsc` has produced.\n",
918+
"All type annotations have been removed, and there are a couple of additions including a `\"use strict\"` declaration."
919+
]
920+
},
921+
{
922+
"cell_type": "code",
923+
"execution_count": 59,
924+
"metadata": {},
925+
"outputs": [
926+
{
927+
"name": "stdout",
928+
"output_type": "stream",
929+
"text": [
930+
"\"use strict\";\n",
931+
"Object.defineProperty(exports, \"__esModule\", { value: true });\n",
932+
"function hello_world(a1, a2) {\n",
933+
" console.log(\"Hello World! I was given the string \" + a1 + \" and the number \" + a2);\n",
934+
"}\n",
935+
"exports.hello_world = hello_world;\n"
936+
]
937+
}
938+
],
939+
"source": [
940+
"cat lib/index.js"
941+
]
942+
},
694943
{
695944
"cell_type": "code",
696945
"execution_count": null,

‎writing-npm-libraries-using-typescript/resources/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
npm-debug.log

0 commit comments

Comments
 (0)