How to add TypeScript Definitions to .NET Core Nuget Packages

Question

We have an internal NuGet Package that consists of some .NET Code and a TypeScript Definition File (*.d.ts). This is the content of the package:

After installing the package into a new .NET Core project, the folder structure in the solution explorer looks like this.

So far, everything went as expected. But note the small arrow symbols on the "i18n" folder and the "Index.d.ts" file. It looks like they're just links to the actual file. When I click on the d.ts file the content seems correct. But Visual Studio fails to recognize the declarations in it, so I can't use it in my TypeScripts.

One idea was to include the path to the packages in the tsconfig.json, but that can't be the solution... Any other ideas how to do that?

Answer 1

So, after seeing the replies here and not giving up, I have to put in my approach to this.

As I'm working on a large solution with over 100 subprojects - many of them fast moving NuGets, I couldn't give up. I wanted to have my .NET object models including their interface/class representations in TS, being able to have both imported by including one NuGet (and thereby reduce dependency hell a little bit). I have to mention, I tested this only with my own object model, which has no external dependencies - and I tested only on VS2022.

But in this restricted scenario it works without any issues.

On the project containing the TS definitions Set the build action for the ts definitions you need to be included in the NuGet to "content". This will include them into the NuGet package.

On the consumer side Adjust your package reference, add the following property/value:

<GeneratePathProperty>True</GeneratePathProperty>

This will create an MsBuild property/variable referencing the path to the local presence of the restored NuGet file (important if your building on multiple, different machines - like on CI pipelines, build servers etc.) and allowing you to avoid any hardcoded absolute paths.

The generated property has the following format

$(Pkg<PackageNameWithDotsBeingReplacedByUnderlines>)

So a package named "MyPackage.Hello" would result in the variable $(PkgMyPackage_Hello)

Now we create a new build target to copy the files from the restored package's contentfiles folder (as it's restored, and we have the restored and thereby extracted path, we can finally target them).

<Target Name="CopyImportedTypes" BeforeTargets="Build">
  <ItemGroup>
      <TsTypesToCopy Include="$(PkgMyPackage_Hello)\contentFiles\any\net6.0-windows10.0.20348\*.ts" />
   </ItemGroup>
   <Copy SourceFiles="@(TsTypesToCopy)" DestinationFolder="$(MSBuildProjectDirectory)\AnyProjectSubFolderIfDesired" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" />
</Target>

Make sure to adjust the "Include" path to your package (TFM, Platform etc.). An easy way to get the relative path is to open up the solution explorer, expand your consuming project, expand dependencies and then packages, expand the package with your ts definitions and open up the properties of the contentfiles.

This target is being executed before the actual build (so we can use the imported types on the build being happening right this moment) (BeforeTargets property). The ItemGroup is nothing else than a definition of items (in our case, source files) we want to use, being stored into @(TsTypesToCopy) which is being used by the copy task.

Thankfully, VS does automatically set new files to the right build action (in most cases), so the brand new ts files should be in the right mode automatically - so we don't have to tweak anything manually.

Answer 2

How to add TypeScript Definitions to .NET Core Nuget Packages

As far as I know, Definitely Typed packages are not compatible with .NET Core projects. That because the script files should be included in <contentFiles> element. You can refer to the Including content files for more detail info.

Besides, just as Martin comment, npm is the recommended method of installing Definitely Typed packages:

https://github.com/DefinitelyTyped/DefinitelyTyped#how-do-i-get-them