build: enable --strict for tools typescript code

Author: devversion

tools/dgeni/processors/entry-point-grouper.ts

@@ -24,22 +24,22 @@ export class EntryPointDoc {
   docType = 'entry-point';
 
   /** Name of the component group. */
-  name: string;
+  name: string = '';
 
   /** Display name of the entry-point. */
-  displayName: string;
+  displayName: string = '';
 
   /** Module import path for the entry-point. */
-  moduleImportPath: string;
+  moduleImportPath: string = '';
 
   /** Name of the package, either material or cdk */
-  packageName: string;
+  packageName: string = '';
 
   /** Display name of the package. */
-  packageDisplayName: string;
+  packageDisplayName: string = '';
 
   /** Unique id for the entry-point. */
-  id: string;
+  id: string = '';
 
   /** Known aliases for the entry-point. This is only needed for the `computeIdsProcessor`. */
   aliases: string[] = [];

tools/example-module/generate-example-module.ts

@@ -116,7 +116,9 @@ function analyzeExamples(sourceFiles: string[], baseDir: string): AnalyzedExampl
         title: primaryComponent.title.trim(),
         additionalComponents: [],
         files: [],
-        module: null,
+        // The `module` field will be set in a separate step below. We need to set
+        // it here as we are setting it later in a side-effect iteration.
+        module: null!,
       };
 
       // For consistency, we expect the example component selector to match

tools/example-module/parse-example-file.ts

@@ -10,7 +10,7 @@ interface ParsedMetadata {
 }
 
 interface ParsedMetadataResults {
-  primaryComponent: ParsedMetadata;
+  primaryComponent: ParsedMetadata | undefined;
   secondaryComponents: ParsedMetadata[];
 }
 

tools/sass/compiler-main.ts

@@ -1,11 +1,14 @@
 import * as worker from '@bazel/worker';
 import * as fs from 'fs';
-import * as sass from 'sass';
 import * as path from 'path';
 import yargs from 'yargs';
 
 import {createLocalAngularPackageImporter} from './local-sass-importer';
 
+// TODO: Switch to normal import when https://github.com/sass/dart-sass/issues/1714 is fixed.
+// Also re-add the `as XX` type narrowing below.
+const sass = require('sass') as any;
+
 const workerArgs = process.argv.slice(2);
 
 // Note: This path is relative to the current working directory as build actions
@@ -61,7 +64,7 @@ async function processBuildAction(args: string[]) {
     .parseAsync();
 
   const result = sass.compile(inputExecpath, {
-    style: style as sass.OutputStyle,
+    style: style, // TODO: Re-add: as sass.OutputStyle,
     sourceMap,
     sourceMapIncludeSources: embedSources,
     loadPaths: loadPath,

tools/sass/local-sass-importer.ts

@@ -1,6 +1,8 @@
 import {pathToFileURL} from 'url';
 import {join} from 'path';
-import * as sass from 'sass';
+
+// TODO: Add explicit type for `Sass.FileImporter` once
+//  https://github.com/sass/dart-sass/issues/1714 is fixed.
 
 /** Prefix indicating Angular-owned Sass imports. */
 const angularPrefix = '@angular/';
@@ -9,7 +11,7 @@ const angularPrefix = '@angular/';
  * Creates a Sass `FileImporter` that resolves `@angular/<..>` packages to the
  * specified local packages directory.
  */
-export function createLocalAngularPackageImporter(packageDirAbsPath: string): sass.FileImporter {
+export function createLocalAngularPackageImporter(packageDirAbsPath: string) {
   return {
     findFileUrl: (url: string) => {
       if (url.startsWith(angularPrefix)) {

tools/stylelint/cross-package-import-validation.ts

@@ -3,10 +3,10 @@ import {dirname, relative, join} from 'path';
 
 const ruleName = 'material/cross-package-import-validation';
 const messages = utils.ruleMessages(ruleName, {
-  forbidden: (targetPackage: string, importPath: string) =>
+  forbidden: (targetPackage, importPath) =>
     `Relative reference to separate NPM package "${targetPackage}" is not allowed. ` +
     `Use a module specifier instead of "${importPath}".`,
-  noDeepCrossPackageModuleImport: (importSpecifier: string) =>
+  noDeepCrossPackageModuleImport: importSpecifier =>
     `Deep cross-package module imports are not allowed ("${importSpecifier}").`,
 });
 
@@ -21,7 +21,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
       return;
     }
 
-    const filePath = root.source.input.file;
+    const filePath = root.source!.input.file!;
 
     // We skip non-theme files and legacy theming Sass files (like `.import.scss`).
     if (
@@ -34,7 +34,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
 
     root.walkAtRules(rule => {
       if (rule.name === 'use' || rule.name === 'import' || rule.name === 'forward') {
-        const [_, specifier] = rule.params.match(specifierRegex);
+        const [_, specifier] = rule.params.match(specifierRegex)!;
 
         // Ensure no deep imports for cross-package `@angular/` imports.
         if (/@angular\/[^/]+\//.test(specifier)) {
@@ -52,13 +52,13 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
           return;
         }
 
-        const currentPath = convertToProjectRelativePosixPath(root.source.input.file);
+        const currentPath = convertToProjectRelativePosixPath(root.source!.input.file!);
         const targetPath = convertToProjectRelativePosixPath(
-          join(dirname(root.source.input.file), specifier),
+          join(dirname(root.source!.input.file!), specifier),
         );
 
-        const owningFilePackage = currentPath.match(packageNameRegex)[1];
-        const targetFilePackage = targetPath.match(packageNameRegex)[1];
+        const owningFilePackage = currentPath.match(packageNameRegex)![1];
+        const targetFilePackage = targetPath.match(packageNameRegex)![1];
 
         if (owningFilePackage !== targetFilePackage) {
           utils.report({

tools/stylelint/no-ampersand-beyond-selector-start.ts

@@ -11,7 +11,7 @@ const messages = utils.ruleMessages(ruleName, {
 
 /** Config options for the rule. */
 interface RuleOptions {
-  filePattern: string;
+  filePattern?: string;
 }
 
 /**
@@ -27,16 +27,16 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions)
       return;
     }
 
-    const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source.input.file);
+    const filePattern = options.filePattern ? new RegExp(options.filePattern) : null;
+    const fileName = basename(root.source!.input.file!);
 
-    if (!filePattern.test(fileName)) {
+    if (filePattern !== null && !filePattern.test(fileName)) {
       return;
     }
 
     root.walkRules(rule => {
       if (
-        rule.parent.type === 'rule' &&
+        rule.parent?.type === 'rule' &&
         isStandardSyntaxRule(rule) &&
         isStandardSyntaxSelector(rule.selector) &&
         hasInvalidAmpersandUsage(rule.selector)

tools/stylelint/no-concrete-rules.ts

@@ -3,12 +3,14 @@ import {basename} from 'path';
 
 const ruleName = 'material/no-concrete-rules';
 const messages = utils.ruleMessages(ruleName, {
-  expected: pattern => `CSS rules must be placed inside a mixin for files matching '${pattern}'.`,
+  expectedWithPattern: pattern =>
+    `CSS rules must be placed inside a mixin for files matching '${pattern}'.`,
+  expectedAllFiles: () => `CSS rules must be placed inside a mixin for all files.`,
 });
 
 /** Config options for the rule. */
 interface RuleOptions {
-  filePattern: string;
+  filePattern?: string;
 }
 
 /**
@@ -21,10 +23,10 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions)
       return;
     }
 
-    const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source.input.file);
+    const filePattern = options.filePattern ? new RegExp(options.filePattern) : null;
+    const fileName = basename(root.source!.input.file!);
 
-    if (!filePattern.test(fileName) || !root.nodes) {
+    if ((filePattern !== null && !filePattern.test(fileName)) || !root.nodes) {
       return;
     }
 
@@ -37,7 +39,10 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions)
           result,
           ruleName,
           node,
-          message: messages.expected(filePattern),
+          message:
+            filePattern !== null
+              ? messages.expectedWithPattern(filePattern)
+              : messages.expectedAllFiles(),
         });
       }
     });

tools/stylelint/no-import.ts

@@ -15,7 +15,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?:
 
     const excludePattern = options?.exclude ? new RegExp(options.exclude) : null;
 
-    if (excludePattern?.test(basename(root.source.input.file))) {
+    if (excludePattern?.test(basename(root.source!.input.file!))) {
       return;
     }
 

tools/stylelint/no-prefixes/index.ts

@@ -5,7 +5,7 @@ import {NeedsPrefix} from './needs-prefix';
 const parseSelector = require('stylelint/lib/utils/parseSelector');
 const ruleName = 'material/no-prefixes';
 const messages = utils.ruleMessages(ruleName, {
-  property: (property: string, browsers: string) => {
+  property: (property, browsers) => {
     return `Unprefixed property "${property}" needs a prefix for browsers ${browsers}.`;
   },
   value: (property, value) => `Unprefixed value in "${property}: ${value}".`,
@@ -16,16 +16,20 @@ const messages = utils.ruleMessages(ruleName, {
 
 /** Config options for the rule. */
 interface Options {
-  browsers: string[];
-  filePattern: string;
+  browsers?: string[];
+  filePattern?: string;
 }
 
 /**
  * Stylelint plugin that warns for unprefixed CSS.
  */
 const plugin = createPlugin(ruleName, (isEnabled: boolean, {filePattern, browsers}: Options) => {
   return (root, result) => {
-    if (!isEnabled || (filePattern && !minimatch(root.source.input.file, filePattern))) {
+    if (
+      !isEnabled ||
+      !browsers ||
+      (filePattern && !minimatch(root.source!.input.file!, filePattern))
+    ) {
       return;
     }
 

tools/stylelint/no-top-level-ampersand-in-mixin.ts

@@ -24,7 +24,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
 
     const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source.input.file);
+    const fileName = basename(root.source!.input.file!);
 
     if (!filePattern.test(fileName)) {
       return;

tools/stylelint/no-unused-import.ts

@@ -3,8 +3,8 @@ import {basename, join} from 'path';
 
 const ruleName = 'material/no-unused-import';
 const messages = utils.ruleMessages(ruleName, {
-  expected: (namespace: string) => `Namespace ${namespace} is not being used.`,
-  invalid: (rule: string) =>
+  expected: namespace => `Namespace ${namespace} is not being used.`,
+  invalid: rule =>
     `Failed to extract namespace from ${rule}. material/no-unused-` +
     `imports Stylelint rule likely needs to be updated.`,
 });

tools/stylelint/selector-no-deep.ts

@@ -19,7 +19,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
 
     root.walkRules(rule => {
       if (
-        rule.parent.type === 'rule' &&
+        rule.parent?.type === 'rule' &&
         isStandardSyntaxRule(rule) &&
         isStandardSyntaxSelector(rule.selector) &&
         rule.selector.includes('/deep/')

tools/stylelint/single-line-comment-only.ts

@@ -19,7 +19,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {filePatter
 
     const filePattern = options?.filePattern ? new RegExp(options.filePattern) : null;
 
-    if (filePattern && !filePattern?.test(basename(root.source.input.file))) {
+    if (filePattern && !filePattern?.test(basename(root.source!.input.file!))) {
       return;
     }
 

tools/stylelint/theme-mixin-api.ts

@@ -23,7 +23,7 @@ const themeMixinRegex = /^(density|color|typography|theme)\((.*)\)$/;
  */
 const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) => {
   return (root, result) => {
-    const componentName = getComponentNameFromPath(root.source.input.file);
+    const componentName = getComponentNameFromPath(root.source!.input.file!);
 
     if (!componentName || !isEnabled) {
       return;
@@ -234,7 +234,7 @@ function stripNewlinesAndIndentation(value: string): string {
  * The `<..>` character sequency is a placeholder that will allow for arbitrary
  * content.
  */
-function anyPattern(pattern): RegExp {
+function anyPattern(pattern: string): RegExp {
   const regex = new RegExp(
     `^${sanitizeForRegularExpression(pattern).replace(/<\\.\\.>/g, '.*?')}$`,
   );

tools/tsconfig.json

@@ -8,6 +8,7 @@
     "outDir": "../dist/tools",
     "target": "es2020",
     "module": "Node16",
+    "strict": true,
     "esModuleInterop": true,
     "lib": ["es2020"],
     "skipLibCheck": true,