Repository navigation
Expand file tree
/
Copy pathTypeScript.html
More file actions
executable file
·1069 lines (721 loc) · 55.9 KB
/
Copy pathTypeScript.html
File metadata and controls
executable file
·1069 lines (721 loc) · 55.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebPage" lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/rules_nodejs/TypeScript.html" rel="canonical">
<link href="" rel="shortcut icon" type="image/png">
<title>rules_nodejs - TypeScript</title>
<!-- Webfont -->
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet">
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom stylesheet -->
<link href="/rules_nodejs/css/main.css" rel="stylesheet">
<!-- metadata -->
<meta content="rules_nodejs" name="og:title"/>
<meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"
type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/rules_nodejs/">
<img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box">
<div class="form-group">
<input type="hidden" name="cx" value="2735dc72dd157bd19">
<input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container vpad">
<div class="row">
<div class="col-md-2">
<a aria-controls="sidebar-nav"
aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse"
href="#sidebar-nav">
<i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
</a>
<nav class="sidebar collapse" id="sidebar-nav">
<select onchange="location.href=this.value">
<option selected disabled hidden>Version: 3.x</option>
<option value="/rules_nodejs/TypeScript.html">3.x</option>
<option value="https://docs.aspect.dev/rules_nodejs/TypeScript.html">2.3</option>
</select>
<h3>rules_nodejs</h3>
<ul class="sidebar-nav">
<li><a href="/rules_nodejs/">Introduction</a></li>
<li><a href="install.html">Installation</a></li>
<li><a href="repositories.html">Repositories</a></li>
<li><a href="dependencies.html">Dependencies</a></li>
<li><a href="debugging.html">Debugging</a></li>
<li><a href="stamping.html">Stamping</a></li>
<li><a href="changing-rules.html">Making changes to rules_nodejs</a></li>
<li><a href="examples.html">Examples</a></li>
</ul>
<h3>Rules</h3>
<ul class="sidebar-nav">
<li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li>
<li><a href="/rules_nodejs/Concatjs.html">Concatjs</a></li>
<li><a href="/rules_nodejs/Cypress.html">Cypress</a></li>
<li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li>
<li><a href="/rules_nodejs/Labs.html">Labs</a></li>
<li><a href="/rules_nodejs/Protractor.html">Protractor</a></li>
<li><a href="/rules_nodejs/Providers.html">Providers</a></li>
<li><a href="/rules_nodejs/Rollup.html">Rollup</a></li>
<li><a href="/rules_nodejs/Terser.html">Terser</a></li>
<li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li>
<li><a href="/rules_nodejs/esbuild.html">esbuild</a></li>
</ul>
<h3>Community</h3>
<ul class="sidebar-nav">
<li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to
rules_nodejs</a></li>
<li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li>
<li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li>
<li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li>
</ul>
</nav>
</div>
<div class="col-md-8">
<div class="content">
<!-- *********************
DO NOT EDIT THIS FILE
It is a generated build output from Stardoc.
Instead you must edit the .bzl file where the rules are declared,
or possibly a markdown file next to the .bzl file
********************* -->
<h1 id="typescript-rules-for-bazel">TypeScript rules for Bazel</h1>
<p>The TypeScript rules integrate the TypeScript compiler with Bazel.</p>
<h2 id="alternatives">Alternatives</h2>
<p>This package provides Bazel wrappers around the TypeScript compiler.</p>
<p>At a high level, there are three alternatives provided: <code class="language-plaintext highlighter-rouge">tsc</code>, <code class="language-plaintext highlighter-rouge">ts_project</code>, <code class="language-plaintext highlighter-rouge">ts_library</code>.
This section describes the trade-offs between these rules.</p>
<h3 id="tsc">tsc</h3>
<p><code class="language-plaintext highlighter-rouge">tsc</code> is the TypeScript compiler published by the team at Microsoft.
You can call it without any custom Bazel rules.</p>
<p>To use this option, you <strong>do not need to install the <code class="language-plaintext highlighter-rouge">@bazel/typescript</code> package</strong>.</p>
<p>The only reason to use raw <code class="language-plaintext highlighter-rouge">tsc</code> is if you want to compile a directory of <code class="language-plaintext highlighter-rouge">.ts</code> files and cannot enumerate them ahead-of-time in your BUILD file so that Bazel can predict all the output files.
(For example if the <code class="language-plaintext highlighter-rouge">.ts</code> files are generated by some tool).
This will produce an opaque directory of <code class="language-plaintext highlighter-rouge">.js</code> file outputs, which you won’t be able to individually reference.</p>
<p>Any other use case for <code class="language-plaintext highlighter-rouge">tsc</code> is better served by using <code class="language-plaintext highlighter-rouge">ts_project</code>, see below.</p>
<p>Like we do for any npm package that exposes a binary, rules_nodejs will see your dependency on
<code class="language-plaintext highlighter-rouge">typescript</code> and will generate an <code class="language-plaintext highlighter-rouge">index.bzl</code> file allowing you to run <code class="language-plaintext highlighter-rouge">tsc</code>.
To use it, add the load statement <code class="language-plaintext highlighter-rouge">load("@npm//typescript:index.bzl", "tsc")</code> to your BUILD file.
(Possibly replacing <code class="language-plaintext highlighter-rouge">@npm</code> with the name of the repository where you installed dependencies)</p>
<p>Then call it, using the <a href="Built-ins#npm_package_bin"><code class="language-plaintext highlighter-rouge">npm_package_bin</code></a> documentation.</p>
<p>Here is an example:
https://github.com/bazelbuild/rules_nodejs/blob/3.2.2/internal/node/test/BUILD.bazel#L491-L507</p>
<h3 id="ts_project">ts_project</h3>
<p><code class="language-plaintext highlighter-rouge">ts_project</code> simply runs <code class="language-plaintext highlighter-rouge">tsc --project</code>, with Bazel knowing which outputs to expect based on the TypeScript compiler options,
and with interoperability with other TypeScript rules via the <a href="Built-ins#declarationinfo">DeclarationInfo</a> Provider that transmits the type information.</p>
<p>It is intended as an easy on-boarding for existing TypeScript code and should be familiar if your background is in frontend ecosystem idioms.</p>
<p>Any behavior of <code class="language-plaintext highlighter-rouge">ts_project</code> should be reproducible outside of Bazel, with a couple of caveats noted in the rule documentation below.</p>
<p><code class="language-plaintext highlighter-rouge">ts_project</code> is recommended for all new code.</p>
<p>Exhaustive examples of calling <code class="language-plaintext highlighter-rouge">ts_project</code> are in the test suite:
https://github.com/bazelbuild/rules_nodejs/tree/stable/packages/typescript/test/ts_project</p>
<p>And there are also many uses of it in our <examples></examples></p>
<h3 id="ts_library">ts_library</h3>
<p><code class="language-plaintext highlighter-rouge">ts_library</code> should not be used for new code, and may be deprecated in the future.</p>
<p><code class="language-plaintext highlighter-rouge">ts_library</code> is an open-sourced version of the rule used to compile TS code at Google.
However there is no support from the team that maintains that internal version.
It is very complex, involving code generation of the <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file, a custom compiler binary, and a lot of extra features.</p>
<p>It is also opinionated, and may not work with existing TypeScript code. For example:</p>
<ul>
<li>Your TS code must compile under the <code class="language-plaintext highlighter-rouge">--declaration</code> flag so that downstream libraries depend only on types, not implementation. This makes Bazel faster by avoiding cascading rebuilds in cases where the types aren’t changed.</li>
<li>We control the output format and module syntax so that downstream rules can rely on them.</li>
<li>Some other options are incompatible. For example you cannot use the <code class="language-plaintext highlighter-rouge">--noEmit</code> compiler option in <code class="language-plaintext highlighter-rouge">tsconfig.json</code>.</li>
</ul>
<p>The only reason to use <code class="language-plaintext highlighter-rouge">ts_library</code> for new code is if you are bought-in to using a <a href="https://www.npmjs.com/package/@bazel/concatjs">concatjs</a> bundler, which requires the named AMD module format. This may be faster than other tooling, and this format can be consumed by the Closure Compiler (via integration with <a href="https://github.com/angular/tsickle">tsickle</a>).
However it is very challenging to configure and there is little available support for problems you’ll run into.</p>
<h2 id="installation">Installation</h2>
<p>Add a <code class="language-plaintext highlighter-rouge">devDependency</code> on <code class="language-plaintext highlighter-rouge">@bazel/typescript</code></p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>yarn add <span class="nt">-D</span> @bazel/typescript
<span class="c"># or</span>
<span class="nv">$ </span>npm <span class="nb">install</span> <span class="nt">--save-dev</span> @bazel/typescript
</code></pre></div></div>
<p>Watch for any <code class="language-plaintext highlighter-rouge">peerDependency</code> warnings - we assume you have already installed the <code class="language-plaintext highlighter-rouge">typescript</code> package from npm.</p>
<h2 id="typical-usage">Typical Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">ts_project</code> rule invokes the TypeScript compiler on one compilation unit,
or “library” (generally one directory of source files). In TypeScript terms, this is one “Project”
which can use “Project References” to break up a large application.</p>
<p>Create a <code class="language-plaintext highlighter-rouge">BUILD</code> file next to your sources:</p>
<pre><code class="language-starlark">load("@npm//@bazel/typescript:index.bzl", "ts_project")
ts_project(
name = "my_code",
# glob is a quick way to select all the code,
# but has performance penalty in that Bazel must evaluate it.
srcs = glob(["*.ts"]),
deps = ["//path/to/other:library"],
)
</code></pre>
<p>Here, <code class="language-plaintext highlighter-rouge">//path/to/other:library</code> is another target in your repo that produces TypeScript typings (for example, another <code class="language-plaintext highlighter-rouge">ts_project</code> rule).
Be sure to set the <code class="language-plaintext highlighter-rouge">rootDirs</code> in your tsconfig.json as noted below, so that TypeScript can find the <code class="language-plaintext highlighter-rouge">.d.ts</code> files produced by that other target.</p>
<p>To use third-party libraries from npm, first install them (likely using <code class="language-plaintext highlighter-rouge">npm_install</code> or <code class="language-plaintext highlighter-rouge">yarn_install</code> rules) then add those to the <code class="language-plaintext highlighter-rouge">deps</code> as well:</p>
<pre><code class="language-starlark">ts_project(
name = "my_code",
srcs = glob(["*.ts"]),
deps = [
"@npm//@types/node",
"@npm//@types/foo",
"@npm//somelib",
"//path/to/other:library",
],
)
</code></pre>
<p>You can also use the <code class="language-plaintext highlighter-rouge">@npm//@types</code> grouping target which will include all
packages in the <code class="language-plaintext highlighter-rouge">@types</code> scope as dependencies.</p>
<p>To build a <code class="language-plaintext highlighter-rouge">ts_library</code> target run:</p>
<p><code class="language-plaintext highlighter-rouge">bazel build //path/to/package:target</code></p>
<p>Note that the <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file used for compilation should be the same one
your editor references, or <code class="language-plaintext highlighter-rouge">extends</code> from it, to keep consistent settings for the TypeScript compiler.</p>
<p>Anything you do with TypeScript is possible with <code class="language-plaintext highlighter-rouge">ts_project</code>, including json imports, type-checking only,
transpile only, outdir, rootdir, and so on.
See many examples in our test cases:
https://github.com/bazelbuild/rules_nodejs/tree/stable/packages/typescript/test/ts_project</p>
<h2 id="ts_config">ts_config</h2>
<p><strong>USAGE</strong></p>
<pre>
ts_config(<a href="#ts_config-name">name</a>, <a href="#ts_config-deps">deps</a>, <a href="#ts_config-src">src</a>)
</pre>
<p>Allows a tsconfig.json file to extend another file.</p>
<p>Normally, you just give a single <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file as the tsconfig attribute
of a <code class="language-plaintext highlighter-rouge">ts_library</code> or <code class="language-plaintext highlighter-rouge">ts_project</code> rule. However, if your <code class="language-plaintext highlighter-rouge">tsconfig.json</code> uses the <code class="language-plaintext highlighter-rouge">extends</code>
feature from TypeScript, then the Bazel implementation needs to know about that
extended configuration file as well, to pass them both to the TypeScript compiler.</p>
<p><strong>ATTRIBUTES</strong></p>
<h4 id="ts_config-name">name</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this target.</p>
<h4 id="ts_config-deps">deps</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>): Additional tsconfig.json files referenced via extends</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_config-src">src</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory</em>): The tsconfig.json file passed to the TypeScript compiler</p>
<h2 id="ts_library-1">ts_library</h2>
<p><strong>USAGE</strong></p>
<pre>
ts_library(<a href="#ts_library-name">name</a>, <a href="#ts_library-angular_assets">angular_assets</a>, <a href="#ts_library-compiler">compiler</a>, <a href="#ts_library-data">data</a>, <a href="#ts_library-deps">deps</a>, <a href="#ts_library-devmode_module">devmode_module</a>, <a href="#ts_library-devmode_target">devmode_target</a>,
<a href="#ts_library-expected_diagnostics">expected_diagnostics</a>, <a href="#ts_library-generate_externs">generate_externs</a>, <a href="#ts_library-internal_testing_type_check_dependencies">internal_testing_type_check_dependencies</a>,
<a href="#ts_library-link_workspace_root">link_workspace_root</a>, <a href="#ts_library-module_name">module_name</a>, <a href="#ts_library-module_root">module_root</a>, <a href="#ts_library-prodmode_module">prodmode_module</a>, <a href="#ts_library-prodmode_target">prodmode_target</a>, <a href="#ts_library-runtime">runtime</a>,
<a href="#ts_library-runtime_deps">runtime_deps</a>, <a href="#ts_library-srcs">srcs</a>, <a href="#ts_library-supports_workers">supports_workers</a>, <a href="#ts_library-tsconfig">tsconfig</a>, <a href="#ts_library-tsickle_typed">tsickle_typed</a>, <a href="#ts_library-use_angular_plugin">use_angular_plugin</a>)
</pre>
<p>type-check and compile a set of TypeScript sources to JavaScript.</p>
<p>It produces declarations files (<code class="language-plaintext highlighter-rouge">.d.ts</code>) which are used for compiling downstream
TypeScript targets and JavaScript for the browser and Closure compiler.</p>
<p>By default, <code class="language-plaintext highlighter-rouge">ts_library</code> uses the <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file in the workspace root
directory. See the notes about the <code class="language-plaintext highlighter-rouge">tsconfig</code> attribute below.</p>
<h2 id="serving-typescript-for-development">Serving TypeScript for development</h2>
<p><code class="language-plaintext highlighter-rouge">ts_library</code> is typically served by the concatjs_devserver rule, documented in the <code class="language-plaintext highlighter-rouge">@bazel/concatjs</code> package.</p>
<h2 id="accessing-javascript-outputs">Accessing JavaScript outputs</h2>
<p>The default output of the <code class="language-plaintext highlighter-rouge">ts_library</code> rule is the <code class="language-plaintext highlighter-rouge">.d.ts</code> files.
This is for a couple reasons:</p>
<ul>
<li>help ensure that downstream rules which access default outputs will not require
a cascading re-build when only the implementation changes but not the types</li>
<li>make you think about whether you want the <code class="language-plaintext highlighter-rouge">devmode</code> (named <code class="language-plaintext highlighter-rouge">UMD</code>) or <code class="language-plaintext highlighter-rouge">prodmode</code> outputs</li>
</ul>
<p>You can access the JS output by adding a <code class="language-plaintext highlighter-rouge">filegroup</code> rule after the <code class="language-plaintext highlighter-rouge">ts_library</code>,
for example</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">ts_library</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"compile"</span><span class="p">,</span>
<span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"thing.ts"</span><span class="p">],</span>
<span class="p">)</span>
<span class="n">filegroup</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"thing.js"</span><span class="p">,</span>
<span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"compile"</span><span class="p">],</span>
<span class="c1"># Change to es6_sources to get the 'prodmode' JS
</span> <span class="n">output_group</span> <span class="o">=</span> <span class="s">"es5_sources"</span><span class="p">,</span>
<span class="p">)</span>
<span class="n">my_rule</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"uses_js"</span><span class="p">,</span>
<span class="n">deps</span> <span class="o">=</span> <span class="p">[</span><span class="s">"thing.js"</span><span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>
<p><strong>ATTRIBUTES</strong></p>
<h4 id="ts_library-name">name</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this target.</p>
<h4 id="ts_library-angular_assets">angular_assets</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>): Additional files the Angular compiler will need to read as inputs.
Includes .css and .html files</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_library-compiler">compiler</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></em>): Sets a different TypeScript compiler binary to use for this library.
For example, we use the vanilla TypeScript tsc.js for bootstrapping,
and Angular compilations can replace this with <code class="language-plaintext highlighter-rouge">ngc</code>.</p>
<p>The default ts_library compiler depends on the <code class="language-plaintext highlighter-rouge">//@bazel/typescript</code>
target which is setup for projects that use bazel managed npm deps and
install the @bazel/typescript npm package.</p>
<p>You can also use a custom compiler to increase the NodeJS heap size used for compilations.</p>
<p>To do this, declare your own binary for running <code class="language-plaintext highlighter-rouge">tsc_wrapped</code>, e.g.:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">nodejs_binary</span><span class="p">(</span>
<span class="n">name</span> <span class="o">=</span> <span class="s">"tsc_wrapped_bin"</span><span class="p">,</span>
<span class="n">entry_point</span> <span class="o">=</span> <span class="s">"@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js"</span><span class="p">,</span>
<span class="n">templated_args</span> <span class="o">=</span> <span class="p">[</span>
<span class="s">"--node_options=--max-old-space-size=2048"</span><span class="p">,</span>
<span class="p">],</span>
<span class="n">data</span> <span class="o">=</span> <span class="p">[</span>
<span class="s">"@npm//protobufjs"</span><span class="p">,</span>
<span class="s">"@npm//source-map-support"</span><span class="p">,</span>
<span class="s">"@npm//tsutils"</span><span class="p">,</span>
<span class="s">"@npm//typescript"</span><span class="p">,</span>
<span class="s">"@npm//@bazel/typescript"</span><span class="p">,</span>
<span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>
<p>then refer to that target in the <code class="language-plaintext highlighter-rouge">compiler</code> attribute.</p>
<p>Note that <code class="language-plaintext highlighter-rouge">nodejs_binary</code> targets generated by <code class="language-plaintext highlighter-rouge">npm_install</code>/<code class="language-plaintext highlighter-rouge">yarn_install</code> can include data dependencies
on packages which aren’t declared as dependencies.
For example, if you use <a href="https://github.com/angular/tsickle">tsickle</a> to generate Closure Compiler-compatible JS,
then it needs to be a data dependency of <code class="language-plaintext highlighter-rouge">tsc_wrapped</code> so that it can be loaded at runtime.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">@build_bazel_rules_typescript//internal:tsc_wrapped_bin</code></p>
<h4 id="ts_library-data">data</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_library-deps">deps</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>): Compile-time dependencies, typically other ts_library targets</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_library-devmode_module">devmode_module</h4>
<p>(<em>String</em>): Set the typescript <code class="language-plaintext highlighter-rouge">module</code> compiler option for devmode output.</p>
<p>This value will override the <code class="language-plaintext highlighter-rouge">module</code> option in the user supplied tsconfig.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"umd"</code></p>
<h4 id="ts_library-devmode_target">devmode_target</h4>
<p>(<em>String</em>): Set the typescript <code class="language-plaintext highlighter-rouge">target</code> compiler option for devmode output.</p>
<p>This value will override the <code class="language-plaintext highlighter-rouge">target</code> option in the user supplied tsconfig.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"es2015"</code></p>
<h4 id="ts_library-expected_diagnostics">expected_diagnostics</h4>
<p>(<em>List of strings</em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_library-generate_externs">generate_externs</h4>
<p>(<em>Boolean</em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>
<h4 id="ts_library-internal_testing_type_check_dependencies">internal_testing_type_check_dependencies</h4>
<p>(<em>Boolean</em>): Testing only, whether to type check inputs that aren’t srcs.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_library-link_workspace_root">link_workspace_root</h4>
<p>(<em>Boolean</em>): Link the workspace root to the bin_dir to support absolute requires like ‘my_wksp/path/to/file’.
If source files need to be required then they can be copied to the bin_dir with copy_to_bin.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_library-module_name">module_name</h4>
<p>(<em>String</em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">""</code></p>
<h4 id="ts_library-module_root">module_root</h4>
<p>(<em>String</em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">""</code></p>
<h4 id="ts_library-prodmode_module">prodmode_module</h4>
<p>(<em>String</em>): Set the typescript <code class="language-plaintext highlighter-rouge">module</code> compiler option for prodmode output.</p>
<p>This value will override the <code class="language-plaintext highlighter-rouge">module</code> option in the user supplied tsconfig.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"esnext"</code></p>
<h4 id="ts_library-prodmode_target">prodmode_target</h4>
<p>(<em>String</em>): Set the typescript <code class="language-plaintext highlighter-rouge">target</code> compiler option for prodmode output.</p>
<p>This value will override the <code class="language-plaintext highlighter-rouge">target</code> option in the user supplied tsconfig.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"es2015"</code></p>
<h4 id="ts_library-runtime">runtime</h4>
<p>(<em>String</em>)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"browser"</code></p>
<h4 id="ts_library-runtime_deps">runtime_deps</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>) The dependencies of this attribute must provide: JsInfo</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_library-srcs">srcs</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a>, mandatory</em>): The TypeScript source files to compile.</p>
<h4 id="ts_library-supports_workers">supports_workers</h4>
<p>(<em>Boolean</em>): Intended for internal use only.</p>
<p>Allows you to disable the Bazel Worker strategy for this library.
Typically used together with the “compiler” setting when using a
non-worker aware compiler binary.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>
<h4 id="ts_library-tsconfig">tsconfig</h4>
<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></em>): A tsconfig.json file containing settings for TypeScript compilation.
Note that some properties in the tsconfig are governed by Bazel and will be
overridden, such as <code class="language-plaintext highlighter-rouge">target</code> and <code class="language-plaintext highlighter-rouge">module</code>.</p>
<p>The default value is set to <code class="language-plaintext highlighter-rouge">//:tsconfig.json</code> by a macro. This means you must
either:</p>
<ul>
<li>Have your <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file in the workspace root directory</li>
<li>Use an alias in the root BUILD.bazel file to point to the location of tsconfig:
<code class="language-plaintext highlighter-rouge">alias(name="tsconfig.json", actual="//path/to:tsconfig-something.json")</code>
and also make the tsconfig.json file visible to other Bazel packages:
<code class="language-plaintext highlighter-rouge">exports_files(["tsconfig.json"], visibility = ["//visibility:public"])</code></li>
<li>Give an explicit <code class="language-plaintext highlighter-rouge">tsconfig</code> attribute to all <code class="language-plaintext highlighter-rouge">ts_library</code> targets</li>
</ul>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_library-tsickle_typed">tsickle_typed</h4>
<p>(<em>Boolean</em>): If using tsickle, instruct it to translate types to ClosureJS format</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>
<h4 id="ts_library-use_angular_plugin">use_angular_plugin</h4>
<p>(<em>Boolean</em>): Run the Angular ngtsc compiler under ts_library</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h2 id="ts_project-1">ts_project</h2>
<p><strong>USAGE</strong></p>
<pre>
ts_project(<a href="#ts_project-name">name</a>, <a href="#ts_project-tsconfig">tsconfig</a>, <a href="#ts_project-srcs">srcs</a>, <a href="#ts_project-args">args</a>, <a href="#ts_project-deps">deps</a>, <a href="#ts_project-extends">extends</a>, <a href="#ts_project-allow_js">allow_js</a>, <a href="#ts_project-declaration">declaration</a>, <a href="#ts_project-source_map">source_map</a>,
<a href="#ts_project-declaration_map">declaration_map</a>, <a href="#ts_project-preserve_jsx">preserve_jsx</a>, <a href="#ts_project-composite">composite</a>, <a href="#ts_project-incremental">incremental</a>, <a href="#ts_project-emit_declaration_only">emit_declaration_only</a>,
<a href="#ts_project-ts_build_info_file">ts_build_info_file</a>, <a href="#ts_project-tsc">tsc</a>, <a href="#ts_project-typescript_package">typescript_package</a>, <a href="#ts_project-typescript_require_path">typescript_require_path</a>, <a href="#ts_project-validate">validate</a>,
<a href="#ts_project-supports_workers">supports_workers</a>, <a href="#ts_project-declaration_dir">declaration_dir</a>, <a href="#ts_project-out_dir">out_dir</a>, <a href="#ts_project-root_dir">root_dir</a>, <a href="#ts_project-link_workspace_root">link_workspace_root</a>, <a href="#ts_project-kwargs">kwargs</a>)
</pre>
<p>Compiles one TypeScript project using <code class="language-plaintext highlighter-rouge">tsc --project</code></p>
<p>This is a drop-in replacement for the <code class="language-plaintext highlighter-rouge">tsc</code> rule automatically generated for the “typescript”
package, typically loaded from <code class="language-plaintext highlighter-rouge">@npm//typescript:index.bzl</code>. Unlike bare <code class="language-plaintext highlighter-rouge">tsc</code>, this rule understands
the Bazel interop mechanism (Providers) so that this rule works with others that produce or consume
TypeScript typings (<code class="language-plaintext highlighter-rouge">.d.ts</code> files).</p>
<p>Unlike <code class="language-plaintext highlighter-rouge">ts_library</code>, this rule is the thinnest possible layer of Bazel interoperability on top
of the TypeScript compiler. It shifts the burden of configuring TypeScript into the tsconfig.json file.
See https://github.com/bazelbuild/rules_nodejs/blob/master/docs/TypeScript.md#alternatives
for more details about the trade-offs between the two rules.</p>
<p>Some TypeScript options affect which files are emitted, and Bazel wants to know these ahead-of-time.
So several options from the tsconfig file must be mirrored as attributes to ts_project.
See https://www.typescriptlang.org/v2/en/tsconfig for a listing of the TypeScript options.</p>
<p>Any code that works with <code class="language-plaintext highlighter-rouge">tsc</code> should work with <code class="language-plaintext highlighter-rouge">ts_project</code> with a few caveats:</p>
<ul>
<li>Bazel requires that the <code class="language-plaintext highlighter-rouge">outDir</code> (and <code class="language-plaintext highlighter-rouge">declarationDir</code>) be set to
<code class="language-plaintext highlighter-rouge">bazel-out/[target architecture]/bin/path/to/package</code>
so we override whatever settings appear in your tsconfig.</li>
<li>Bazel expects that each output is produced by a single rule.
Thus if you have two <code class="language-plaintext highlighter-rouge">ts_project</code> rules with overlapping sources (the same <code class="language-plaintext highlighter-rouge">.ts</code> file
appears in more than one) then you get an error about conflicting <code class="language-plaintext highlighter-rouge">.js</code> output
files if you try to build both together.
Worse, if you build them separately then the output directory will contain whichever
one you happened to build most recently. This is highly discouraged.</li>
</ul>
<blockquote>
<p>Note: in order for TypeScript to resolve relative references to the bazel-out folder,
we recommend that the base tsconfig contain a rootDirs section that includes all
possible locations they may appear.</p>
<p>We hope this will not be needed in some future release of TypeScript.
Follow https://github.com/microsoft/TypeScript/issues/37257 for more info.</p>
<p>For example, if the base tsconfig file relative to the workspace root is
<code class="language-plaintext highlighter-rouge">path/to/tsconfig.json</code> then you should configure like:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"compilerOptions": {
"rootDirs": [
".",
"../../bazel-out/host/bin/path/to",
"../../bazel-out/darwin-fastbuild/bin/path/to",
"../../bazel-out/k8-fastbuild/bin/path/to",
"../../bazel-out/x64_windows-fastbuild/bin/path/to",
"../../bazel-out/darwin-dbg/bin/path/to",
"../../bazel-out/k8-dbg/bin/path/to",
"../../bazel-out/x64_windows-dbg/bin/path/to",
]
}
</code></pre></div> </div>
<p>See some related discussion including both “rootDirs” and “paths” for a monorepo setup
using custom import paths:
https://github.com/bazelbuild/rules_nodejs/issues/2298</p>
</blockquote>
<h3 id="issues-when-running-non-sandboxed">Issues when running non-sandboxed</h3>
<p>When using a non-sandboxed spawn strategy (which is the default on Windows), you may
observe these problems which require workarounds:</p>
<p>1) Bazel deletes outputs from the previous execution before running <code class="language-plaintext highlighter-rouge">tsc</code>.
This causes a problem with TypeScript’s incremental mode: if the <code class="language-plaintext highlighter-rouge">.tsbuildinfo</code> file
is not known to be an output of the rule, then Bazel will leave it in the output
directory, and when <code class="language-plaintext highlighter-rouge">tsc</code> runs, it may see that the outputs written by the prior
invocation are up-to-date and skip the emit of these files. This will cause Bazel
to intermittently fail with an error that some outputs were not written.
This is why we depend on <code class="language-plaintext highlighter-rouge">composite</code> and/or <code class="language-plaintext highlighter-rouge">incremental</code> attributes to be provided,
so we can tell Bazel to expect a <code class="language-plaintext highlighter-rouge">.tsbuildinfo</code> output to ensure it is deleted before a
subsequent compilation.
At present, we don’t do anything useful with the <code class="language-plaintext highlighter-rouge">.tsbuildinfo</code> output, and this rule
does not actually have incremental behavior. Deleting the file is actually
counter-productive in terms of TypeScript compile performance.
Follow https://github.com/bazelbuild/rules_nodejs/issues/1726</p>
<p>2) When using Project References, TypeScript will expect to verify that the outputs of referenced
projects are up-to-date with respect to their inputs.
(This is true even without using the <code class="language-plaintext highlighter-rouge">--build</code> option).
When using a non-sandboxed spawn strategy, <code class="language-plaintext highlighter-rouge">tsc</code> can read the sources from other <code class="language-plaintext highlighter-rouge">ts_project</code>
rules in your project, and will expect that the <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file for those references will
indicate where the outputs were written. However the <code class="language-plaintext highlighter-rouge">outDir</code> is determined by this Bazel rule so
it cannot be known from reading the <code class="language-plaintext highlighter-rouge">tsconfig.json</code> file.
This problem is manifested as a TypeScript diagnostic like
<code class="language-plaintext highlighter-rouge">error TS6305: Output file '/path/to/execroot/a.d.ts' has not been built from source file '/path/to/execroot/a.ts'.</code>
As a workaround, you can give the Windows “fastbuild” output directory as the <code class="language-plaintext highlighter-rouge">outDir</code> in your tsconfig file.
On other platforms, the value isn’t read so it does no harm.
See https://github.com/bazelbuild/rules_nodejs/tree/stable/packages/typescript/test/ts_project as an example.
We hope this will be fixed in a future release of TypeScript;
follow https://github.com/microsoft/TypeScript/issues/37378</p>
<p>3) When TypeScript encounters an import statement, it adds the source file resolved by that reference
to the program. However you may have included that source file in a different project, so this causes
the problem mentioned above where a source file is in multiple programs.
(Note, if you use Project References this is not the case, TS will know the referenced
file is part of the other program.)
This will result in duplicate emit for the same file, which produces an error
since the files written to the output tree are read-only.
Workarounds include using using Project References, or simply grouping the whole compilation
into one program (if this doesn’t exceed your time budget).</p>
<p><strong>PARAMETERS</strong></p>
<h4 id="ts_project-name">name</h4>
<p>A name for the target.</p>
<p>We recommend you use the basename (no <code class="language-plaintext highlighter-rouge">.json</code> extension) of the tsconfig file that should be compiled.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"tsconfig"</code></p>
<h4 id="ts_project-tsconfig">tsconfig</h4>
<p>Label of the tsconfig.json file to use for the compilation</p>
<p>To support “chaining” of more than one extended config, this label could be a target that
provdes <code class="language-plaintext highlighter-rouge">TsConfigInfo</code> such as <code class="language-plaintext highlighter-rouge">ts_config</code>.</p>
<p>By default, we assume the tsconfig file is named by adding <code class="language-plaintext highlighter-rouge">.json</code> to the <code class="language-plaintext highlighter-rouge">name</code> attribute.</p>
<p>EXPERIMENTAL: generated tsconfig</p>
<p>Instead of a label, you can pass a dictionary of tsconfig keys.</p>
<p>In this case, a tsconfig.json file will be generated for this compilation, in the following way:</p>
<ul>
<li>all top-level keys will be copied by converting the dict to json.
So <code class="language-plaintext highlighter-rouge">tsconfig = {"compilerOptions": {"declaration": True}}</code>
will result in a generated <code class="language-plaintext highlighter-rouge">tsconfig.json</code> with <code class="language-plaintext highlighter-rouge">{"compilerOptions": {"declaration": true}}</code></li>
<li>each file in srcs will be converted to a relative path in the <code class="language-plaintext highlighter-rouge">files</code> section.</li>
<li>the <code class="language-plaintext highlighter-rouge">extends</code> attribute will be converted to a relative path</li>
</ul>
<p>Note that you can mix and match attributes and compilerOptions properties, so these are equivalent:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ts_project(
tsconfig = {
"compilerOptions": {
"declaration": True,
},
},
)
</code></pre></div></div>
<p>and</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ts_project(
declaration = True,
)
</code></pre></div></div>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-srcs">srcs</h4>
<p>List of labels of TypeScript source files to be provided to the compiler.</p>
<p>If absent, defaults to <code class="language-plaintext highlighter-rouge">**/*.ts[x]</code> (all TypeScript files in the package).</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-args">args</h4>
<p>List of strings of additional command-line arguments to pass to tsc.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_project-deps">deps</h4>
<p>List of labels of other rules that produce TypeScript typings (.d.ts files)</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>
<h4 id="ts_project-extends">extends</h4>
<p>Label of the tsconfig file referenced in the <code class="language-plaintext highlighter-rouge">extends</code> section of tsconfig</p>
<p>To support “chaining” of more than one extended config, this label could be a target that
provdes <code class="language-plaintext highlighter-rouge">TsConfigInfo</code> such as <code class="language-plaintext highlighter-rouge">ts_config</code>.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-allow_js">allow_js</h4>
<p>boolean; Specifies whether TypeScript will read .js and .jsx files. When used with declaration,
TypeScript will generate .d.ts files from .js files.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-declaration">declaration</h4>
<p>if the <code class="language-plaintext highlighter-rouge">declaration</code> bit is set in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.d.ts</code> output for each <code class="language-plaintext highlighter-rouge">.ts</code> source.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-source_map">source_map</h4>
<p>if the <code class="language-plaintext highlighter-rouge">sourceMap</code> bit is set in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.js.map</code> output for each <code class="language-plaintext highlighter-rouge">.ts</code> source.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-declaration_map">declaration_map</h4>
<p>if the <code class="language-plaintext highlighter-rouge">declarationMap</code> bit is set in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.d.ts.map</code> output for each <code class="language-plaintext highlighter-rouge">.ts</code> source.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-preserve_jsx">preserve_jsx</h4>
<p>if the <code class="language-plaintext highlighter-rouge">jsx</code> value is set to “preserve” in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.jsx</code> or <code class="language-plaintext highlighter-rouge">.jsx.map</code> output for each <code class="language-plaintext highlighter-rouge">.tsx</code> source.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-composite">composite</h4>
<p>if the <code class="language-plaintext highlighter-rouge">composite</code> bit is set in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.tsbuildinfo</code> output and a <code class="language-plaintext highlighter-rouge">.d.ts</code> output for each <code class="language-plaintext highlighter-rouge">.ts</code> source.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-incremental">incremental</h4>
<p>if the <code class="language-plaintext highlighter-rouge">incremental</code> bit is set in the tsconfig.
Instructs Bazel to expect a <code class="language-plaintext highlighter-rouge">.tsbuildinfo</code> output.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-emit_declaration_only">emit_declaration_only</h4>
<p>if the <code class="language-plaintext highlighter-rouge">emitDeclarationOnly</code> bit is set in the tsconfig.
Instructs Bazel <em>not</em> to expect <code class="language-plaintext highlighter-rouge">.js</code> or <code class="language-plaintext highlighter-rouge">.js.map</code> outputs for <code class="language-plaintext highlighter-rouge">.ts</code> sources.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-ts_build_info_file">ts_build_info_file</h4>
<p>the user-specified value of <code class="language-plaintext highlighter-rouge">tsBuildInfoFile</code> from the tsconfig.
Helps Bazel to predict the path where the .tsbuildinfo output is written.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-tsc">tsc</h4>
<p>Label of the TypeScript compiler binary to run.</p>
<p>For example, <code class="language-plaintext highlighter-rouge">tsc = "@my_deps//typescript/bin:tsc"</code>
Or you can pass a custom compiler binary instead.</p>
<p>One possible compiler is the Angular compiler, provided by the
<code class="language-plaintext highlighter-rouge">@angular/compiler-cli</code> package as the <code class="language-plaintext highlighter-rouge">ngc</code> binary, which can be set typically with
<code class="language-plaintext highlighter-rouge">tsc = "@npm//@angular/compiler-cli/bin:ngc"</code>
Note that you’ll also need to pass <code class="language-plaintext highlighter-rouge">.html</code> and <code class="language-plaintext highlighter-rouge">.css</code> files to the <code class="language-plaintext highlighter-rouge">srcs</code> of the <code class="language-plaintext highlighter-rouge">ts_project</code>
so that they’re declared as inputs for the Angular compiler to read them.</p>
<p>An example can be found in the rules_nodejs repo under <code class="language-plaintext highlighter-rouge">packages/typescript/test/ts_project/ngc</code>.</p>
<p>> To use the <code class="language-plaintext highlighter-rouge">ngc</code> program from Angular versions prior to 11, you’ll need a fix for
> https://github.com/angular/angular/issues/36290
> To apply the fix, you can use the patch-package package to apply this patch:
> https://gist.github.com/alexeagle/ba44b2601bd7c953d29c6e8ec44d1ef9</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-typescript_package">typescript_package</h4>
<p>Label of the package containing all data deps of tsc.</p>
<p>For example, <code class="language-plaintext highlighter-rouge">typescript_package = "@my_deps//typescript"</code></p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"@npm//typescript"</code></p>
<h4 id="ts_project-typescript_require_path">typescript_require_path</h4>
<p>Module name which resolves to typescript_package when required</p>
<p>For example, <code class="language-plaintext highlighter-rouge">typescript_require_path = "typescript"</code></p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">"typescript"</code></p>
<h4 id="ts_project-validate">validate</h4>
<p>boolean; whether to check that the tsconfig settings match the attributes.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">True</code></p>
<h4 id="ts_project-supports_workers">supports_workers</h4>
<p>Experimental! Use only with caution.</p>
<p>Allows you to enable the Bazel Persistent Workers strategy for this project.
See https://docs.bazel.build/versions/master/persistent-workers.html</p>
<p>This requires that the tsc binary support a <code class="language-plaintext highlighter-rouge">--watch</code> option.</p>
<p>NOTE: this does not work on Windows yet.
We will silently fallback to non-worker mode on Windows regardless of the value of this attribute.
Follow https://github.com/bazelbuild/rules_nodejs/issues/2277 for progress on this feature.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-declaration_dir">declaration_dir</h4>
<p>a string specifying a subdirectory under the bazel-out folder where generated declaration
outputs are written. Equivalent to the TypeScript –declarationDir option.
By default declarations are written to the out_dir.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-out_dir">out_dir</h4>
<p>a string specifying a subdirectory under the bazel-out folder where outputs are written.
Equivalent to the TypeScript –outDir option.
Note that Bazel always requires outputs be written under a subdirectory matching the input package,
so if your rule appears in path/to/my/package/BUILD.bazel and out_dir = “foo” then the .js files
will appear in bazel-out/[arch]/bin/path/to/my/package/foo/*.js.
By default the out_dir is ‘.’, meaning the packages folder in bazel-out.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-root_dir">root_dir</h4>
<p>a string specifying a subdirectory under the input package which should be consider the
root directory of all the input files.
Equivalent to the TypeScript –rootDir option.
By default it is ‘.’, meaning the source directory where the BUILD file lives.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p>
<h4 id="ts_project-link_workspace_root">link_workspace_root</h4>
<p>Link the workspace root to the bin_dir to support absolute requires like ‘my_wksp/path/to/file’.
If source files need to be required then they can be copied to the bin_dir with copy_to_bin.</p>
<p>Defaults to <code class="language-plaintext highlighter-rouge">False</code></p>
<h4 id="ts_project-kwargs">kwargs</h4>
<p>passed through to underlying rule, allows eg. visibility, tags</p>
</div>
</div>
<div class="col-md-2 sticky-sidebar">
<div class="right-sidebar">
<ul class="gh-links">
<li>
<i class="fa fa-github"></i>
<a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: TypeScript&labels=question/docs">Create
issue</a>
</li>
</ul>
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#alternatives">Alternatives</a>
<ul>
<li class="toc-entry toc-h3"><a href="#tsc">tsc</a></li>
<li class="toc-entry toc-h3"><a href="#ts_project">ts_project</a></li>
<li class="toc-entry toc-h3"><a href="#ts_library">ts_library</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#installation">Installation</a></li>
<li class="toc-entry toc-h2"><a href="#typical-usage">Typical Usage</a></li>
<li class="toc-entry toc-h2"><a href="#ts_config">ts_config</a></li>
<li class="toc-entry toc-h2"><a href="#ts_library-1">ts_library</a></li>
<li class="toc-entry toc-h2"><a href="#serving-typescript-for-development">Serving TypeScript for development</a></li>
<li class="toc-entry toc-h2"><a href="#accessing-javascript-outputs">Accessing JavaScript outputs</a></li>
<li class="toc-entry toc-h2"><a href="#ts_project-1">ts_project</a>
<ul>
<li class="toc-entry toc-h3"><a href="#issues-when-running-non-sandboxed">Issues when running non-sandboxed</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p class="text-muted">© 2021 The rules_nodejs authors</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->