{"id":10284,"date":"2017-03-09T17:42:00","date_gmt":"2017-03-09T08:42:00","guid":{"rendered":"http:\/\/www.skyarch.net\/blog\/?p=10284"},"modified":"2025-12-08T18:06:11","modified_gmt":"2025-12-08T09:06:11","slug":"typescript-tsd-to-typings-and-compile-with-gulp","status":"publish","type":"post","link":"https:\/\/www.skyarch.net\/blog\/en\/typescript-tsd-to-typings-and-compile-with-gulp\/","title":{"rendered":"Typescript: TSD to Typings and Compile with Gulp"},"content":{"rendered":"<p>As a typescript user, we need to have our typescript definitions put handled correctly and put in place. As I continue developing SkyHopper, I encountered some <a href=\"https:\/\/github.com\/DefinitelyTyped\/tsd\/issues\/269\">deprecations<\/a> which one like the TSD aka\u00a0TypeScript Definition manager for DefinitelyTyped. As of Jan. 26, 2016 it has been deprecated. So I choose to upgrade to typings from TSD to avoid future typings issues and get updated support from the open source community. As What the saying says &quot;Better to do it sooner than later&quot;.<\/p>\n<p>Now, lets get rid first of TSD both locally and globally depends on your the setup:<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  npm uninstall tsd -g --save-dev <\/pre>\n<\/p>\n<blockquote><p>Please note that the old typings folder will be completely modified to fit the new structure in the new Typings architecture different from TSD. So if you custom made some typings file in this folder, please track them down manually or create a backup problem to avoid lost typings problems.<\/p><\/blockquote>\n<p>After that, We need to remove the typings folder to replace it with a new one.<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  rm typings <\/pre>\n<\/p>\n<p>Now install typings and save it in your package.json as devDependency and install it globally so that we can use the CLI to install dependencies<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  npm install typings --global --save-dev <\/pre>\n<\/p>\n<p>Now, we will change the old tsd.json file into typings.json\u00a0format which looks and works completely different using the upgrade command.<\/p>\n<p>Execute :<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  typings init --upgrade <\/pre>\n<\/p>\n<p>You can now safely remove your\u00a0<code>tsd.json<\/code>\u00a0file which will be replaced to\u00a0<code>typings.json<\/code>\u00a0.<\/p>\n<p>You can install a typings definition and save it. For example jQuery using Typings CLI (Global parameter is often used):<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  typings install jQuery --save --global <\/pre>\n<\/p>\n<p>Now that we have install typings its time to install gulp for add a task runner like compiling and installing the typings definition.<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  npm install -g gulp <\/pre>\n<\/p>\n<p>Now it will we will initialize a gulp task list<\/p>\n<p><pre class=\"brush: bash; title: ; notranslate\" title=\"\">  gulp init <\/pre>\n<\/p>\n<p>&nbsp;<\/p>\n<p>Now you can modify the gulp task for example<\/p>\n<p><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar gulp = require('gulp');\nvar tsProject = ts.createProject('tsconfig.json');\nvar ts = require('gulp-typescript');&lt;\/p&gt;\n&lt;p&gt;gulp.task('build', function() {\nreturn tsProject.src()\n.pipe(ts(tsProject))\n.pipe(gulp.dest('dist'));\n});\n<\/pre>\n<\/p>\n<p>So that it will automatically build your typings definition and compile them to and put them into a destination folder described in your tsconfig.json<\/p>\n<p>If you have questions please comment below.<\/p>\n<p>References to upgrade from tsd:<\/p>\n<p>webpack+typescript<br \/>\n<a class=\"commit-link\" href=\"https:\/\/github.com\/angular\/universal-starter\/commit\/cfb7b52b12e1da9de7ee7c2a452e7636c93aaa09\">angular\/universal-starter@<tt>cfb7b52<\/tt><\/a><\/p>\n<p>gulpjs+typescript<br \/>\n<a href=\"https:\/\/github.com\/angular\/answers-app\/pull\/27\/files\"><a href=\"https:\/\/github.com\/angular\/answers-app\/pull\/27\/files\">https:\/\/github.com\/angular\/answers-app\/pull\/27\/files<\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a typescript user, we need to have our typescript definitions put handled correctly and put in place. As I &#8230;<\/p>\n","protected":false},"author":1,"featured_media":10289,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"10284","footnotes":""},"categories":[119,95],"tags":[],"class_list":{"0":"post-10284","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-skyhopper","9":"en-US"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/10284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/comments?post=10284"}],"version-history":[{"count":13,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/10284\/revisions"}],"predecessor-version":[{"id":30070,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/10284\/revisions\/30070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media\/10289"}],"wp:attachment":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media?parent=10284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/categories?post=10284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/tags?post=10284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}